<景品表示法に基づく表記>当ブログでは商品・サービスのリンク先にプロモーションを含みます

WordPressのPWA化が簡単にできるプラグイン「PWA for WordPress」がやばい #wctokyo

今日はこの記事で書いたように、WordPressのお祭り、WordCamp Tokyo 2018に来ておりまして。

WordCampに参加したら人生がちょっと変わった人の話をしようと思う
自分の安心領域から半歩でもいいので踏み出してみませんか?
someyamasatoshi.jp

で、いくつかセッションを聞いたんですが、一番衝撃的だった「Challenge PWA!! Web の舞台はホーム画面へ進撃する !」の話をシェアしようと思います。とは言え、僕は技術者じゃないので、すげぇ、やべぇという語彙力弱めのレポートになります。

セッションのスライドはこちら

Challenge PWA!! WordCamp Tokyo 2018 - Download as a PDF or view online for free
www.slideshare.net

というわけで、PWA運用にあたって必要だと思った内容のメモ(ほぼスライドだだ被り)をシェアします。

そもそもPWAとは

PWA=Progressive Web Apps
段階的な実装、累進的な進歩が可能なWeb アプリ

Webサイトがアプリになる

• スマートフォンのホーム画面にアイコンを設置できる
• インストール時にWebコンテンツやリソースのキャッシュし、表示の高速化を見込める
• キャッシュされたJavaScript がオフラインでアプリを制御可能
• 以下今のところAndroidだけの機能
 バックグラウンドでの動作(Background Sync)
 Push通知

PWAのいいところ

PWAはWebとアプリのいいとこ取りが可能

・動作が早い
 オフラインのキャッシュを表示

・導入が早い
 既存コンテンツにちょっと足すだけ
 一から専用コンテンツを作らなくていい

・アプリの良いところが使える
 ホーム画面にアイコン設置
 Push通知
 バックグラウンドで処理

・Webのいいところが使える
 検索結果に表示される
 更新が容易
 一つのコードで多くのプラットフォームに対応(iPhone、Android共有)

・導入コストが安い
 すでにWebサイトが有ればそのままアプリ化可能

・通信量が抑えられる
 サーバー負荷の軽減(運用者側のメリット)
 キャッシュなので通信量も抑えられる(閲覧者側のメリット)
 アプリ自体もコンパクト(数百kbの重さ)

PWA導入のデメリット

基本的に、正しく導入すればWebサイトの機能を毀損することはない。

ただ、PWAの注意点が一つある。

アドレスバーを消すことができるが、iPhoneは「戻る」ボタンがないので、どん詰まりページが有るとどうすることもできなくなる。ナビゲーションを忘れずに。

PWAに対応するプラットフォームの増加

2018年3月末のバージョンアップでSafariが対応(ServiceWorkerの実装)。日本はiOSシェアが高いのでこの対応は大きい
2018年9月にさらに対応プラットフォームの増加。Windowsはパッケージ化したPWAをストアで配布できるようになった。

Mobileに絞れば99%がServiceWorker(PWAのプラットフォーム)が動く。

「Progressive(段階的)」なアプローチ

・いきなり全部作らなくてもいい
・段階的に機能を追加できる
・アプリ化は必須ではない
 Android/WindowsはChromeでの運用も可能
・レスポンシブであればWebそのままでもPWA化可能

インストール発生条件

・https化は必須
・5分以上間隔を空けて、2回目以降のアクセス(初見では出てこない)
・Manifest、ServiceWorkerのファイルが有ること

PWA化にあたり最低限設定するところ

さらにキャッシュの運用計画こそがPWAの肝で、キャッシュ制御がうまくいかなければPWA化の意味がない。ただ、素人では設定が難しい(説明も僕だと難しいので、スライドの37ページ以降をお読みください)。

そこで、WordPress用のプラグイン「PWA for WordPress」を作った。

PWA for WordPressのここがイケてる

細かいことはよくわからないけど、とにかくすごい。

PWA for WordPressを使ってみよう

プラグインの新規追加画面で「PWA4WP」と検索バーに打ち込めば表示されます。このプラグインをインストールし、有効化します。

左側のメニューに「PWA for WordPress」が表示されますので、ここから設定をおこないます。基本的にManifestとServiceWorkerを設定すればOKです。

こちらもスライドの52ページから設定方法が掲載されていますので、実際に試してみましょう。

開発者にフィードバックしよう

これから僕もいじって見るので、細かい設定方法や躓いたポイントは追ってシェアしますね。
 

不明点やバグについては開発者の進藤さんにフィードバックして、より良いプラグインにしていきましょう。現場からは以上です。