ブログを書くまでが WordCamp

Engineering/PWA/WordPress///

昨日、9月15日に WordCamp Tokyo 2018 に登壇させていただきました。

テーマはもちろん PWA (Progressive Web Apps)。

WordCamp、熱気がすごかった。
これまで何度も PWA についての講演をしてきましたが、今回が一番のリアクションをいただきました。

用意したスライドは68ページの大作になってしまい、時間内にプラグイン「PWA for WordPress」のデモまでたどりつけるか、ドキドキしながらの講演となりましたが、なんとか予定していた内容をすべてお話ししてデモにたどりつけました。

そして終盤、最後のデモでキャッシュによる高速化をお見せしようとしたところ、なんかうまくいかない・・・

キャッシュ有効化前のロード時間をお見せして・・・

PWA を有効化

そして一度リロードして ServiceWorker が生きてることを確認。

再度リロードしてキャッシュの威力、どやぁ！！

・・・キャッシュされてない（泣）

というこんな一幕もありました。

最後に司会の方に指摘いただいたのが、Dev Tool でキャッシュを無効にする設定が ON になってるよ！

ヽ(ﾟДﾟ;)ﾉ!!

なんてこったい

サーバーからのロードと比較するためにキャッシュ無効化しておいたのを忘れてました。

時間オーバーしてたけど One more chance !

なんとかうまくいきました。

キャッシュによるロード時間０、ご披露できました！

Web サイトのいろんな高速化手法があります。
サーバーサイドで工夫したり、CDN とか、AMP とか、あとサーバーそのものを豪華でパワフルな構成にしたり、ネットワーク速くしたり、、、

でも、ロード時間を０にできるのは PWA だけ！
（※注：初回ロードは普通に時間かかります。速いのは2回目以降のキャッシュからのロードです）

最後のギリギリのところでデモ成功できてよかったです。

あと、講演の中であまり深くお見せする時間がなかったのですが、キャッシュの除外設定のところ。

スライドの中には２つほどサンプルをいれておいたのですが、正規表現での除外設定、これがこのプラグインのウリのひとつです。
ぜひ活用していただきたいところです。

今後の機能追加やブラッシュアップのためにも、多くの人に使っていただき、多くのフィードバックをお寄せいただけたらうれしいです。

今のところ考えていること。

  • ちゃんとOKしてもらえるタイミングでの Push サジェスチョンを実装した上での Push 通知機能
  • ページの部品（ウィジェットとか）を部分的に切り離してキャッシュから外す機能（これは別プラグインになるかも）
  • キャッシュの除外パターンをテンプレート化するとかして、技術が苦手な人でも設定しやすくする

こんな感じのこと考えています。

PWA for WordPress ぜひ使ってみてください！

講演に使用した資料は SlideShare にアップしてあります。
よかったらご活用ください。

そして忘れちゃいけない告知。
PWA ＆ PWA for WordPress についてもっと知りたいという方は、ぜひこちらのイベントもご覧ください。

最後に、このステキな場を設けてくださった WordCamp Tokyo 2018 運営のみなさまならびに関係者のみなさま、ご来場いただいたみなさま、ほんとうにありがとうございました。
エキサイティングでとても楽しいイベントでした。