WordPress PWA プラグイン比較

WordPress

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

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

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

追記:2019/6/20
色々と情報を更新しました。

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+

追記:2019/6/20 インストール数:7000+

開発者3人

追記:2019/6/20 5/25に開発者が法人1社に変わったようです。

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

特徴

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

追記:2018/11/24
「AMP for WP」に脆弱性があるようです。
使用にはご注意ください。
https://japan.zdnet.com/article/35128985/

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
新しいバージョンでもアンインストール時にファイルが残り続けるので注意が必要です。

追記:2019/6/20
新しいバージョンではさらに機能が追加・改善されています。
 ・ステータスチェック
 ・プッシュ通知機能の改善
 ・キャッシュ機能の改善

追記:2019/6/20
機能的には問題ないですが、ソースコードはあまりきれいではなく本来必要な処理もないため技術面で問題があり、使用は避けたほうがよいです。
実際XSSを起こす可能性のあるコードが複数個所あります。

PWA for WordPress

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

インストール数:30+

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

追記:2019/6/20 インストール数:300+

開発者1チーム(4人)

特徴

日本人開発者です。

Compin Activity Logs
Enjoy Computing Everyday!

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

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

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

追記:2018/12/13
新しいバージョンではさらに機能が追加されています。
 ・「ホーム画面に追加」するボタンを独自に追加する機能
 ・マルチサイト対応

追記:2019/6/20
セキュリティの問題が修正されました。
古いバージョンを使用している場合は速やかにアップデートしてください。
https://wpvulndb.com/vulnerabilities/9363

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+

追記:2019/6/20 インストール数:10000+

開発者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を見る限りだと将来的にコアに取り入れられる可能性があります。
https://core.trac.wordpress.org/ticket/43328

追記:2019/6/20
急激にインストール数が増えています。
相変わらず設定画面等はなく、変更するにはプログラムする必要があります。
開発は活発でコアに取り込まれるのもそう遠くはないと思います。
https://github.com/xwp/pwa-wp/issues?q=is%3Aissue+is%3Aclosed+project%3Axwp%2Fpwa-wp%2F1
使用できるFilterやActionはプラグインページにあるので、テーマ開発者などはこれを意識しておくと後々楽に移行などができると思います。

Super Progressive Web Apps

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

インストール数:10000+

追記:2019/6/20 インストール数:20000+

開発者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);
   }
}

追記:2019/6/20
特に新しい機能が追加されているわけではないですが、インストール数はだいぶ伸びています。
他と比べると機能的には劣っているように感じますが、ソースコードの質が高めなので選択肢としてはありだと思います。

WordPress PWA

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

インストール数:40+

開発者5人

特徴

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

Frontity - Create Amazing Sites using WordPress & React JS
Frontity is a free and open source framework that helps developers build super fast WordPress themes using React JS.

開発者多め

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

まとめ

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

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

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

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

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

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

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

コメント

タイトルとURLをコピーしました