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

1. Updates on Offline
“My AppCache won’t come back” and
“ServiceWorker Tricks for Cache”
Natasha Rooney
Web Technologist
GSM Association
@thisNatasha
1

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. 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. totemo CONFUSING desu ne?
紛らわしいからですね！
3 @thisNatasha

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. 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. 4
https://marketplace.firefox.com/developers/docs/apps_offline
App Cache: COOL! How do I do it!?
@thisNatasha

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. 5
shell
content
@thisNatasha

10. 6
content
shell
@thisNatasha

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. 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. Another solution?
9 @thisNatasha

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. ServiceWorker:
ctrl.js
11
Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
@thisNatasha

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

17. BREAK: Promises
① History
➔ Multilisp
➔ Java Futures
BREAK

18. BREAK: Promises
① Current Complexity
BREAK
Source: http://www.html5rocks.com/en/tutorials/async/deferred/

19. BREAK: Promises
① New Promises
BREAK
Source: http://www.html5rocks.com/en/tutorials/async/deferred/

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

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

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. Offline? Yeah!
14 @thisNatasha

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

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. 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. 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. Thanks!
19
Especially...
Alex Russell | Google
@slighltylate
Jake Archibald | Google
@jaffathecake
Jonas Sicking | Mozilla
@SickingJ
Jeremy Chone | Britesnow
@JeremyChone
@thisNatasha