Offline Sync for Progressive Web Apps Workshop at MobileMonday NYC API-First Hackathon

Learn how to build an Offline First Progressive Web App using Apache CouchDB, Hoodie, and PouchDB. Offline First apps provide a consistent user experience whether the user's device has no connectivity, limited connectivity, or great connectivity. A Progressive Web App combines the best parts both a web app and a native app. You browse to a Progressive Web App just like you browse to any other website. It lives at a URL, can be indexed by search engines, and can be linked to from anywhere else on the web. As you continue to use a Progressive Web App it gains additional native app-like capabilities. For example, the app could be installed to the home screen on your device. You might also grant the app the ability to send you push notifications, or the ability to access your camera, your microphone, or other device resources. This workshop will demonstrate how you can build offline sync into your Progressive Web App using a combination of Apache CouchDB (an open source document database), Hoodie (an open source Node.js backend for Offline First apps), and PouchDB (an open source JavaScript database that syncs).

Transcript

1. Bradley Holt, Developer Advocate Saturday, June 3, 2017 Offline Sync for Progressive Web Apps MobileMonday NYC API-First Hackathon ⌨ ⚙
3. Prerequisite Knowledge & Skills §  Ability to write JavaScript at a novice level, at minimum §  A basic understanding of JavaScript promises https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html §  A basic understanding of HTML §  Ability to work with an application programming interface (API) https://github.com/bradley-holt/shop
4. Key Concepts
5. Progressive Web Apps A Progressive Web App provides both the discoverability of a web app and the reliable, fast, and engaging user experience of a native mobile app https://www.pokedex.org/
6. https://www.pwastats.com/
7. Polymer Libraries, tools, and patterns for building Progressive Web Apps using web platform features such as Web Components, Service Workers, and HTTP/2 https://www.polymer-project.org/
8. Web Components Open standard for components and widgets that are customizable, reusable, and encapsulated https://www.webcomponents.org/
9. Polymer App Toolbox Components, tools, and templates for building Progressive Web Apps with Polymer and Web Components https://www.polymer-project.org/2.0/toolbox/
10. The Polymer Shop App A demo Progressive Web App built using Polymer App Toolbox https://github.com/Polymer/shop
11. Offline First Progressive Web Apps must be Offline First in order to provide a reliable, fast, and engaging user experience regardless of network connectivity No Signal by Steve Hodgson, on Flickr (CC BY-SA 2.0).
12. Service Workers Use the Cache API (part of the Service Workers specification) to make URL addressable resources and content available while offline Service Workers fetch diagram by Mozilla Contributors (CC-BY-SA 2.5).
13. IndexedDB Use IndexedDB or localForage (a polyfill that uses WebSQL or localStorage if IndexedDB is not supported) to make application data available while offline https://caniuse.com/#feat=indexeddb
14. PouchDB An open source JavaScript database that syncs with anything that implements the CouchDB Replication Protocol https://pouchdb.com/
15. Apache CouchDB An open source document database featuring an HTTP API, JSON documents, clustering capabilities for horizontal scalability, and peer-to-peer replication http://couchdb.apache.org/
16. IBM Cloudant A fully-managed database-as-a-service (DBaaS) based on Apache CouchDB with additional full text and geospatial search capabilities https://cloudant.com/
17. Hoodie An open source backend framework for Offline First applications, leveraging Apache CouchDB on the server and PouchDB on the client http://hood.ie/
18. Workshop Outline 1.  Install and run the Polymer Shop app 2.  Install Hoodie 3.  Configure Hoodie, optionally using Apache CouchDB or IBM Cloudant 4.  Replace IndexedDB with the Hoodie store, which is a wrapper for PouchDB 5.  Integrate with the Hoodie account API, allowing users to sign up, sign in, and sign out 6.  Demonstrate the offline sync capabilities of Hoodie and PouchDB https://github.com/bradley-holt/shop
19. Initial Set Up ⌨
20. Check for Node.js Version 4 or Higher $ node -v! v7.10.0!
21. Install Node.js (if not already installed) § Download https://nodejs.org/en/download/ –or– § Install via a package manager https://nodejs.org/en/download/package-manager/
22. Install Bower $ npm install -g bower! https://github.com/bradley-holt/shop
23. Install Polymer CLI $ npm install -g polymer-cli! https://github.com/bradley-holt/shop
24. Install the Polymer Shop App $ git clone https://github.com/bradley-holt/shop.git! $ cd shop! $ git checkout upstream! $ bower install! https://github.com/bradley-holt/shop
25. Start the Polymer Development Server $ polymer serve! info: Files in this directory are available under the following URLs! applications: http://127.0.0.1:8081! reusable components: http://127.0.0.1:8081/components/shop/! https://github.com/bradley-holt/shop
27. Install Hoodie
28. Create a package.json File $ npm init! ! package name: (shop) ! version: (1.0.0) 1.1.2! description: ! entry point: (service-worker.js) index.js! test command: ! git repository: (https://github.com/bradley-holt/shop.git) ! keywords: ! license: (ISC) BSD-3-Clause! https://github.com/bradley-holt/shop
29. Install Hoodie $ npm install hoodie --save! https://github.com/bradley-holt/shop
30. Start Hoodie $ npm start! ! > shop@1.1.2 start /Users/bradleydholt/shop! > hoodie! ! Your Hoodie app has started on: http://localhost:8080! Stop server with control + c! https://github.com/bradley-holt/shop
32. Move Polymer App to public Directory (1/2) $ rm app.yaml! $ mkdir public! $ mv bower.json bower_components data images index.html manifest.json polymer.json service-worker.js src sw-precache-config.js test public! https://github.com/bradley-holt/shop
33. Move Polymer App to public Directory (2/2) .! ├── README.md! ├── node_modules! ├── package.json! └── public! ├── bower.json! ├── bower_components! ├── data! ├── images! ├── index.html! ├── manifest.json! ├── polymer.json! ├── service-worker.js! ├── src! ├── sw-precache-config.js! └── test! https://github.com/bradley-holt/shop
34. Start Hoodie $ npm start! ! > shop@1.1.2 start /Users/bradleydholt/shop! > hoodie! ! Your Hoodie app has started on: http://localhost:8080! Stop server with control + c! https://github.com/bradley-holt/shop
36. Install Bower Dependencies via npm install https://github.com/bradley-holt/shop
37. Test npm install! $ npm install! ! > shop@1.1.2 postinstall /Users/bradleydholt/shop! > cd public && bower install! https://github.com/bradley-holt/shop
38. Configure Hoodie ⚙
39. Hoodie Configuration Options Hoodie can be configured through command line arguments, environment variables, a .hoodierc file, and/or a hoodie key in package.json! http://docs.hood.ie/en/latest/guides/configuration.html
40. Set the Admin Password in .hoodierc! {! "adminPassword": "password"! }! https://github.com/bradley-holt/shop
41. Hoodie Admin Dashboard Create, view, and edit user accounts with the Hoodie Admin Dashboard https://github.com/bradley-holt/shop
42. Hoodie Store API
43. Create Hoodie Polymer Element https://github.com/bradley-holt/shop
44. Import Hoodie Polymer Component https://github.com/bradley-holt/shop
45. Replace localStorage with Hoodie Store (1/9) $ cd public! $ bower uninstall app-storage --save! $ cd ..! https://github.com/bradley-holt/shop
46. Replace localStorage with Hoodie Store (2/9) https://github.com/bradley-holt/shop Note: This line will have been removed by the previous command.
47. Replace localStorage with Hoodie Store (3/9) https://github.com/bradley-holt/shop
48. Replace localStorage with Hoodie Store (4/9) https://github.com/bradley-holt/shop
49. Replace localStorage with Hoodie Store (5/9) https://github.com/bradley-holt/shop
50. Replace localStorage with Hoodie Store (6/9) https://github.com/bradley-holt/shop
51. Replace localStorage with Hoodie Store (7/9) https://github.com/bradley-holt/shop
52. Replace localStorage with Hoodie Store (8/9) https://github.com/bradley-holt/shop
53. Replace localStorage with Hoodie Store (9/9) https://github.com/bradley-holt/shop
54. Hoodie Account API
55. Create Sign Up Page (1/2) https://github.com/bradley-holt/shop
56. Create Sign Up Page (2/2) https://github.com/bradley-holt/shop
57. Create Sign In Page (1/2) https://github.com/bradley-holt/shop
58. Create Sign In Page (2/2) https://github.com/bradley-holt/shop
59. Add Sign Up and Sign In Views to App https://github.com/bradley-holt/shop
60. Create Hoodie Account Component https://github.com/bradley-holt/shop
61. Add Hoodie Account Component to App (1/2) https://github.com/bradley-holt/shop
62. Add Hoodie Account Component to App (2/2) https://github.com/bradley-holt/shop
63. Offline Sync
64. Offline Sync For signed in users, Hoodie store is live sync'd with the server automatically, cleared on sign out, and available to the user again after sign in
65. What's next?
66. Next Steps for the Shop App §  Fix bug with cart sync'ing from the server §  Handle replication conflicts §  Use Apache CouchDB or the Cloudant Developer Edition for local development §  Fix Polymer builds §  Deploy to IBM Bluemix and use IBM Cloudant §  Consider separating the backend and frontend application codebases
67. Offline Camp From the Catskill Mountains, to the Central Coast of California, to Berlin, we're building the Offline First community, one campfire at a time Image credit: Aaron Ross
68. Get Involved in the Offline First Community! §  Join the Offline First Slack team: offlinefirst.org/chat/ §  Follow @OfflineCamp on Twitter §  Read the Offline Camp Medium publication: medium.com/offline-camp §  Join us at an upcoming Offline Camp: http://offlinefirst.org/camp/
69. Further Reading and Resources §  Offline Sync for Progressive Web Apps – IBM Watson Data Lab §  Voice of InterConnect – IBM Watson Data Lab §  Deploying the Hoodie Tracker demo app to IBM Bluemix §  Hoodie documentation on storing data with IBM Cloudant §  Offline Camp Medium publication §  Offline First resources §  Offline First on YouTube §  Make&Model (consultancy specializing in user experience design for Offline First apps) §  Neighbourhoodie Software (IBM Business Partner specializing in architecting Offline First apps)
71. Thank You