Slide 1

Slide 1 text

Think 2018 / March 19, 2018 / © 2018 IBM Corporation Meet the Experts: Offline Sync for Progressive Web Apps — Bradley Holt Developer Advocate Senior Software Engineer

Slide 2

Slide 2 text

Web or mobile app? IBM Cloud / March 6, 2018 / © 2018 IBM Corporation iPhone 4 - Bottom View with Bumper by William Hook, on Flickr (CC BY-SA 2.0).

Slide 3

Slide 3 text

http://gph.is/2dhW35c

Slide 4

Slide 4 text

Progressive Web Apps IBM Cloud / March 6, 2018 / © 2018 IBM Corporation Provides both the discoverability of a web app and the reliable, fast, and engaging user experience of a native mobile app

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Not just offline… IBM Cloud / March 6, 2018 / © 2018 IBM Corporation Accès wi-fi à Gorakshep (5140m) by Jerome Bon, on Flickr (CC BY 2.0).

Slide 7

Slide 7 text

Reliable, fast, and engaging user experience— regardless of network connectivity IBM Cloud / March 6, 2018 / © 2018 IBM Corporation Static Wallpaper by James Spinks, on Flickr (CC BY-SA 2.0).

Slide 8

Slide 8 text

Zero-latency access to content & data IBM Cloud / March 6, 2018 / © 2018 IBM Corporation speed 3 by Monkieyes, on Flickr (CC BY 2.0).

Slide 9

Slide 9 text

IBM Cloud / March 6, 2018 / © 2018 IBM Corporation Offline, Online & ¯\_(ツ)_/¯ underground by weckgeschnappt_, on Flickr (CC BY 2.0).

Slide 10

Slide 10 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).

Slide 11

Slide 11 text

Service Workers IBM Cloud / March 6, 2018 / © 2018 IBM Corporation 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).

Slide 12

Slide 12 text

IndexedDB IBM Cloud / March 6, 2018 / © 2018 IBM Corporation IndexedDB enables app data to be stored locally within a browser IBM Design Icons by International Business Machines Corporation (CC BY 4.0).

Slide 13

Slide 13 text

localForage IBM Cloud / March 6, 2018 / © 2018 IBM Corporation localForage is a polyfill that 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).

Slide 14

Slide 14 text

Sync is Hard Technological devices designed by D3Images / Freepik . IBM Cloud / March 6, 2018 / © 2018 IBM Corporation

Slide 15

Slide 15 text

Apache CouchDB PouchDB IBM Cloudant

Slide 16

Slide 16 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). IBM Cloudant

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Shopping List IBM Cloud / March 6, 2018 / © 2018 IBM Corporation A series of demo Progressive Web Apps, hybrid mobile apps, native mobile apps, and a desktop app— each built using a different stack https://ibm-watson-data-lab.github.io/shopping-list-demo

Slide 19

Slide 19 text

https://github.com/ibm-watson-data-lab/shopping-list

Slide 20

Slide 20 text

https://developer.ibm.com/code/patterns/create-an-offline-first-shopping-list-with-polymer-and-pouchdb/

Slide 21

Slide 21 text

Think 2018 / March 19, 2018 / © 2018 IBM Corporation Appendix A: Multi-User Apps

Slide 22

Slide 22 text

IBM Cloud / March 6, 2018 / © 2018 IBM Corporation Multi-User Apps with Hoodie http://hood.ie/

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain). IBM Cloudant PouchDB

Slide 25

Slide 25 text

Cloudant Envoy

Slide 26

Slide 26 text

Think 2018 / March 19, 2018 / © 2018 IBM Corporation Appendix B: Code Examples

Slide 27

Slide 27 text

Registering a service worker example by Mozilla Contributors (CC-BY-SA 2.5).

Slide 28

Slide 28 text

Install and activate a service worker example by Mozilla Contributors (CC-BY-SA 2.5).

Slide 29

Slide 29 text

Custom service worker response example by Mozilla Contributors (CC-BY-SA 2.5).

Slide 30

Slide 30 text

https://github.com/localForage/localForage

Slide 31

Slide 31 text

https://pouchdb.com/

Slide 32

Slide 32 text

Think 2018 / March 19, 2018 / © 2018 IBM Corporation Appendix C: Browser Support

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Think 2018 / March 19, 2018 / © 2018 IBM Corporation Appendix D: Offline First Community

Slide 36

Slide 36 text

Join the Offline First community IBM Cloud / March 6, 2018 / © 2018 IBM Corporation

Slide 37

Slide 37 text

Offline Camp IBM Cloud / March 6, 2018 / © 2018 IBM Corporation 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.

Slide 38

Slide 38 text

IBM Cloud / March 6, 2018 / © 2018 IBM Corporation offlinefirst.org/chat

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

https://medium.com/offline-camp

Slide 41

Slide 41 text

Notices and disclaimers Think 2018 / March 19, 2018 / © 2018 IBM Corporation © 2018 International Business Machines Corporation. No part of this document may be reproduced or transmitted in any form without written permission from IBM. U.S. Government Users Restricted Rights — use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM. Information in these presentations (including information relating to products that have not yet been announced by IBM) has been reviewed for accuracy as of the date of initial publication and could include unintentional technical or typographical errors. IBM shall have no responsibility to update this information. This document is distributed “as is” without any warranty, either express or implied. In no event, shall IBM be liable for any damage arising from the use of this information, including but not limited to, loss of data, business interruption, loss of profit or loss of opportunity. IBM products and services are warranted per the terms and conditions of the agreements under which they are provided. IBM products are manufactured from new parts or new and used parts. In some cases, a product may not be new and may have been previously installed. Regardless, our warranty terms apply.” Any statements regarding IBM's future direction, intent or product plans are subject to change or withdrawal without notice. Performance data contained herein was generally obtained in a controlled, isolated environments. Customer examples are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual performance, cost, savings or other results in other operating environments may vary. References in this document to IBM products, programs, or services does not imply that IBM intends to make such products, programs or services available in all countries in which IBM operates or does business. Workshops, sessions and associated materials may have been prepared by independent session speakers, and do not necessarily reflect the views of IBM. All materials and discussions are provided for informational purposes only, and are neither intended to, nor shall constitute legal or other guidance or advice to any individual participant or their specific situation. It is the customer’s responsibility to insure its own compliance with legal requirements and to obtain advice of competent legal counsel as to the identification and interpretation of any relevant laws and regulatory requirements that may affect the customer’s business and any actions the customer may need to take to comply with such laws. IBM does not provide legal advice or represent or warrant that its services or products will ensure that the customer follows any law.

Slide 42

Slide 42 text

Notices and disclaimers continued Think 2018 / March 19, 2018 / © 2018 IBM Corporation Information concerning non-IBM products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products about this publication and cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of those products. IBM does not warrant the quality of any third-party products, or the ability of any such third-party products to interoperate with IBM’s products. IBM expressly disclaims all warranties, expressed or implied, including but not limited to, the implied warranties of merchantability and fitness for a purpose. The provision of the information contained herein is not intended to, and does not, grant any right or license under any IBM patents, copyrights, trademarks or other intellectual property right. IBM, the IBM logo, ibm.com and [names of other referenced IBM products and services used in the presentation] are trademarks of International Business Machines Corporation, registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at: www.ibm.com/legal/copytrade.shtml. .

Slide 43

Slide 43 text

Thank you Think 2018 / March 19, 2018 / © 2018 IBM Corporation Bradley Holt Developer Advocate Senior Software Engineer — ibm.com

Slide 44

Slide 44 text

Think 2018 / March 19, 2018 / © 2018 IBM Corporation