Natasha Rooney

1

Web Technologist
GSM Association
@thisNatasha

Making it Work Offline
“Working around our App Cache Pro...
2

@thisNatasha

Stuff I do

http://www.w3.org/Mobile/IG/
2

Stuff I do

@thisNatasha

習らう

http://www.w3.org/Mobile/IG/
3
2

Why do we care about Offline?

@thisNatasha
4

@thisNatasha

totemo CONFUSING desu ne?
(very confusing right!?)

New HTML5 APIs
紛らわしいからですね!

Local Storage
Key-value m...
DEMO
5

@thisNatasha

App Cache: Content vs Shell

content

shell
6

@thisNatasha

App Cache: Content vs Shell

content

shell
7

@thisNatasha

The moral of the story...
DO IT!

DON’T DO IT!

Shell

Content!

Javascript, CSS and HTML for the shell
●...
DEMO
8

NIGHTMARES!
1. AppCache wasn't loading

@thisNatasha
8

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

@thisNatasha
8

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

2. EVERYTHING BROKE!

@thisNatasha
8

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

2. EVERYTHING BROKE!
(Solved by declaring everyth...
8

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

2. EVERYTHING BROKE!
(Solved by declaring everyth...
8

@thisNatasha

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

2. EVERYTHING BROKE!
(Solved by dec...
8

@thisNatasha

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

2. EVERYTHING BROKE!
(Solved by dec...
8

@thisNatasha

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

2. EVERYTHING BROKE!
(Solved by dec...
8

@thisNatasha

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

2. EVERYTHING BROKE!
(Solved by dec...
8

@thisNatasha

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

2. EVERYTHING BROKE!
(Solved by dec...
9

@thisNatasha

Use Case mismatch lead to...

App Cache is a Douchebag Gotchas
1. Files always come from the App Cache, e...
10

Another solution?

@thisNatasha
11

@thisNatasha

ServiceWorker!
➔ New API
➔ Power to the dev!
➔ Apps, not pages - multi caches
Register

Source: https://...
12

ServiceWorker:
ctrl.js

Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

@thisNatasha
13

ServiceWorker: Caching!

Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

@thisNatasha
14

ServiceWorker: Caching
cont...

Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

@thisNa...
15

ServiceWorker: Fallbacks

Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

@thisNatasha
16

Offline? Yeah!

@thisNatasha
17

@thisNatasha

ServiceWorker: RULES
1. Documents and Service workers are BFFs
2. ServiceWorkers should be written to av...
18

@thisNatasha

The bits I REALLY like...
Some cool stuff about ServiceWorkers

➔
➔
➔
➔
➔

Fallbacks for fallbacks for f...
19

@thisNatasha

What we learnt...
Did we learn anything?!

- Offline solutions are confusing but can work
- LocalStorage...
20

@thisNatasha

Really awesome links...
Did we learn anything?!

Working with IndexedDB (Raymond Camden)
http://net.tuts...
21

@thisNatasha

Thanks!
Really Awesome People...
Raymond Camden | Adobe
@cfjedimaster
Eric Bidelman | Google
@ebidel
Jon...
Upcoming SlideShare
Loading in …5
×

Making it Work Offline: Current & Future Offline APIs for Web Apps

1,625 views

Published on

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

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,625
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Making it Work Offline: Current & Future Offline APIs for Web Apps

  1. 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. 2 @thisNatasha Stuff I do http://www.w3.org/Mobile/IG/
  3. 3. 2 Stuff I do @thisNatasha 習らう http://www.w3.org/Mobile/IG/
  4. 4. 3 2 Why do we care about Offline? @thisNatasha
  5. 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. 6. DEMO
  7. 7. 5 @thisNatasha App Cache: Content vs Shell content shell
  8. 8. 6 @thisNatasha App Cache: Content vs Shell content shell
  9. 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. 10. DEMO
  11. 11. 8 NIGHTMARES! 1. AppCache wasn't loading @thisNatasha
  12. 12. 8 NIGHTMARES! 1. AppCache wasn't loading (Solved by editing http.conf) @thisNatasha
  13. 13. 8 NIGHTMARES! 1. AppCache wasn't loading (Solved by editing http.conf) 2. EVERYTHING BROKE! @thisNatasha
  14. 14. 8 NIGHTMARES! 1. AppCache wasn't loading (Solved by editing http.conf) 2. EVERYTHING BROKE! (Solved by declaring everything) @thisNatasha
  15. 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. 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. 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. 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. 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. 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. 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. 22. 10 Another solution? @thisNatasha
  23. 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. 24. 12 ServiceWorker: ctrl.js Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md @thisNatasha
  25. 25. 13 ServiceWorker: Caching! Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md @thisNatasha
  26. 26. 14 ServiceWorker: Caching cont... Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md @thisNatasha
  27. 27. 15 ServiceWorker: Fallbacks Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md @thisNatasha
  28. 28. 16 Offline? Yeah! @thisNatasha
  29. 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. 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. 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. 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. 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

×