making it work offline: current & future offline apis for web apps

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