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
The AI Revolution Will Not Be Monopolized: Behind the scenes
inesmontani
PRO
0
110
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
370
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
260
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.8k
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
120
本当のAWS基礎
toru_kubota
0
540
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
0
460
私が trocco を推す理由
__allllllllez__
1
270
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.7k
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
300
Grafana x PagerDuty Better Together
jacopen
1
170
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
The Cult of Friendly URLs
andyhume
74
5.7k
Navigating Team Friction
lara
178
13k
Rails Girls Zürich Keynote
gr2m
91
13k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Teambox: Starting and Learning
jrom
128
8.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
We Have a Design System, Now What?
morganepeng
43
6.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
YesSQL, Process and Tooling at Scale
rocio
164
13k
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