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
Tweet

More Decks by Bradley Holt

Other Decks in Programming

Transcript

  1. Bradley Holt, Developer Advocate
    Saturday, June 3, 2017
    Offline Sync for
    Progressive Web Apps
    MobileMonday NYC API-First Hackathon
    ⌨ ⚙

    View Slide

  2. View Slide

  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

    View Slide

  4. Key Concepts

    View Slide

  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/

    View Slide

  6. https://www.pwastats.com/

    View Slide

  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/

    View Slide

  8. Web Components
    Open standard for components and widgets that are customizable, reusable,
    and encapsulated
    https://www.webcomponents.org/

    View Slide

  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/

    View Slide

  10. The Polymer Shop App
    A demo Progressive Web App built using Polymer App Toolbox
    https://github.com/Polymer/shop

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  14. PouchDB
    An open source JavaScript database that syncs with anything that implements
    the CouchDB Replication Protocol
    https://pouchdb.com/

    View Slide

  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/

    View Slide

  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/

    View Slide

  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/

    View Slide

  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

    View Slide

  19. Initial Set Up ⌨

    View Slide

  20. Check for Node.js Version 4 or Higher
    $ node -v!
    v7.10.0!

    View Slide

  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/

    View Slide

  22. Install Bower
    $ npm install -g bower!
    https://github.com/bradley-holt/shop

    View Slide

  23. Install Polymer CLI
    $ npm install -g polymer-cli!
    https://github.com/bradley-holt/shop

    View Slide

  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

    View Slide

  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

    View Slide

  26. View Slide

  27. Install Hoodie

    View Slide

  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

    View Slide

  29. Install Hoodie
    $ npm install hoodie --save!
    https://github.com/bradley-holt/shop

    View Slide

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

    View Slide

  31. View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  35. View Slide

  36. Install Bower Dependencies via npm install
    https://github.com/bradley-holt/shop

    View Slide

  37. Test npm install!
    $ npm install!
    !
    > [email protected] postinstall /Users/bradleydholt/shop!
    > cd public && bower install!
    https://github.com/bradley-holt/shop

    View Slide

  38. Configure Hoodie ⚙

    View Slide

  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

    View Slide

  40. Set the Admin Password in .hoodierc!
    {!
    "adminPassword": "password"!
    }!
    https://github.com/bradley-holt/shop

    View Slide

  41. Hoodie Admin Dashboard
    Create, view, and edit user accounts with the Hoodie Admin Dashboard
    https://github.com/bradley-holt/shop

    View Slide

  42. Hoodie Store API

    View Slide

  43. Create Hoodie Polymer Element
    https://github.com/bradley-holt/shop

    View Slide

  44. Import Hoodie Polymer Component
    https://github.com/bradley-holt/shop

    View Slide

  45. Replace localStorage with Hoodie Store (1/9)
    $ cd public!
    $ bower uninstall app-storage --save!
    $ cd ..!
    https://github.com/bradley-holt/shop

    View Slide

  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.

    View Slide

  47. Replace localStorage with Hoodie Store (3/9)
    https://github.com/bradley-holt/shop

    View Slide

  48. Replace localStorage with Hoodie Store (4/9)
    https://github.com/bradley-holt/shop

    View Slide

  49. Replace localStorage with Hoodie Store (5/9)
    https://github.com/bradley-holt/shop

    View Slide

  50. Replace localStorage with Hoodie Store (6/9)
    https://github.com/bradley-holt/shop

    View Slide

  51. Replace localStorage with Hoodie Store (7/9)
    https://github.com/bradley-holt/shop

    View Slide

  52. Replace localStorage with Hoodie Store (8/9)
    https://github.com/bradley-holt/shop

    View Slide

  53. Replace localStorage with Hoodie Store (9/9)
    https://github.com/bradley-holt/shop

    View Slide

  54. Hoodie Account API

    View Slide

  55. Create Sign Up Page (1/2)
    https://github.com/bradley-holt/shop

    View Slide

  56. Create Sign Up Page (2/2)
    https://github.com/bradley-holt/shop

    View Slide

  57. Create Sign In Page (1/2)
    https://github.com/bradley-holt/shop

    View Slide

  58. Create Sign In Page (2/2)
    https://github.com/bradley-holt/shop

    View Slide

  59. Add Sign Up and Sign In Views to App
    https://github.com/bradley-holt/shop

    View Slide

  60. Create Hoodie Account Component
    https://github.com/bradley-holt/shop

    View Slide

  61. Add Hoodie Account Component to App (1/2)
    https://github.com/bradley-holt/shop

    View Slide

  62. Add Hoodie Account Component to App (2/2)
    https://github.com/bradley-holt/shop

    View Slide

  63. Offline Sync

    View Slide

  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

    View Slide

  65. What's next?

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  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)

    View Slide

  70. View Slide

  71. Thank You

    View Slide