Take care to invalidate Client Side Storage

Transcript

1. Take care to invalidate Client Side Storage
2. 自己紹介 • フロントエンドエンジニア（元デザイナー） • Feedforce Inc. 所属 • ECサイト運営支援SaaS • 言語処理系・型システムに興味あり GitHub: kogai Twitter: iamchawan Hatena: kogainotdan
3. 今日話すこと • 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 良さそう、でもちょっと待って
4. 事例1 • Feedforceで運営している、とあるブログ(WordPress) • 「PWAモード」を提供するWPプラグインでオフラインモード・低遅 延なコンテンツ配信を導入 • WordPressサーバが生成したHTMLをServiceWorkerで CacheStorageに保存 • オフライン時はCacheStorageからコンテンツを取得 • サーバ側でコンテンツに更新があれば、新しいServiceWorkerファ イルが生成されて、unregister/registerした上でキャッシュを更新 オフラインでも読めるブログ
5. 事例1 • ServiceWorkerとCacheStorageを使っていることを認識していな いことで、「ブログを更新してもしばらく最新のコンテンツが反映さ れない」という問題が生じていた（ServiceWorkerのライフサイク ルを把握していなかった） • 「PWAモード」を停止すると、ServiceWorkerファイルの再生成が 行われなくなるので、unregister/registerもされなくなる • 「PWAモード」停止前のコンテンツが残り続けることになり、ブロ グ読者から見てコンテンツが更新されないようになる 問題点
6. 事例2 • React-Reduxを使ったSPA • redux-persistというライブラリでLocalStorageにStoreを永続化 • 次回起動時に状態を引き継ぐ • 入力途中で離れたユーザに、CSが接触した時に直前の状態から再開 出来る Storeをローカルに保存するアプリケーション
7. 事例2 • StoreのShapeを変えると意図しな い動作をし得る • 型上は安全 • クライアント側アプリケーションの バージョニングの仕組みなどで、破 壊的変更をケアする必要がある 問題点
8. まとめ • Client Side StorageによるUXの向上は魅力的 • 但しClient Side Storageは本質的にサイト・アプリケー ションの運営者側に操作権のないストレージ • Create/Readに関する記事は豊富だが、Update/Delete に関しても意識を向けておく必要がある
9. ご清聴ありがとうございました