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

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

8896271ee9d6f46d4b1783c9566cb645?s=128

Bradley Holt

June 03, 2017
Tweet

Transcript

  1. Bradley Holt, Developer Advocate Saturday, June 3, 2017 Offline Sync

    for Progressive Web Apps MobileMonday NYC API-First Hackathon ⌨ ⚙
  2. None
  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
  26. None
  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
  31. None
  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
  35. None
  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)
  70. None
  71. Thank You