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. ご清聴ありがとうございました