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
HTML5 Application Caching
Search
Ryan McGeary
February 05, 2012
Technology
4
970
HTML5 Application Caching
Ryan McGeary
February 05, 2012
Tweet
Share
More Decks by Ryan McGeary
See All by Ryan McGeary
Cloud Services You Should Be Using To Build Your Startup
rmm5t
1
620
Asynchronous Collaboration
rmm5t
5
1.2k
How We Use MongoDB at BusyConf (Take Two!)
rmm5t
2
140
Just In Time Inventory with Spree
rmm5t
3
1.7k
How We Use MongoDB at BusyConf
rmm5t
2
670
CoffeeScript
rmm5t
5
640
One Man Lightning Talks
rmm5t
2
360
Do Your Commit Messages Suck?
rmm5t
5
1.8k
Other Decks in Technology
See All in Technology
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
130
データベース02: データベースの概念
trycycle
0
140
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
170
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
160
VS CodeでAWSを操作しよう
smt7174
7
1.6k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
990
Databricks:『生成AI World Cup』のご案内
databricksjapan
2
170
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.6k
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
180
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
820
NgRx Signal Store
rainerhahnekamp
0
140
私が trocco を推す理由
__allllllllez__
1
200
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
How to train your dragon (web standard)
notwaldorf
72
5.2k
Designing Experiences People Love
moore
136
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
12
4.6k
Code Review Best Practice
trishagee
54
15k
Into the Great Unknown - MozCon
thekraken
10
990
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Become a Pro
speakerdeck
PRO
10
4.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
Statistics for Hackers
jakevdp
789
220k
Transcript
HTML5 Application Caching There are only two hard things in
Computer Science: cache invalidation and naming things. -- Phil Karlton Ryan McGeary http://ryan.mcgeary.org @rmm5t
diveintohtml5.info
Browser Support
Cache Manifest <!DOCTYPE HTML> <html manifest="/mobile.manifest"> <body> ... </body> </html>
text/cache-manifest
CACHE Sections CACHE MANIFEST http://www.google-analytics.com/ga.js /favicon.ico /javascripts/application.js /stylesheets/screen.css /data.json
NETWORK Sections CACHE MANIFEST NETWORK: * CACHE: http://www.google-analytics.com/ga.js /favicon.ico /javascripts/application.js
/stylesheets/screen.css /data.json
FALLBACK Sections CACHE MANIFEST FALLBACK: / /offline.html NETWORK: * CACHE:
http://www.google-analytics.com/ga.js /favicon.ico
Expiring The Cache CACHE MANIFEST # Updated: <%= something.updated_at %>
# Released: <%= application_released_at %> NETWORK: * CACHE: # ...
window.applicationCache swapCache() checking downloading progress cached error updateready already cached?
NO YES updated manifest? noupdate NO YES
window.applicationCache.status 0: window.applicationCache. UNCACHED 1: window.applicationCache. IDLE 2: window.applicationCache. CHECKING
3: window.applicationCache. DOWNLOADING 4: window.applicationCache. UPDATEREADY 5: window.applicationCache. OBSOLETE
Debugging Tips about:about
Debugging Tips https://gist.github.com/1714753
Debugging Tips or Use:
Gotchas! #1 The manifest is downloaded twice during a sync.
Gotchas! #2 Beware of swapCache
Gotchas! #3 Make sure your manifest file isn’t cached.
DEMO Let’s play some music.
Ryan McGeary ryan.mcgeary.org @rmm5t
[email protected]
McGeary Consulting Group