$30 off During Our Annual Pro Sale. View Details »

Take care to invalidate Client Side Storage

shinichi.kogai
September 30, 2019

Take care to invalidate Client Side Storage

shinichi.kogai

September 30, 2019
Tweet

Other Decks in Technology

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