Updates on Offline
“My AppCache won’t come back” and
“ServiceWorker Tricks for Cache”
Natasha Rooney
Web Technologist
GSM ...
1 boring slide about me.
Aw, do we have to?
Yup! It’s relevant (sorta)
2
http://www.w3.org/Mobile/IG/
@thisNatasha
1 boring slide about me.
Aw, do we have to?
Yup! It’s relevant (sorta)
2
http://www.w3.org/Mobile/IG/
Offline
Web Apps
@th...
totemo CONFUSING desu ne?
紛らわしいからですね!
3 @thisNatasha
totemo CONFUSING desu ne?
紛らわしいからですね!
3
Web Storage
Key-value mapping
IndexedDB
Key-value mapping +
indexes
File Access
Re...
totemo CONFUSING desu ne?
紛らわしいからですね!
3
App Cache
BRAND NEW cache
mechanism of wonder
which will answer all your
questions...
4
https://marketplace.firefox.com/developers/docs/apps_offline
App Cache: COOL! How do I do it!?
@thisNatasha
4
Manifest File
But understanding App Cache comes with an
interesting story…
Content vs. Shell
...
App Cache: COOL! How do...
5
shell
content
@thisNatasha
6
content
shell
@thisNatasha
Use Case mismatch lead to...
7
App Cache is a Douchebag Gotchas
1. Files always come from the App Cache, even if you are o...
The moral of the story...
DO IT!
Shell
Javascript, CSS and HTML for the shell
● Fonts
● Sprites
● Splash screen images
(Gu...
Another solution?
9 @thisNatasha
ServiceWorker!
10
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
➔ New API
➔ Power to the d...
ServiceWorker:
ctrl.js
11
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha
ServiceWorker: Caching!
12
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha
BREAK: Promises
① History
➔ Multilisp
➔ Java Futures
BREAK
BREAK: Promises
① Current Complexity
BREAK
Source: http://www.html5rocks.com/en/tutorials/async/deferred/
BREAK: Promises
① New Promises
BREAK
Source: http://www.html5rocks.com/en/tutorials/async/deferred/
ServiceWorker: Caching!
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
cont...
@thisNatas...
cont...
ServiceWorker: Caching
Also use
➔ e.respondWith(this.caches.match("shell-v1", e.request.url));
13
Source: https://...
Offline? Yeah!
14 @thisNatasha
ServiceWorker: Fallbacks
15
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha
ServiceWorker: RULES
16
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
1. Documents and Ser...
The bits I REALLY like...
Some cool stuff about ServiceWorkers
➔ Fallbacks for fallbacks for fallbacks
➔ It’s 100% or noth...
What we learnt...
Did we learn anything?!
- The W3C cares about mobile!
- Offline solutions are confusing
- App Cache was ...
Thanks!
19
Especially...
Alex Russell | Google
@slighltylate
Jake Archibald | Google
@jaffathecake
Jonas Sicking | Mozilla...
Upcoming SlideShare
Loading in...5
×

FirefoxOS Meetup - Updates on Offline in HTML5 Web Apps

742

Published on

New updated version of my Offline presentation detailing the new awesomeness of ServiceWorker!

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
742
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

FirefoxOS Meetup - Updates on Offline in HTML5 Web Apps

  1. 1. Updates on Offline “My AppCache won’t come back” and “ServiceWorker Tricks for Cache” Natasha Rooney Web Technologist GSM Association @thisNatasha 1
  2. 2. 1 boring slide about me. Aw, do we have to? Yup! It’s relevant (sorta) 2 http://www.w3.org/Mobile/IG/ @thisNatasha
  3. 3. 1 boring slide about me. Aw, do we have to? Yup! It’s relevant (sorta) 2 http://www.w3.org/Mobile/IG/ Offline Web Apps @thisNatasha
  4. 4. totemo CONFUSING desu ne? 紛らわしいからですね! 3 @thisNatasha
  5. 5. totemo CONFUSING desu ne? 紛らわしいからですね! 3 Web Storage Key-value mapping IndexedDB Key-value mapping + indexes File Access Reading file content New HTML5 APIs @thisNatasha
  6. 6. totemo CONFUSING desu ne? 紛らわしいからですね! 3 App Cache BRAND NEW cache mechanism of wonder which will answer all your questions of life’s worries and fulfill your every day with the realisation of your dreams of riches, love, intelligence, regular full nights of sleep and a real life Jurassic Park... New HTML5 APIs @thisNatasha
  7. 7. 4 https://marketplace.firefox.com/developers/docs/apps_offline App Cache: COOL! How do I do it!? @thisNatasha
  8. 8. 4 Manifest File But understanding App Cache comes with an interesting story… Content vs. Shell ... App Cache: COOL! How do I do it!? @thisNatasha
  9. 9. 5 shell content @thisNatasha
  10. 10. 6 content shell @thisNatasha
  11. 11. Use Case mismatch lead to... 7 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 @thisNatasha
  12. 12. The moral of the story... DO IT! Shell Javascript, 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! 8 @thisNatasha
  13. 13. Another solution? 9 @thisNatasha
  14. 14. ServiceWorker! 10 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md ➔ New API ➔ Power to the dev! ➔ Apps, not pages - multi caches Some quick interesting bits: ➔ Documents and Service Workers are BFFs ➔ Default Fallback: Normal resource loading ➔ Wildcards are OK ➔ 2 Service Workers are OK (default is last one) ➔ Inception is NOT OK Register @thisNatasha
  15. 15. ServiceWorker: ctrl.js 11 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md @thisNatasha
  16. 16. ServiceWorker: Caching! 12 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md @thisNatasha
  17. 17. BREAK: Promises ① History ➔ Multilisp ➔ Java Futures BREAK
  18. 18. BREAK: Promises ① Current Complexity BREAK Source: http://www.html5rocks.com/en/tutorials/async/deferred/
  19. 19. BREAK: Promises ① New Promises BREAK Source: http://www.html5rocks.com/en/tutorials/async/deferred/
  20. 20. ServiceWorker: Caching! 12 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md @thisNatasha
  21. 21. ServiceWorker: Caching 13 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md cont... @thisNatasha
  22. 22. cont... ServiceWorker: Caching Also use ➔ e.respondWith(this.caches.match("shell-v1", e.request.url)); 13 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md @thisNatasha
  23. 23. Offline? Yeah! 14 @thisNatasha
  24. 24. ServiceWorker: Fallbacks 15 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md @thisNatasha
  25. 25. ServiceWorker: RULES 16 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md 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 @thisNatasha
  26. 26. 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? 17 @thisNatasha
  27. 27. What we learnt... Did we learn anything?! - The W3C cares about mobile! - Offline solutions are confusing - App Cache was not fit for purpose - Shell and Content - Service Worker Offline as a side effect Promises Bit of rule following multi cache, multi fallback 18 @thisNatasha
  28. 28. Thanks! 19 Especially... Alex Russell | Google @slighltylate Jake Archibald | Google @jaffathecake Jonas Sicking | Mozilla @SickingJ Jeremy Chone | Britesnow @JeremyChone @thisNatasha
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×