![Page 1: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/1.jpg)
Making it Work Offline“Working around our App Cache Problems” and “ServiceWorker Tricks for Cache”
Natasha RooneyWeb TechnologistGSM Association@thisNatasha
1
![Page 2: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/2.jpg)
Stuff I do
2
http://www.w3.org/Mobile/IG/
@thisNatasha
![Page 3: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/3.jpg)
Stuff I do
2
http://www.w3.org/Mobile/IG/
@thisNatasha
習らう
![Page 4: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/4.jpg)
Why do we care about Offline?
23 @thisNatasha
![Page 5: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/5.jpg)
totemo CONFUSING desu ne?(very confusing right!?)
紛らわしいからですね!
4 @thisNatasha
New HTML5 APIsLocal StorageKey-value mapping
App CacheControl* over caching resources
IndexedDBKey-value mapping + indexes
File AccessReading file content
![Page 6: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/6.jpg)
DEMO
![Page 7: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/7.jpg)
5
shell
content
@thisNatasha
App Cache: Content vs Shell
5 @thisNatasha
![Page 8: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/8.jpg)
App Cache: Content vs Shell
content shell
6 @thisNatasha
![Page 9: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/9.jpg)
The moral of the story...
DO IT!
ShellJavascript, CSS and HTML for the shell
● Fonts● Sprites● Splash screen images
(Guidance from FT Labs)
DON’T DO IT!
Content!
Disclaimer: Still a lot of opinions in this area!
7 @thisNatasha
![Page 10: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/10.jpg)
DEMO
![Page 11: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/11.jpg)
NIGHTMARES!
1. AppCache wasn't loading
8 @thisNatasha
![Page 12: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/12.jpg)
NIGHTMARES!
1. AppCache wasn't loading(Solved by editing http.conf)
8 @thisNatasha
![Page 13: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/13.jpg)
NIGHTMARES!
1. AppCache wasn't loading(Solved by editing http.conf)
2. EVERYTHING BROKE!
8 @thisNatasha
![Page 14: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/14.jpg)
NIGHTMARES!
1. AppCache wasn't loading(Solved by editing http.conf)
2. EVERYTHING BROKE!(Solved by declaring everything)
8 @thisNatasha
![Page 15: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/15.jpg)
NIGHTMARES!
1. AppCache wasn't loading(Solved by editing http.conf)
2. EVERYTHING BROKE!(Solved by declaring everything)
3. XHR requests stopped working
8 @thisNatasha
![Page 16: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/16.jpg)
NIGHTMARES!
1. AppCache wasn't loading(Solved by editing http.conf)
2. EVERYTHING BROKE!(Solved by declaring everything)
3. XHR requests stopped working(Solved by adding * to Network in Appcache file for some weird reason)
8 @thisNatasha
![Page 17: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/17.jpg)
NIGHTMARES!
1. AppCache wasn't loading(Solved by editing http.conf)
2. EVERYTHING BROKE!(Solved by declaring everything)
3. XHR requests stopped working(Solved by adding * to Network in Appcache file for some weird reason)
4. Nasty image placeholders when offline
8 @thisNatasha
![Page 18: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/18.jpg)
NIGHTMARES!
1. AppCache wasn't loading(Solved by editing http.conf)
2. EVERYTHING BROKE!(Solved by declaring everything)
3. XHR requests stopped working(Solved by adding * to Network in Appcache file for some weird reason)
4. Nasty image placeholders when offline(Solved by nasty image error hack)
8 @thisNatasha
![Page 19: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/19.jpg)
NIGHTMARES!
1. AppCache wasn't loading(Solved by editing http.conf)
2. EVERYTHING BROKE!(Solved by declaring everything)
3. XHR requests stopped working(Solved by adding * to Network in Appcache file for some weird reason)
4. Nasty image placeholders when offline(Solved by nasty image error hack)
5. Debugging became an difficult
8 @thisNatasha
![Page 20: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/20.jpg)
NIGHTMARES!
1. AppCache wasn't loading(Solved by editing http.conf)
2. EVERYTHING BROKE!(Solved by declaring everything)
3. XHR requests stopped working(Solved by adding * to Network in Appcache file for some weird reason)
4. Nasty image placeholders when offline(Solved by nasty image error hack)
5. Debugging became an difficult(Solved only by more beer.)
8 @thisNatasha
![Page 21: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/21.jpg)
Use Case mismatch lead to...
9
App Cache is a Douchebag Gotchas1. Files always come from the App Cache, even if you are online2. The App only updates if the manifest file changes3. The App Cache is an additional cache, not an alternative one4. Never future-cache the manifest5. Non cached resources (e.g. images) will not load in a cached
page6. No more conditional downloads, including responsive images7. No idea how the fallback page works8. Redirects to other domains are treated like failures
Source: http://alistapart.com/article/application-cache-is-a-douchebag
@thisNatasha
![Page 22: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/22.jpg)
Another solution?
10 @thisNatasha
![Page 23: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/23.jpg)
ServiceWorker!11
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
➔ New API
➔ Power to the dev!
➔ Apps, not pages - multi cachesRegister
@thisNatasha
![Page 24: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/24.jpg)
ServiceWorker: ctrl.js
12
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha
![Page 25: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/25.jpg)
ServiceWorker: Caching!
13
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha
![Page 26: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/26.jpg)
ServiceWorker: Caching
14
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
cont...
@thisNatasha
![Page 27: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/27.jpg)
ServiceWorker: Fallbacks
15
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha
![Page 28: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/28.jpg)
Offline? Yeah!
16 @thisNatasha
![Page 29: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/29.jpg)
ServiceWorker: RULES
17
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
1. Documents and Service workers are BFFs2. ServiceWorkers should be written to avoid holding global
state3. New tab means same ServiceWorker4. Version your ServiceWorkers!5. ServiceWorkers cannot be served on CDNs6. CORS7. importScripts() that run before oninstall finishes will go in
browser cache8. Use Cache-Control: no-cache or Cache-Control: private
@thisNatasha
![Page 30: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/30.jpg)
The bits I REALLY like...
Some cool stuff about ServiceWorkers
➔ Fallbacks for fallbacks for fallbacks➔ It’s 100% or nothing➔ “User chooses” or “dev chooses” both OK!➔ Work with Quota API➔ Works with Installed Apps
What about Network Information APIs?
18 @thisNatasha
![Page 31: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/31.jpg)
What we learnt...Did we learn anything?!
- Offline solutions are confusing but can work
- LocalStorage is awesome. Use it!
- App Cache works but is confusing, use your dev tools!
- Shell and Content
- Service WorkerOffline as a side effectPromisesBit of rule followingmulti cache, multi fallback
19 @thisNatasha
![Page 32: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/32.jpg)
Really awesome links...Did we learn anything?!
Working with IndexedDB (Raymond Camden)http://net.tutsplus.com/tutorials/javascript-ajax/working-with-indexeddb/
Base64 Image Converterhttp://webcodertools.com/imagetobase64converter/
A Beginner's Guide to Using the Application Cache (Eric Bidelman)http://www.html5rocks.com/en/tutorials/appcache/beginner/
Chrome AppCache Internalschrome://appcache-internals
20 @thisNatasha
![Page 33: Making it Work Offline: Current & Future Offline APIs for Web Apps](https://reader034.vdocuments.net/reader034/viewer/2022052618/554954f4b4c905f24e8b4e3c/html5/thumbnails/33.jpg)
Thanks!
21
Really Awesome People...Raymond Camden | Adobe
@cfjedimaster
Eric Bidelman | Google@ebidel
Jonas Sicking | Mozilla @SickingJ
Alex Russell | Google@slighltylate
Jake Archibald | Google@jaffathecake
@thisNatasha