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

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

Natasha RooneyWeb TechnologistGSM Association@thisNatasha

1 boring slide about me.Aw, do we have to?Yup! It’s relevant (sorta)

1

1 boring slide about me.Aw, do we have to?Yup! It’s relevant (sorta)

1

http://www.w3.org/Mobile/IG/

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

Why do we care?

2

totemo CONFUSING desu ne?

紛らわしいからですね！

3

totemo CONFUSING desu ne?

紛らわしいからですね！

3

Web StorageKey-value mapping

IndexedDBKey-value mapping +

indexes

File AccessReading file content

New HTML5 APIs

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

New HTML5 APIs

NOT.

4

NOT.

4

Manifest File

Content vs. Shell...

5

5

shell

content

6

6

content shell

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

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

Another solution?

8

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

ServiceWorker: ctrl.js

10

Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

ServiceWorker: Caching!

11

Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

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!

11

Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

ServiceWorker: Caching

12

Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

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

Offline? Yeah!

13

ServiceWorker: Fallbacks

14

Source: https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

ServiceWorker: RULES

15

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

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

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

17

Thanks!

18

Especially...

Alex Russell | Google@slighltylate

Jake Archibald | Google@jaffathecake

Jonas Sicking | Mozilla @SickingJ

Jeremy Chone | Britesnow@JeremyChone