Pro Yearly is on sale from $80 to $50! »

Take care to invalidate Client Side Storage

13df2042f2767ddd2f1fdf9ff886e543?s=47 shinichi.kogai
September 30, 2019

Take care to invalidate Client Side Storage

13df2042f2767ddd2f1fdf9ff886e543?s=128

shinichi.kogai

September 30, 2019
Tweet

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