making it work offline: current & future offline apis for web apps
DESCRIPTION
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/offlineanimeTRANSCRIPT
Making it Work Offline“Working around our App Cache Problems” and “ServiceWorker Tricks for Cache”
Natasha RooneyWeb TechnologistGSM Association@thisNatasha
1
Stuff I do
2
http://www.w3.org/Mobile/IG/
@thisNatasha
Stuff I do
2
http://www.w3.org/Mobile/IG/
@thisNatasha
習らう
Why do we care about Offline?
23 @thisNatasha
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
DEMO
5
shell
content
@thisNatasha
App Cache: Content vs Shell
5 @thisNatasha
App Cache: Content vs Shell
content shell
6 @thisNatasha
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
DEMO
NIGHTMARES!
1. AppCache wasn't loading
8 @thisNatasha
NIGHTMARES!
1. AppCache wasn't loading(Solved by editing http.conf)
8 @thisNatasha
NIGHTMARES!
1. AppCache wasn't loading(Solved by editing http.conf)
2. EVERYTHING BROKE!
8 @thisNatasha
NIGHTMARES!
1. AppCache wasn't loading(Solved by editing http.conf)
2. EVERYTHING BROKE!(Solved by declaring everything)
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
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)
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
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)
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
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.)
8 @thisNatasha
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
Another solution?
10 @thisNatasha
ServiceWorker!11
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
➔ New API
➔ Power to the dev!
➔ Apps, not pages - multi cachesRegister
@thisNatasha
ServiceWorker: ctrl.js
12
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha
ServiceWorker: Caching!
13
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha
ServiceWorker: Caching
14
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
cont...
@thisNatasha
ServiceWorker: Fallbacks
15
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha
Offline? Yeah!
16 @thisNatasha
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
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
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
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
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