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
   ⌨ ⚙
   

   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!
    !
    > 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
    

    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!
    !
    > 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
    

    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!
    !
    > shop@1.1.2 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