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
200
Take care to invalidate Client Side Storage
shinichi.kogai
September 30, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
620
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4.1k
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
440
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
250
VS CodeでAWSを操作しよう
smt7174
7
1.6k
NgRx Signal Store
rainerhahnekamp
0
140
データベース02: データベースの概念
trycycle
0
140
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
180
Janus
bkuhlmann
1
490
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.5k
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
65
19k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Visualization
eitanlees
135
14k
Clear Off the Table
cherdarchuk
83
310k
How to Ace a Technical Interview
jacobian
272
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Infographics Made Easy
chrislema
238
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.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 に関しても意識を向けておく必要がある
ご清聴ありがとうございました