Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Take care to invalidate Client Side Storage
Search
shinichi.kogai
September 30, 2019
Technology
1
230
Take care to invalidate Client Side Storage
shinichi.kogai
September 30, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.2k
Github Copilot エージェントモードで試してみた
ochtum
0
100
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
390
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
540
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
11k
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.2k
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
spatial_ai_network
0
110
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
150
5min GuardDuty Extended Threat Detection EKS
takakuni
0
140
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
160
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building Adaptive Systems
keathley
43
2.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
KATA
mclloyd
29
14k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Building an army of robots
kneath
306
45k
Being A Developer After 40
akosma
90
590k
Transcript
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 に関しても意識を向けておく必要がある
ご清聴ありがとうございました