Velocity EU 2014 — Offline-first web apps

Offline-first web apps
Matt Andrews, Financial Times
@andrewsmatt, mattandre.ws

• HTML5
• Offline-first
• Sideways-swipe-enabled
• Add-to-home-screen-able
• iOS
• Web App

• HTML5
• Offline-first
• iOS
• Android
• Web App

• HTML5
• Offline-first
• iOS
• Android
• Windows
• Web App

• HTML5
• Offline-first
• iOS
• Android
• Windows
• Firefox
• Web App

• HTML5
• Offline-first
• iOS
• Android
• Windows
• Firefox
• ALL THE THINGS
• Web App

What’s so important
about offline?

Internet Connections
• Not just on or off
• On can sometimes mean off
• Slow can be worse than off

AppCache
CACHE MANIFEST
/my-font.ttf
/my-styles.css
!
!
<DOCTYPE html>
<html manifest="mywebapp.manifest">

AppCache
CACHE MANIFEST
/my-font.ttf
/my-styles.css
!
NETWORK:
*
<DOCTYPE html>
<html manifest="mywebapp.manifest">

AppCache Hacks
• Varying the response of every page based on whether a cookie is set
(hack needs to be added to our CDN as well as back end)
• Returning an HTTP error on the manifest request when that cookie is
not set;
• Created an iframe to load a page that loads the manifest rather
than referencing it directly.
• Without the NETWORK: * hack in your AppCache manifest you will
break all non-offline'd resources.
• Putting all our API methods on a path starting with /api so that our
FALLBACK doesn’t interfere with ajax requests.
• Returning different Cache-Control headers on Internet Explorer 10+.

Service Workers
+ Fetch + Caches

Fetch API
XMLHttpRequest revamped

fetch('http://a.b/c.html')
.then(function(response) {
return response.text(); // can be .json, .blob
})
.then(function(text) {
alert(text);
})
.catch(function() {
});
with Fetch API

Using Fetch
Native within Service Workers only
Browser-only polyfill:-
github.com/github/fetch
‘Isomorphic’ Fetch Polyfill that works in
Node and in the browser via
Browserify:-
bit.ly/iso-fetch

Cache API
Caching that speaks JavaScript

caches.open(‘my-app’)
.then(function(cache) {
return cache
.addAll([
‘/my-styles.css’,
‘/my-font.ttf’
]);
});
Pre-Cache URLs

caches.match(new Request(‘/my-styles.css’))
.then(function(response) {
// got back /my-styles.css
});
‘Fetch’ URLs from Cache

return cache.put(‘/my-fake-endpoint’,
new Response(‘Hello!’));
});
Put ‘fake’ responses into the Cache

Put ‘fake’ responses into the Cache
WARNING: the difference between ‘add’ & ’put’ is
different to the difference between IndexedDB’s
‘add’ & ‘put’
add put
IndexedDB INSERT INSERT OR UPDATE
Service Worker
Caches
INSERT OR UPDATE INSERT OR UPDATE

return cache.keys();
})
.then(function(keys) {
return cache.addAll(keys);
});
Update content in the Cache
WARNING: This will ‘break’ any ‘fake requests’ that have
been ‘put’ted
WARNING: The Service Worker Cache is in addition to
the regular HTTP Cache.

<DOCTYPE html>
<html>
<head><title>mattandre.ws</title></head>
<body>
<h1>My offline website</h1>
<script>
navigator.serviceWorker.register(‘./sw.js’)
</script>
</body>
</html>

sw.js:-
this.oninstall = function(event) {
// prepare website to work offline,
// e.g. cache resources
};
this.onfetch = function(event) {
// listen to, manipulate and/or respond
// requests from your app
};

sw.js:-
this.oninstall = function(event) {
var promise = caches.open(‘my-app’)
return cache
.addAll([
‘/my-styles.css’,
‘/my-font.ttf’
]);
});
!
event.waitUntil(promise);
};

<DOCTYPE html>
<html>
<head><title>mattandre.ws</title></head>
<body>
<h1>My offline website</h1>
<script>
navigator.serviceWorker.register(‘./sw.js’)
.then(function() {
// installed
})
.catch(function() {
// didn’t install :(
});
</script>
</body>
</html>

sw.js:-
this.onfetch = function(event) {
var promise;
promise = caches.match(event.request)
.catch(function() {
return fetch(event.request);
});
event.respondWith(promise);
};

chrome://flags#enable-experimental-web-platform-features

No Caches
The Service Worker Cache API does
not work yet but a Polyfill exists that
uses IndexedDB underneath:-
bit.ly/caches-polyfill

Storage Limits
• Every origin (protocol+domain+port) gets an
allowance of offline storage, typically 50mb
• Allowance shared between IndexedDB &
Service Workers
• Each origin only has access to data in its
caches & databases.

Some JavaScript APIs are not
available in Service Worker:-
• LocalStorage
• Synchronous ajax

You can use Service Workers to
make offline-first websites…
…or just to make normal
websites faster.

Advanced Offline
• Simple Caches not always enough
• Use IndexedDB for more structured
data, e.g. user preferences, bookmarks
• Don’t use WebSQL it’s deprecated, use
the polyfill. bit.ly/idbpolyfill

• Origins can have multiple IndexedDB
databases
• Each database can have multiple ‘object
stores’ (like SQL tables)
• An object store must have at least one
index – IDB is NoSQL – can only be queried
by pre-defined indexes
• No free text search

Highly recommend
Dexie.org, a Promise-based
IndexedDB library

function databaseOpen() {!
! var db = new Dexie('todos');!
! db.version(1).stores({ todo: '_id' });!
! return db.open();!
}
with Dexie.org

Summary
• Service Worker is coming so get ready:-
https, Promises, Caches Polyfill …
• Use the Fetch API in your applications today
bit.ly/iso-fetch / github.com/github/fetch
• Want to use IDB? Use dexie.org. Want to support
WebSQL? Use the polyfill bit.ly/idbpolyfill.
• I’ve written tutorials on how to use all the HTML5 offline
tech available for free here:-
bit.ly/offline-workshop

Thanks!
• Open Source:-
github.com/ftlabs
FastClick, Polyfill.io, DOM Delegate, Ellipsis, & more
• Jobs:-
labs.ft.com/jobs
• Me:-
@andrewsmatt / mattandre.ws

Velocity EU 2014 — Offline-first web apps

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Velocity EU 2014 — Offline-first web apps

Semelhante a Velocity EU 2014 — Offline-first web apps (20)

Último

Último (20)

Velocity EU 2014 — Offline-first web apps