春先から PWA ( Progressive Web Apps ) の集中勉強会を主催してきて、自分でも PWA を試しつつ、そしてその可能性を感じつつ、やりたいことを少しずつ形にしてきて、ついに8月末、WordPress プラグイン「 PWA for WordPress 」をリリースしました。
今回はなぜこのプラグインの作成に至ったのか、という話を、PWA のキャッシュの重要性に絡めながらお話ししたいと思います。かなり手前みそな話になってしまいそうな気がしてますが、少しでも PWA for WordPress のコンセプトが知ってもらえたらうれしく思います。
なぜ PWA for WordPress 開発したか
さて、まずはそもそも、PAW プラグインはもういくつかあるのになんで作ったのか？というところから入りたいと思います。
それは、今あるいずれのプラグインもキャッシュの扱いが WordPress サイトをそのまま PWA にする、という前提に立つと、これに最適化されているとは言えなかったからです。
PWA の集中勉強会を開催していく中で、自分自身で運営するいくつかの WordPress に対して PWA を実装すべく、プラグインを試してきたのですが、もうひと息「かゆいところに手が届かない」状態となってしまっていました。
キャッシュが更新されないことによる、サーバーサイドでの埋め込み型のコンテンツの凍結、Ajax で取得するリアルタイムであるはずのデータの凍結・・・
（※凍結：ずっと同じデータが表示されてしまって、更新がかからない状態）
そしてこのプラグインを制作することにしました。
途中、WordBench 東京で PWA を紹介するセッションでは、こんな宣言もしました。
WordPress サイトを SPA 化して、コンテンツと AppShell を分離した上で実装する、という観点からであれば、もしかしたら満足のいく PWA 化ができそうなプラグインはいくつか見られました。
しかしながら、多くは PWA のパワーを多様な WordPress のサイトに効果的に適用するには少し敷居が高いものであったり、大幅なサイトの改装を必要とするものでした。
そしてこのプラグイン、PWA for WordPress は、WordPress の多様なサイトがそのまま PWA になるために必要なこと、を意識したキャッシュの扱い方を考えて制作、ついに8月末にリリースに至りました。
兎にも角にも Cache なのです
PWA におけるキャッシュとは、そもそもどんなものなのでしょう？
いつも Web サイトを見ているとブラウザが勝手にキャッシュしてくれて、いいように動いてくれてるのでは？と思われるかもしれません。
PWA のキャッシュ機能の最大の利点はキャッシュするコンテンツを自分でコントロールできる点にあります。
コントロールできる、という利点は、逆に言うと正しくコントロールしないと思わぬ挙動をしてしまう、ということにもなりかねないので注意が必要です。
僕もいつも PWA のキャッシュについてお話しするときに、こんなスライドを出してます。
Cache API
- 有効期限的なものはありません。
- だからほっといても消えません。
- 同期、更新、削除は自分でやります。
つまり、コントロールしないとキャッシュはずっと残るんです。
新着一覧がずっと凍結状態、とかちょっと恐ろしいですよね。
でも、多くの PWA プラグインでは、キャッシュの破棄を ServiceWorker の更新時にしか行わないので、定期的に ServiceWorker 自体を更新しない限り、これが起きてしまいます。
記事を追加するたびに ServiceWorker 更新しますか？ってそんなことしませんよね。
ここがまさに、「かゆいところに手が届く」プラグインを作ろうじゃないか、と思い立った、PWA for WordPress でどうしても解決したかったところです。
そして PWA for WordPress リリース
そんなこんなで自分の欲しい機能を搭載してリリースした PWA for WordPress ですが、こんな感じの売り文句で紹介させていただいています。
PWA4WP のここが利点！
- キャッシュの有効期限が設定できる
- ブログなどの新着記事一覧の埋め込み部分の反映
- 記事の内容などの更新
- 急がないけどずっと更新されないのはダメ、というコンテンツはわりと多い
- キャッシュの除外が柔軟に指定できる
- Ajax などで取得するような API などの出力データの取り出し元
- リアルタイムで状況を表示するようなコンテンツ
- 画像だけキャッシュする、というような設定も可能
PWA 実装、特に WordPress への実装に非常に重要になってくる、このキャッシュ制御を「有効期限」、「除外」の二つのパラメーターの設定により柔軟かつ自由に設定できるのがこのプラグインの特徴です。
PWA for WordPress の設定画面では、ServiceWorker のキャッシュ設定のフォームに設定していきます。
設定項目としてはちょっとしたことに見えるかもしれませんが、これが既存の WordPress サイトを PWA にする上でいかに大切なことかは前述のとおりです。
PWA プラグイン比較
ここからさらに手前みそな話ですが、キャッシュの制御を実装しているプラグインは今のところ PWA for WordPress だけなのです。
ちょっとだけ、他のプラグインを調査した結果の一部を出しちゃいます。
| 日本語 | キャッシュ除外 | キャッシュ期限 | キャッシュモード | Push | PWAの有効化/ 無効化スイッチ |
アクティブ数 | |
|---|---|---|---|---|---|---|---|
| PWA4WP | ◎ | ○ | ○ | ○（2種） | × | ○ | 10 |
| Plugin A | × | × | × | × | × | × | 10000 |
| Plugin B | × | × | × | ○ （4種、ファイル種別ごと に設定可能） |
○（Firebase） | ○ （On Element Click 実装可） |
600 |
| Plugin C | × | × | × | × | × | × | 100 |
| Plugin D | × | 調査できず | 調査できず | × | 調査できず | × | 1000 |
| Plugin E | × | × | × | × | × | × | 30 |
| Plugin F | × | × | × | × | ×? | ×? | 50 |
| Plugin G | × | × | × | × | × | × | 100 |
そんなわけで、WordPress の既存コンテンツをそのまま PWA にするのなら PWA for WordPress で決まり！
というなんだか比較宣伝のような終わり方でございました。
細かな技術解説については、WordCamp Tokyo 2018 の3日後、9月19日に開催された日本Androidの会 9月定例会での講演資料、そして講演動画がありますので、よかったらご覧ください。
こちらでは WordCamp Tokyo のセッションで話し尽くせなかった、 PWA for WordPress のキャッシュコントロールを少し技術的に深掘りして解説しています。
PWA for WordPress (PWA4WP) のダウンロードはこちらから。
https://ja.wordpress.org/plugins/pwa4wp/
または、WordPress 管理画面の「プラグイン」より、「新規追加」ボタンを押して「PWA4WP」で検索してください。
より自由で便利なプラグインへ、PWA for WordPress の開発を続けていきます！