Take care to invalidate Client Side Storage

自己紹介 ● フロントエンドエンジニア（元デザイナー） ● Feedforce Inc. 所属 ● ECサイト運営支援SaaS ● 言語処理系・型システムに興味あり GitHub: kogai Twitter: iamchawan Hatena: kogainotdan

今日話すこと ● All app URLs load while offline ● First load fast even on 3G PWAの構成要件としてのClient Side Storage https://developers.google.com/web/progressive-web-apps/checklist 良さそう、でもちょっと待って

事例1 ● Feedforceで運営している、とあるブログ(WordPress) ● 「PWAモード」を提供するWPプラグインでオフラインモード・低遅 延なコンテンツ配信を導入 ● WordPressサーバが生成したHTMLをServiceWorkerで CacheStorageに保存 ● オフライン時はCacheStorageからコンテンツを取得 ● サーバ側でコンテンツに更新があれば、新しいServiceWorkerファ イルが生成されて、unregister/registerした上でキャッシュを更新 オフラインでも読めるブログ

事例1 ● ServiceWorkerとCacheStorageを使っていることを認識していな いことで、「ブログを更新してもしばらく最新のコンテンツが反映さ れない」という問題が生じていた（ServiceWorkerのライフサイク ルを把握していなかった） ● 「PWAモード」を停止すると、ServiceWorkerファイルの再生成が 行われなくなるので、unregister/registerもされなくなる ● 「PWAモード」停止前のコンテンツが残り続けることになり、ブロ グ読者から見てコンテンツが更新されないようになる 問題点

事例2 ● React-Reduxを使ったSPA ● redux-persistというライブラリでLocalStorageにStoreを永続化 ● 次回起動時に状態を引き継ぐ ● 入力途中で離れたユーザに、CSが接触した時に直前の状態から再開 出来る Storeをローカルに保存するアプリケーション

事例2 ● StoreのShapeを変えると意図しな い動作をし得る ● 型上は安全 ● クライアント側アプリケーションの バージョニングの仕組みなどで、破 壊的変更をケアする必要がある 問題点

まとめ ● Client Side StorageによるUXの向上は魅力的 ● 但しClient Side Storageは本質的にサイト・アプリケー ションの運営者側に操作権のないストレージ ● Create/Readに関する記事は豊富だが、Update/Delete に関しても意識を向けておく必要がある

ご清聴ありがとうございました