firefoxos meetup - updates on offline in html5 web apps
Post on 06-May-2015
705 Views
Preview:
DESCRIPTION
TRANSCRIPT
Updates on Offline“My AppCache won’t come back” and “ServiceWorker Tricks for Cache”
Natasha RooneyWeb TechnologistGSM Association@thisNatasha
1
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
@thisNatasha
totemo CONFUSING desu ne?
紛らわしいからですね!
3 @thisNatasha
totemo CONFUSING desu ne?
紛らわしいからですね!
3
Web StorageKey-value mapping
IndexedDBKey-value mapping +
indexes
File AccessReading file content
New HTML5 APIs
@thisNatasha
totemo CONFUSING desu ne?
紛らわしいからですね!
3
App CacheBRAND 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
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 I do it!?
@thisNatasha
5
shell
content
@thisNatasha
6
content shell
@thisNatasha
Use Case mismatch lead to...
7
App Cache is a Douchebag Gotchas1. Files always come from the App Cache, even if you are online2. The App only updates if the manifest file changes3. The App Cache is an additional cache, not an alternative one4. Never future-cache the manifest5. Non cached resources (e.g. images) will not load in a cached
page6. No more conditional downloads, including responsive images7. No idea how the fallback page works8. Redirects to other domains are treated like failures
Source: http://alistapart.com/article/application-cache-is-a-douchebag
@thisNatasha
The moral of the story...
DO IT!
ShellJavascript, 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
Another solution?
9 @thisNatasha
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
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...
@thisNatasha
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
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 Service workers are BFFs2. ServiceWorkers should be written to avoid holding global
state3. New tab means same ServiceWorker4. Version your ServiceWorkers!5. ServiceWorkers cannot be served on CDNs6. CORS7. importScripts() that run before oninstall finishes will go in
browser cache8. Use Cache-Control: no-cache or Cache-Control: private
@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?
17 @thisNatasha
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 WorkerOffline as a side effectPromisesBit of rule followingmulti cache, multi fallback
18 @thisNatasha
Thanks!
19
Especially...
Alex Russell | Google@slighltylate
Jake Archibald | Google@jaffathecake
Jonas Sicking | Mozilla @SickingJ
Jeremy Chone | Britesnow@JeremyChone
@thisNatasha
top related