Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Bradley Holt

June 03, 2017

More Decks by Bradley Holt

Other Decks in Programming


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

    for Progressive Web Apps MobileMonday NYC API-First Hackathon ⌨ ⚙
  2. 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
  3. 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/
  4. 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/
  5. Web Components Open standard for components and widgets that are

    customizable, reusable, and encapsulated https://www.webcomponents.org/
  6. 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/
  7. The Polymer Shop App A demo Progressive Web App built

    using Polymer App Toolbox https://github.com/Polymer/shop
  8. 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).
  9. 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).
  10. 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
  11. PouchDB An open source JavaScript database that syncs with anything

    that implements the CouchDB Replication Protocol https://pouchdb.com/
  12. 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/
  13. 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/
  14. Hoodie An open source backend framework for Offline First applications,

    leveraging Apache CouchDB on the server and PouchDB on the client http://hood.ie/
  15. 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
  16. 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
  17. Start the Polymer Development Server $ polymer serve! info: Files

    in this directory are available under the following URLs! applications:! reusable components:! https://github.com/bradley-holt/shop
  18. 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
  19. Start Hoodie $ npm start! ! > [email protected] 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
  20. 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
  21. 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
  22. Start Hoodie $ npm start! ! > [email protected] 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
  23. Test npm install! $ npm install! ! > [email protected] postinstall

    /Users/bradleydholt/shop! > cd public && bower install! https://github.com/bradley-holt/shop
  24. 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
  25. Hoodie Admin Dashboard Create, view, and edit user accounts with

    the Hoodie Admin Dashboard https://github.com/bradley-holt/shop
  26. Replace localStorage with Hoodie Store (1/9) $ cd public! $

    bower uninstall app-storage --save! $ cd ..! https://github.com/bradley-holt/shop
  27. 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
  28. 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
  29. 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
  30. 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/
  31. 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)