• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Making it Work Offline: Current & Future Offline APIs for Web Apps
 

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

on

  • 1,170 views

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 ...

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

Statistics

Views

Total Views
1,170
Views on SlideShare
1,147
Embed Views
23

Actions

Likes
1
Downloads
17
Comments
0

2 Embeds 23

https://twitter.com 22
http://gazeta.snt.yandex.ru 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Natasha Rooney 1 Web Technologist GSM Association @thisNatasha Making it Work Offline “Working around our App Cache Problems” and “ServiceWorker Tricks for Cache”
    • 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 mapping App Cache Control* over caching resources IndexedDB Key-value mapping + indexes File Access Reading file content
    • 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 ● ● ● Fonts Sprites Splash screen images (Guidance from FT Labs) Disclaimer: Still a lot of opinions in this area!
    • 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 everything) @thisNatasha
    • 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
    • 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.)
    • 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
    • 10 Another solution? @thisNatasha
    • 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
    • 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 @thisNatasha
    • 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 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
    • 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?
    • 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
    • 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
    • 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