Offline Sync for Progressive Web Apps

(1)

Offline Sync for

Progressive Web Apps

Bradley Holt

Program Manager, Developer Advocacy

Center for Open-Source Data and AI Technologies

(2)

(3)

iPhone 4 - Bottom View with Bumper by William Hook, on Flickr <https://flic.kr/p/8e7p2s> (CC BY-SA 2.0).

Web or

mobile

app?

(4)

http://gph.is/2dhW35c

(5)

Progressive Web Apps

Provides both the discoverability of a web app and the reliable, fast, and engaging user

experience of a native mobile app

(6)

https://www.pwastats.com/

(7)

https://developers.google.com/web/showcase/2017/twitter

(8)

(9)

Not just offline…

Accès wi-fi à Gorakshep (5140m) by Jerome Bon, on Flickr <https://flic.kr/p/bDzjj5> (CC BY 2.0).

(10)

Reliable, fast, and engaging user

experience—

regardless of network connectivity

Static Wallpaper by James Spinks, on Flickr <https://flic.kr/p/2b1JP> (CC BY-SA 2.0).

(11)

Zero-latency access to

content & data

speed 3 by Monkieyes, on Flickr <https://flic.kr/p/PXPwK> (CC BY 2.0).

(12)

Offline, Online & ¯\_(

^ツ

)_/¯

(13)

The next

billion people

on the internet

the galaxy by tommy@chau, on Flickr <https://flic.kr/p/sbEHMt> (CC BY 2.0).

(14)

Geolocation API

Network Information API

IndexedDB

WebRTC API

Push API

Notifications API

Device Orientation API Screen Orientation API

Permissions API

Proximity API

Pointer Lock API

Vibration API

Payment Request API

Battery Status API

Ambient Light Sensor API

Service Worker API

IBM Design Icons by International Business Machines Corporation <https://www.ibm.com/design/language/resources/icon-library/> (CC BY 4.0).

(15)

Service Workers

Service Workers allow for fine- grained control over caching of

content and assets, enabling cache-first web apps

Service Workers fetch diagram by Mozilla Contributors <https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers> (CC-BY-SA 2.5).

(16)

https://caniuse.com/#feat=serviceworkers

(17)

Registering a service worker example by Mozilla Contributors <https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers> (CC-BY-SA 2.5).

(18)

Install and activate a service worker example by Mozilla Contributors <https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers> (CC-BY-SA 2.5).

(19)

Custom service worker response example by Mozilla Contributors <https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers> (CC-BY-SA 2.5).

(20)

IndexedDB

IndexedDB enables app data to be

stored locally within a browser

(21)

https://caniuse.com/#search=indexdb

(22)

localForage

localForage wraps IndexedDB,

WebSQL, or localStorage, providing a

consistent API

regardless of which storage mechanism is supported by the end user’s browser

(23)

https://github.com/localForage/localForage

(24)

Sync is Hard

Technological devices designed by D3Images / Freepik <http://www.freepik.com/>.

(25)

(26)

Apache CouchDB PouchDB

IBM Cloudant

(27)

“CouchDB’s superpower is sync.

Sometimes I even try to explain it to people by saying, ‘CouchDB isn’t a database; it’s a sync engine.’ It’s a way of efficiently transferring data from one place to another, while

intelligently managing conflicts and revisions. It’s very similar to Git.

When I make that analogy, the light bulb often goes off.”

Nolan Lawson

PouchDB & CouchDB: An interview with Nolan Lawson

https://blog.couchdb.org/2017/04/04/pouchdb-couchdb-an-interview-with-nolan-lawson/

(28)