WordPress PWA プラグイン比較

WordPress

プラグインを使用してPWA化してみたのですが、いくつかPWA用のプラグインがあるようなので比較してみました。

なお、インストール数などの情報は2018/10/7の時点でのものになります。

追記: 2018/12/13
インストール数に変化があったものを更新しました。
じわじわと広がっているのを感じます。

PWA for WP & AMP

PWA for WP & AMP
PWA plugin is bringing the power of the Progressive Web Apps to the WP & AMP to take the user experience to the next level!

インストール数:200+

追記: 2018/12/13 インストール数:2000+

開発者3人

プラグイン一覧では名前が「PWA for WP」

特徴

名前にAMPとありますが、このプラグイン自体にAMP機能はなく「AMP for WP」がインストールされている場合にそれを考慮するつくりになっているようです。

AMP for WP – Accelerated Mobile Pages
AMP for WP is the most recommended AMP plugin by the community. Automatically add Accelerated Mobile Pages (Google AMP Project) functionality on your …

displayはstandaloneで固定

start_urlとscopeは自由に設定できません。

その他の特徴としては、CSSやJS、画像やフォントごとに細かくキャッシュ戦略を設定できる点が挙げられます。

キャッシュ期限の設定も可能です。

無効化時またはアンインストール時にオプションの値を消したり生成したファイルを消す動作がないので注意が必要です。

追記: 2018/12/13
新しいバージョンではさらに機能が追加されています。

  • firebaseを利用したプッシュ通知機能
  • 「ホーム画面に追加」するボタンを独自に追加する機能
  • オフライン時のGoogle Analyticsのデータ同期機能(workbox-swライブラリを使用)
追記: 2018/12/13
新しいバージョンでもアンインストール時にファイルが残り続けるので注意が必要です。

PWA for WordPress

PWA for WordPress
PWA for WordPress は WordPress サイトを PWA (Progressive Web App) として構成し、PWA のキャッシュを簡単に制御できるプラグインです。

インストール数:30+

追記: 2018/12/13 インストール数:90+

開発者1チーム(4人)

特徴

日本人開発者!

Compin Activity Logs
Enjoy Computing Everyday!

講演等も行っており、これからに期待できそうです。

管理画面も日本語での説明があるのでわかりやすいです。

キャッシュ制御は有効時間だけでなく除外設定を正規表現で設定することが可能です。

追記: 2018/12/13
新しいバージョンではさらに機能が追加されています。

  • 「ホーム画面に追加」するボタンを独自に追加する機能
  • マルチサイト対応

Progressive WordPress (PWA)

Progressive WordPress (PWA)
It has never been easier to add progressive web app features (PWA) to your WordPress website. It even supports Accelerate Mobile Pages (AMP) and is co …

インストール数:700+

追記: 2018/12/13 インストール数:1000+

開発者2人

特徴

PWAのライブラリであるworkboxを使用して実装されているようです。

Workbox  |  Google Developers
Workbox is a set of service worker libraries that making build progressive web apps easy.

キャッシュ戦略として「Stale While Revalidate(キャッシュから取得するが裏で非同期にキャッシュを更新しておく)」を指定可能

キャッシュの有効時間は指定できないみたいですが、「Stale While Revalidate」があるので問題なさそうです。

start_url の設定はなく、代わりに固定ページをStart Pageとして設定します。

「ホーム画面に追加」するボタンを独自で作成することもできます。

Androidではうまく動きましたが、iPhoneではやはり動かないようです。

その他の特徴としてはFirebaseを利用したプッシュ通知オフライン時のGoogle Analyticsのデータをオンラインになったときに同期する機能もあるようです。

全体的にちゃんと作りこまれている印象ですが、iPhoneの場合どのリンクをタップしても新しくSafariで開かれてしまったため今のところ使用は見送っています。

(設定を間違っていた可能性はありますが。。。)

追記: 2018/12/13
新しいバージョンではさらに機能が追加されています。

  • AMPをサポート
  • 固定ページだけでなくFront PageをStart Pageとして設定できるようになりました
  • iPhoneの場合にどのリンクでも新しくSafariで開かれていたのが内部リンクはPWA内で動作するようになりました

プラグインとしてかなりよくなってきている印象です。

PWA

PWA
WordPress feature plugin to bring Progressive Web App (PWA) capabilities to Core

インストール数:400+

開発者3人

開発者にGoogle、XWP、Automattic

XWPはWordPressのVIPパートナー

AutomatticはWordPress.com 開発・運営元

公式っぽいですね。

特徴

プラグインの作りはさすがはWordPress本家っぽい作り

ただService Workerは「wp_register_service_worker」を使用して自分で追加する必要があります。

またmanifestは設定で変更できません。

デフォルトではdisplayはminimal-uiになっています。

変更するには下の個所をadd_filterしてフックする必要があります。

return apply_filters( 'web_app_manifest', $manifest );

将来的に本家にマージされる気がするので、PWAを提供するプラグインはこのプラグインを拡張するプラグインとして

manifestの設定値変更画面およびmanifestの書き換え機能+独自のService Workerを登録機能

の動作を実装するプラグインにしておいたほうが良い気がします。

追記: 2018/12/13
https://github.com/xwp/pwa-wp
READMEを見る限りだと将来的にコアに取り入れられる可能性があります。
#43328 (Add support for Web App Manifests) – WordPress Trac

Super Progressive Web Apps

Super Progressive Web Apps
SuperPWA helps you convert your WordPress website into a Progressive Web App instantly.

インストール数:10000+

開発者3人

圧倒的インストール数

評価も多く5つ星のみ

特徴

キャッシュ戦略はキャッシュ優先です。

キャッシュの有効時間の設定がないです。

キャッシュ除外の設定はフィルタをフックすれば可能ですが、設定からはできません。

正直言うとなんでこんなに評価が高いのかがわからないくらい機能としては普通な感じです。

ただプラグインの作りは結構ちゃんとしており、開発者のレベルは高めな印象です。

WP_Filesystemの使用してmanifestファイル等を作成・削除していますが認証情報を与えられていないため、FTP設定をしている場合(KUSANAGI環境等)では以下のような修正が必要です。

function superpwa_wp_filesystem_init() {
   
   global $wp_filesystem;
   
   if ( empty( $wp_filesystem ) ) {
      require_once( trailingslashit( ABSPATH ) . 'wp-admin/includes/file.php' );
      WP_Filesystem();
   }
}

function superpwa_wp_filesystem_init() {
   
   global $wp_filesystem;
   
   if ( empty( $wp_filesystem ) ) {
      require_once( trailingslashit( ABSPATH ) . 'wp-admin/includes/file.php' );
      $creds = request_filesystem_credentials('', '', false, false, null);
      WP_Filesystem($creds);
   }
}

WordPress PWA

Frontity
Make your mobile site fast and highly engaging with a Progressive Web App (PWA) theme built on React.

インストール数:40+

開発者5人

特徴

frontityというところに登録しておく必要があるようです。

Frontity - WordPress PWAs with Google AMP support
Progressive Web Apps with Google AMP. Make your WordPress site perform great on mobile devices. Score 100/100 on Google PageSpeed Insights.

開発者多め

実際に試せていませんが管理画面のメニュー追加時に非推奨の引数を渡しているため、デバッグ時にはエラーがたくさん表示されます。

まとめ

最近盛り上がっているPWAですが、すでにたくさんプラグインが開発されているようです。

インストール数も初めに見た時よりだいぶ伸びているものもありました。

独自にキャッシュ制御を行うService Workerを用意しているプラグインが多く、キャッシュ制御で多少差がありました。

オープンソースプロジェクトを利用したものもあり、ほかのプラグインよりも色々な機能が追加されやすい可能性があるため注目したいと思います。

Workbox  |  Google Developers
Workbox is a set of service worker libraries that making build progressive web apps easy.

公式のPWAプラグインはそれ自体では機能が不十分ですがWordPress本体同様に拡張性が高く、将来的に本体にマージされる気がしています。

なので他のプラグインはこのプラグインを意識した実装にしておくと良い気がします。

しばらくは私のサイトでは日本人の開発者ということで「PWA for WordPress」を使用する予定です。

コメント