Updates on Offline: “My AppCache won’t come back” and “ServiceWorker Tricks for Cache”

2,234 views

Published on

My slides from my talk "Updates on Offline: “My AppCache won’t come back” and “ServiceWorker Tricks for Cache”" from Over the Air 2013 held in September in Bletchley Park. We had a good run-through of offline APIs in web, the mysteries of App Cache, and updates on the current status of ServiceWorker.

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

No Downloads
Views
Total views
2,234
On SlideShare
0
From Embeds
0
Number of Embeds
332
Actions
Shares
0
Downloads
14
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Updates on Offline: “My AppCache won’t come back” and “ServiceWorker Tricks for Cache”

  1. 1. Updates on Offline “My AppCache won’t come back” and “ServiceWorker Tricks for Cache” Natasha Rooney Web Technologist GSM Association @thisNatasha
  2. 2. 1 boring slide about me. Aw, do we have to? Yup! It’s relevant (sorta) 1
  3. 3. 1 boring slide about me. Aw, do we have to? Yup! It’s relevant (sorta) 1 http://www.w3.org/Mobile/IG/
  4. 4. 1 boring slide about me. Aw, do we have to? Yup! It’s relevant (sorta) 1 http://www.w3.org/Mobile/IG/ Offline Web Apps
  5. 5. Why do we care? 2
  6. 6. totemo CONFUSING desu ne? 紛らわしいからですね! 3
  7. 7. totemo CONFUSING desu ne? 紛らわしいからですね! 3 Web Storage Key-value mapping IndexedDB Key-value mapping + indexes File Access Reading file content New HTML5 APIs
  8. 8. 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, or... New HTML5 APIs
  9. 9. NOT. 4
  10. 10. NOT. 4 Manifest File Content vs. Shell ...
  11. 11. 5
  12. 12. 5 shell content
  13. 13. 6
  14. 14. 6 content shell
  15. 15. NOT. 7 App Cache is a Douchebag Gotchas 1. Files always come from the App Cache, even if you are offline 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 Source: http://alistapart.com/article/application-cache-is-a-douchebag
  16. 16. NOT. 7 App Cache is a Douchebag Gotchas 1. Non cached resources will not load in a cached page 2. No more conditional downloads, including responsive images 3. No idea how the fallback page works 4. Redirects to other domains are treated like failures Source: http://alistapart.com/article/application-cache-is-a-douchebag
  17. 17. Another solution? 8
  18. 18. ServiceWorker! 9 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
  19. 19. ServiceWorker: ctrl.js 10 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
  20. 20. ServiceWorker: Caching! 11 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
  21. 21. BREAK: Promises ① History ➔ Multilisp ➔ Java Futures BREAK
  22. 22. BREAK: Promises ① Current Complexity BREAK Source: http://www.html5rocks.com/en/tutorials/async/deferred/
  23. 23. BREAK: Promises ① New Promises BREAK Source: http://www.html5rocks.com/en/tutorials/async/deferred/
  24. 24. ServiceWorker: Caching! 11 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
  25. 25. ServiceWorker: Caching 12 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
  26. 26. ServiceWorker: Caching Also use ➔ e.respondWith(this.caches.match("shell-v1", e.request.url)); 12 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
  27. 27. Offline? Yeah! 13
  28. 28. ServiceWorker: Fallbacks 14 Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
  29. 29. ServiceWorker: RULES 15 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
  30. 30. 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? 16
  31. 31. 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 17
  32. 32. Thanks! 18 Especially... Alex Russell | Google @slighltylate Jake Archibald | Google @jaffathecake Jonas Sicking | Mozilla @SickingJ Jeremy Chone | Britesnow @JeremyChone

×