今日はこの記事で書いたように、WordPressのお祭り、WordCamp Tokyo 2018に来ておりまして。
で、いくつかセッションを聞いたんですが、一番衝撃的だった「Challenge PWA!! Web の舞台はホーム画面へ進撃する !」の話をシェアしようと思います。とは言え、僕は技術者じゃないので、すげぇ、やべぇという語彙力弱めのレポートになります。
セッションのスライドはこちら
というわけで、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ページから設定方法が掲載されていますので、実際に試してみましょう。
開発者にフィードバックしよう
これから僕もいじって見るので、細かい設定方法や躓いたポイントは追ってシェアしますね。
PWAやるよ！ @woocommerce #wctokyo pic.twitter.com/ou7r3jlwQq
— Ryu Shindo (@ryu_compin) 2018年9月15日
不明点やバグについては開発者の進藤さんにフィードバックして、より良いプラグインにしていきましょう。現場からは以上です。