Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Offline Sync for Progressive Web Apps Bradley Holt Program Manager, Developer Advocacy Center for Open-Source Data and AI Technologies June 13, 2018 / © 2018 IBM Corporation
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
iPhone 4 - Bottom View with Bumper by William Hook, on Flickr (CC BY-SA 2.0). Web or mobile app?
Slide 4
Slide 4 text
http://gph.is/2dhW35c
Slide 5
Slide 5 text
Progressive Web Apps Provides both the discoverability of a web app and the reliable, fast, and engaging user experience of a native mobile app June 13, 2018 / © 2018 IBM Corporation
Slide 6
Slide 6 text
https://www.pwastats.com/
Slide 7
Slide 7 text
https://developers.google.com/web/showcase/2017/twitter
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Not just offline… Accès wi-fi à Gorakshep (5140m) by Jerome Bon, on Flickr (CC BY 2.0).
Slide 10
Slide 10 text
Reliable, fast, and engaging user experience— regardless of network connectivity Static Wallpaper by James Spinks, on Flickr (CC BY-SA 2.0).
Slide 11
Slide 11 text
Zero-latency access to content & data speed 3 by Monkieyes, on Flickr (CC BY 2.0).
Slide 12
Slide 12 text
Offline, Online & ¯\_(ツ)_/¯ June 13, 2018 / © 2018 IBM Corporation
Slide 13
Slide 13 text
The next billion people on the internet the galaxy by tommy@chau, on Flickr (CC BY 2.0).
Slide 14
Slide 14 text
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 (CC BY 4.0). June 13, 2018 / © 2018 IBM Corporation
Slide 15
Slide 15 text
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 (CC-BY-SA 2.5). June 13, 2018 / © 2018 IBM Corporation
Slide 16
Slide 16 text
https://caniuse.com/#feat=serviceworkers
Slide 17
Slide 17 text
Registering a service worker example by Mozilla Contributors (CC-BY-SA 2.5).
Slide 18
Slide 18 text
Install and activate a service worker example by Mozilla Contributors (CC-BY-SA 2.5).
Slide 19
Slide 19 text
Custom service worker response example by Mozilla Contributors (CC-BY-SA 2.5).
Slide 20
Slide 20 text
IndexedDB IndexedDB enables app data to be stored locally within a browser IBM Design Icons by International Business Machines Corporation (CC BY 4.0). June 13, 2018 / © 2018 IBM Corporation
Slide 21
Slide 21 text
https://caniuse.com/#search=indexdb
Slide 22
Slide 22 text
localForage localForage wraps IndexedDB, WebSQL, or localStorage, providing a consistent API regardless of which storage mechanism is supported by the end user’s browser IBM Design Icons by International Business Machines Corporation (CC BY 4.0). June 13, 2018 / © 2018 IBM Corporation
Slide 23
Slide 23 text
https://github.com/localForage/localForage
Slide 24
Slide 24 text
Sync is Hard Technological devices designed by D3Images / Freepik . June 13, 2018 / © 2018 IBM Corporation
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Apache CouchDB PouchDB IBM Cloudant June 13, 2018 / © 2018 IBM Corporation
Slide 27
Slide 27 text
“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 June 13, 2018 / © 2018 IBM Corporation https://blog.couchdb.org/2017/04/04/pouchdb-couchdb-an-interview-with-nolan-lawson/
Slide 28
Slide 28 text
Offline Sync for Progressive Web Apps PouchDB Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain). June 13, 2018 / © 2018 IBM Corporation Apache CouchDB
Slide 29
Slide 29 text
https://pouchdb.com/
Slide 30
Slide 30 text
Pokedex.org An offline-capable Progressive Web App built with Service Worker and PouchDB https://www.pokedex.org/ June 13, 2018 / © 2018 IBM Corporation
Slide 31
Slide 31 text
Multi-User Apps with Hoodie http://hood.ie/ June 13, 2018 / © 2018 IBM Corporation
Slide 32
Slide 32 text
June 13, 2018 / © 2018 IBM Corporation
Slide 33
Slide 33 text
Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain). PouchDB June 13, 2018 / © 2018 IBM Corporation Apache CouchDB
Slide 34
Slide 34 text
Cloudant Envoy June 13, 2018 / © 2018 IBM Corporation
Slide 35
Slide 35 text
June 13, 2018 / © 2018 IBM Corporation
Slide 36
Slide 36 text
Shopping List A series of Offline First demo apps— each built using a different stack https://ibm-watson-data-lab.github.io/shopping-list-demo June 13, 2018 / © 2018 IBM Corporation
Slide 37
Slide 37 text
https://github.com/ibm-watson-data-lab/shopping-list June 13, 2018 / © 2018 IBM Corporation
Slide 38
Slide 38 text
https://developer.ibm.com/code/patterns/create-an-offline-first-shopping-list-progressive-web-app/ June 13, 2018 / © 2018 IBM Corporation
Slide 39
Slide 39 text
Join the Offline First community
Slide 40
Slide 40 text
Offline Camp We are building an Offline First community, one campfire at a time. Offline Camp has visited the Catskills of New York, the Central Coast of California, Berlin, and Oregon. June 13, 2018 / © 2018 IBM Corporation
Slide 41
Slide 41 text
offlinefirst.org/chat June 13, 2018 / © 2018 IBM Corporation
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
https://medium.com/offline-camp
Slide 44
Slide 44 text
Thank you codait.org twitter.com/BradleyHolt medium.com/@BradleyHolt github.com/bradley-holt developer.ibm.com/code June 13, 2018 / © 2018 IBM Corporation
Slide 45
Slide 45 text
June 13, 2018 / © 2018 IBM Corporation