Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Take care to invalidate Client Side Storage
shinichi.kogai
September 30, 2019
Technology
1
170
Take care to invalidate Client Side Storage
shinichi.kogai
September 30, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
暗号資産ウォレット入門(MetaMaskの入門~NFTの購入~詐欺の注意事項など)
kayato
2
210
SRE の歩き方・進め方 / sre-walk-through-procedure
rrreeeyyy
0
340
srenext2022-skaru
mixi_engineers
PRO
1
740
E2E自動テスト導入・運用をめぐる先入観と実際に起きたこと / Preconceptions and What Happened with E2E Testing
ak1210
5
1.2k
モダンデータスタックとかの話(データエンジニアのお仕事とは)
foursue
0
430
Oracle Content Management サービス概要 (2022年5月版)
oracle4engineer
PRO
0
120
一人から始めるプロダクトSRE / How to start SRE in a product team, all by yourself
vtryo
4
2.7k
キャッチアップ Android 13 / Catch up Android 13
yanzm
2
1.2k
[SRE NEXT 2022]ヤプリのSREにおけるセキュリティ強化の取り組みを公開する
mmochi23
1
600
プロダクトグロースと技術のベースアップを両立させるRettyのアプリ開発スタイル / Achieve Product Growth and Tech Update
imaizume
1
290
數據的多重宇宙 @ LINE Taiwan
line_developers_tw
PRO
0
690
次期LTSに備えよ!AOS 6.1 HCI Core 編
smzksts
0
180
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Documentation Writing (for coders)
carmenhchung
48
2.5k
GraphQLとの向き合い方2022年版
quramy
16
8.1k
What's in a price? How to price your products and services
michaelherold
229
9.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Product Roadmaps are Hard
iamctodd
34
6.1k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
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 に関しても意識を向けておく必要がある
ご清聴ありがとうございました