Offline web apps

ffline web apps ffline web apps

Slobodan Stojanovic Slobodan Stojanovic I am I am github.com/stojanovic github.com/stojanovic
twitter.com/slobodan_ twitter.com/slobodan_ slobodan.me slobodan.me

CTO of CTO of Cloud Horizon Cloud Horizon I am
I am

meetup meetup organizer organizer JS Belgrade JS Belgrade I am
I am

Why? Why? Why would anyone want an oﬄine web app?

"Web" and "online" are two closely as sociated terms, downright
synonymous to many people. So why on earth would we talk about "offline" web technolo gies, and what does the term even mea n? http://www.html5rocks.com/en/tutorials/oﬄine/whats-oﬄine/

How do we see How do we see future? future?

... Everyone's happy, nothing is broken o r smudged. There
is infinite wi-fi wi th infinite bandwidth, no batteries r un out, no traffic no delays. ... http://blog.tobiasrevell.com/2013/12/critical-design-design- ﬁction-lecture.html

Are we always connected to Are we always connected to
the internet? the internet?

What are the problems with What are the problems with
online only apps? online only apps?

Issues in transport Issues in transport Airlines, high-speed trains, subway...
Airlines, high-speed trains, subway... (Hyperloop?) (Hyperloop?)

"Geography" issues "Geography" issues There's much better examples than Africa
:) There's much better examples than Africa :)

Bad connection Bad connection Far from modem or any other
reason Far from modem or any other reason

Other issues? Other issues?

Why do we treat web apps Why do we treat
web apps differently than native? differently than native?

Native apps examples Native apps examples (Google Maps, Instagram...) (Google
Maps, Instagram...)

How? How? How to build an oﬄine web application?

What are the problems we What are the problems we
need to solve? need to solve?

How to sync the app with How to sync the
app with the server? the server?

How to solve conflicts? How to solve conflicts?

UX? UX?

Technology Technology

Offline events Offline events

navigator.onLine navigator.onLine is a property that maintains a true/false value
(true for online, false for oﬄine). This property is updated whenever the user switches into "Oﬄine Mode"

"online" and "offline" events These two events are ﬁred on
the <body> of each page when the browser switches between online and oﬄine mode. Additionally, the events bubble up from document.body, to document, ending at window.

Demo Demo http://html5demos.com/oﬄine

More info More info https://developer.mozilla.org/en/docs /Online_and_oﬄine_events

App cache App cache

Benefits Benefits Oﬄine browsing: users can navigate a site even
when they are oﬄine. Speed: cached resources are local, and therefore load faster. Reduced server load: the browser only downloads resources that have changed from the server.

<html manifest="example.appcache"> ... </html> index.html example.appcache CACHE MANIFEST # v1
2015/12/26 <- This is just a comment index.html cache.html style.css image1.png # Use from network if available NETWORK: /api # Fallback content FALLBACK: /foo/bar fallback.html

window.applicationCache const appCache = window.applicationCache; switch (appCache.status) { case appCache.UNCACHED:
// UNCACHED == 0 return 'UNCACHED'; break; case appCache.IDLE: // IDLE == 1 return 'IDLE'; break; case appCache.CHECKING: // CHECKING == 2 return 'CHECKING'; break; case appCache.DOWNLOADING: // DOWNLOADING == 3 return 'DOWNLOADING'; break; case appCache.UPDATEREADY: // UPDATEREADY == 4 return 'UPDATEREADY'; break; case appCache.OBSOLETE: // OBSOLETE == 5 return 'OBSOLETE'; break; default: return 'UKNOWN CACHE STATUS'; break; };

events: // Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false); // Checking for an update. Always the first event fired in the sequence. appCache.addEventListener('checking', handleCacheEvent, false); // An update was found. The browser is fetching resources. appCache.addEventListener('downloading', handleCacheEvent, false); // The manifest returns 404 or 410, the download failed, // or the manifest changed while the download was in progress. appCache.addEventListener('error', handleCacheError, false); // Fired after the first download of the manifest. appCache.addEventListener('noupdate', handleCacheEvent, false); // Fired if the manifest file returns a 404 or 410. // This results in the application cache being deleted. appCache.addEventListener('obsolete', handleCacheEvent, false); // Fired for each resource listed in the manifest as it is being fetched. appCache.addEventListener('progress', handleCacheEvent, false); // Fired when the manifest resources have been newly redownloaded. appCache.addEventListener('updateready', handleCacheEvent, false);

Demo Demo http://appcache.oﬄine.technology/demo/

"Application Cache is a Douchebag" http://alistapart.com/article/application-cache-is-a-douchebag Files always come from
the applicationcache, even if you’re online; The application cache only updates if the content of the manifest itself has changed; Never ever ever far-future cache the manifest; Non-cached resources will not load on a cached page; ...

Deprecated This feature has been removed from the Web standards.
They recommend using Service Workers instead.

More info More info http://www.html5rocks.com/en/tutori als/appcache/beginner/ https://developer.mozilla.org/en- US/docs/Web/HTML/Using_the_applic ation_cache

Service Workers Service Workers

Service workers essentially act as prox y servers that sit
between web applicat ions, and the browser and network (when available.)

How it works How it works

var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = [ '/', '/styles/main.css',
'/script/main.js' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); }); Cache resources

self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit
- return response if (response) { return response; } return fetch(event.request); } ) ); }); Cache requests

this.addEventListener('install', function(event) { event.waitUntil( caches.open('v2').then(function(cache) { return cache.addAll([ '/sw-test/', '/sw-test/index.html',
'/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', // … // include other new resources for the new version... ]); }); ); }); Updating service worker

this.addEventListener('activate', function(event) { var cacheWhitelist = ['v2']; event.waitUntil( caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) { if (cacheWhitelist.indexOf(key) === -1) { return caches.delete(key); } })); }) ); }); Deleting old cache

Demo Demo https://oﬄine-news-service- worker.herokuapp.com/

More info More info https://developer.mozilla.org/en- US/docs/Web/API/Service_Worker_API http://www.html5rocks.com/en/tutorials /service-worker/introduction/

Storage Storage

localStorage localStorage

The localStorage property allows you to access a local Storage
object. localStorage is similar to sessionStorage. The only diﬀerence is that, while data stored inlocalStorage has no expiration time, data stored in sessionStorage gets cleared when the browsing session ends - that is, when the browser is closed.

Demo Demo http://html5demos.com/storage

More info More info https://developer.mozilla.org/en/docs/W eb/API/Window/localStorage http://diveintohtml5.info/storage.html

WebSQL WebSQL

Demo Demo http://ido-green.appspot.com/WebSQL- IndexedDB-example/main.html

Deprecated Since November 18, 2010, the W3C announced that Web
SQL database is a deprecated speciﬁcation.

More info More info http://html5doctor.com/introducing- web-sql-databases/

IndexedDb IndexedDb

IndexedDB is a low-level API for client-side storage of signiﬁcant
amounts of structured data, including ﬁles/blobs.

It uses indexes to enable high performance searches. It lets
you store and retrieve objects that are indexed with a key. Any objects supported by the can be stored. structured clone algorithm

Structured clone algorithm Structured clone algorithm The structured clone algorithm
is a new algorithm for serializing complex JavaScript objects. The algorithm, in essence, walks over all the fields of the original object, duplicating the values of each field into a new object. defined by the HTML5 specification

Structured clones can duplicate*: objects objects objects objects objects ...
It cannot duplicate: objects objects DOM ... RegExp Blob File ImageData FileList Error Function

Concepts Concepts IndexedDB databases store key-value pairs IndexedDB is built
on a transactional database model The IndexedDB API is mostly asynchronous IndexedDB uses a lot of requests IndexedDB uses DOM events to notify you when results are available IndexedDB is object-oriented IndexedDB does not use SQL IndexedDB adheres to a same-origin policy

IndexedDB API IndexedDB API

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; //
DON'T use "var indexedDB = ..." if you're not in a function. window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"}; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; // (Mozilla has never prefixed these objects, so we don't need window.mozIDB*) if (!window.indexedDB) window.alert(`Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.`);

var db; var request = indexedDB.open("MyTestDatabase"); request.onerror = function(event) {
console.error('Database error', event.target.errorCode); }; request.onsuccess = function(event) { db = event.target.result; }; // This event is only implemented in recent browsers request.onupgradeneeded = function(event) { var db = event.target.result; // ... };

Demo Demo http://www.girliemac.com/stickies/ And a simple web workers example

More info More info https://developer.mozilla.org/en- US/docs/Web/API/IndexedDB_API http://www.html5rocks.com/en/tutorials/w ebdatabase/websql-indexeddb/

More info and More info and resources resources

Limits Limits http://www.html5rocks.com/en/tutorials/oﬄine /quota-research/ A research report on browser storage.

localForage localForage http://mozilla.github.io/localForage/#localforage Oﬄine storage, improved. Wraps IndexedDB, WebSQL, or
localStorage using a simple but powerful API.

PouchDB PouchDB http://pouchdb.com Open-source JavaScript database inspired by that is
designed to run well within the browser. Apache CouchDB

Dexie.js Dexie.js http://dexie.org/ A Minimalistic Wrapper for IndexedDB.

What? What? What should work oﬄine on web?

Offline web apps

Offline web apps

More Decks by Slobodan Stojanović

Other Decks in Programming

Featured

Transcript