We go through the current APIs for creating offline capable web apps such as LocalStorage, App Cache and a bit of IndexedDB. We also take a look at the work going behind the new solution "ServiceWorker" and how it may change the game. Demo to support the presentation is here: https://github.com/nrooney/offlineanime

1. Natasha Rooney
1
Web Technologist
GSM Association
@thisNatasha
Making it Work Offline
“Working around our App Cache Problems” and
“ServiceWorker Tricks for Cache”

2. 2
@thisNatasha
Stuff I do
http://www.w3.org/Mobile/IG/

3. 2
Stuff I do
@thisNatasha
習らう
http://www.w3.org/Mobile/IG/

4. 3
2
Why do we care about Offline?
@thisNatasha

5. 4
@thisNatasha
totemo CONFUSING desu ne?
(very confusing right!?)
New HTML5 APIs
紛らわしいからですね！
Local Storage
Key-value mapping
App Cache
Control* over caching resources
IndexedDB
Key-value mapping + indexes
File Access
Reading file content

6. DEMO

7. 5
@thisNatasha
App Cache: Content vs Shell
content
shell

8. 6
@thisNatasha
App Cache: Content vs Shell
content
shell

9. 7
@thisNatasha
The moral of the story...
DO IT!
DON’T DO IT!
Shell
Content!
Javascript, CSS and HTML for the shell
●
●
●
Fonts
Sprites
Splash screen images
(Guidance from FT Labs)
Disclaimer: Still a lot of opinions in this area!

10. DEMO

11. 8
NIGHTMARES!
1. AppCache wasn't loading
@thisNatasha

12. 8
NIGHTMARES!
1. AppCache wasn't loading
(Solved by editing http.conf)
@thisNatasha

13. 8
NIGHTMARES!
1. AppCache wasn't loading
(Solved by editing http.conf)
2. EVERYTHING BROKE!
@thisNatasha

14. 8
NIGHTMARES!
1. AppCache wasn't loading
(Solved by editing http.conf)
2. EVERYTHING BROKE!
(Solved by declaring everything)
@thisNatasha

15. 8
NIGHTMARES!
1. AppCache wasn't loading
(Solved by editing http.conf)
2. EVERYTHING BROKE!
(Solved by declaring everything)
3. XHR requests stopped working
@thisNatasha

16. 8
@thisNatasha
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)

17. 8
@thisNatasha
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

18. 8
@thisNatasha
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)

19. 8
@thisNatasha
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

20. 8
@thisNatasha
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.)

21. 9
@thisNatasha
Use Case mismatch lead to...
App Cache is a Douchebag Gotchas
1. Files always come from the App Cache, even if you are online
2. The App only updates if the manifest file changes
3. The App Cache is an additional cache, not an alternative one
4. Never future-cache the manifest
5. Non cached resources (e.g. images) will not load in a cached
page
6. No more conditional downloads, including responsive images
7. No idea how the fallback page works
8. Redirects to other domains are treated like failures
Source: http://alistapart.com/article/application-cache-is-a-douchebag

22. 10
Another solution?
@thisNatasha

23. 11
@thisNatasha
ServiceWorker!
➔ New API
➔ Power to the dev!
➔ Apps, not pages - multi caches
Register
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

24. 12
ServiceWorker:
ctrl.js
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha

25. 13
ServiceWorker: Caching!
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha

26. 14
ServiceWorker: Caching
cont...
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha

27. 15
ServiceWorker: Fallbacks
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha

28. 16
Offline? Yeah!
@thisNatasha

29. 17
@thisNatasha
ServiceWorker: RULES
1. Documents and Service workers are BFFs
2. ServiceWorkers should be written to avoid holding global
state
3. New tab means same ServiceWorker
4. Version your ServiceWorkers!
5. ServiceWorkers cannot be served on CDNs
6. CORS
7. importScripts() that run before oninstall finishes will go in
browser cache
8. Use Cache-Control: no-cache or Cache-Control: private
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

30. 18
@thisNatasha
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?

31. 19
@thisNatasha
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 Worker
Offline as a side effect
Promises
Bit of rule following
multi cache, multi fallback

32. 20
@thisNatasha
Really awesome links...
Did we learn anything?!
Working with IndexedDB (Raymond Camden)
http://net.tutsplus.com/tutorials/javascript-ajax/working-with-indexeddb/
Base64 Image Converter
http://webcodertools.com/imagetobase64converter/
A Beginner's Guide to Using the Application Cache
(Eric Bidelman)
http://www.html5rocks.com/en/tutorials/appcache/beginner/
Chrome AppCache Internals
chrome://appcache-internals

33. 21
@thisNatasha
Thanks!
Really Awesome People...
Raymond Camden | Adobe
@cfjedimaster
Eric Bidelman | Google
@ebidel
Jonas Sicking | Mozilla
@SickingJ
Alex Russell | Google
@slighltylate
Jake Archibald | Google
@jaffathecake