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

Offline Sync for Progressive Web Apps at O'Reilly Fluent

Offline Sync for Progressive Web Apps at O'Reilly Fluent

With the introduction of progressive web apps and browser APIs such as persistent storage, payments, geolocation, and push notifications, it is now possible to build fully featured mobile apps on the web platform. One important aspect of progressive web apps is the concept of building your app to be offline first. With an offline-first approach, you design your app for the most resource-constrained environment first. This approach provides a consistent user experience whether the user’s device has no connectivity, limited connectivity, or great connectivity.

The Service Worker API can do most of the heavy lifting when it comes to storing content and assets for offline-first progressive web apps. A bigger challenge can be storing and syncing your app’s data. One of the best answers today for offline sync for progressive web apps is 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). This stack can provide you with the starting point for your own progressive web app mobile backend and frontend, and it’s entirely open source.

Bradley Holt demonstrates how service workers, Apache CouchDB, Hoodie, and PouchDB can be used to build progressive web apps using an offline-first approach in order to provide fast, zero-latency access to content and data stored directly on the device.

Bradley Holt

June 13, 2018
Tweet

More Decks by Bradley Holt

Other Decks in Programming

Transcript

  1. Offline Sync for
    Progressive Web Apps
    Bradley Holt
    Program Manager, Developer Advocacy
    Center for Open-Source Data and AI Technologies
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  2. View Slide

  3. iPhone 4 - Bottom View with Bumper by William Hook, on Flickr (CC BY-SA 2.0).
    Web or
    mobile
    app?

    View Slide

  4. http://gph.is/2dhW35c

    View Slide

  5. Progressive Web Apps
    Provides both the
    discoverability of a
    web app and the
    reliable, fast, and
    engaging user
    experience of a
    native mobile app
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

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

    View Slide

  7. https://developers.google.com/web/showcase/2017/twitter

    View Slide

  8. View Slide

  9. Not just
    offline…
    Accès wi-fi à Gorakshep (5140m) by Jerome Bon, on Flickr (CC BY 2.0).

    View Slide

  10. Reliable, fast, and
    engaging user
    experience—
    regardless of network
    connectivity
    Static Wallpaper by James Spinks, on Flickr (CC BY-SA 2.0).

    View Slide

  11. Zero-latency
    access to
    content & data
    speed 3 by Monkieyes, on Flickr (CC BY 2.0).

    View Slide

  12. Offline, Online & ¯\_(ツ)_/¯
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  13. The next
    billion people
    on the internet
    the galaxy by tommy@chau, on Flickr (CC BY 2.0).

    View Slide

  14. Geolocation API
    Network Information API
    IndexedDB
    WebRTC API
    Push API
    Notifications API
    Device Orientation API
    Screen Orientation API
    Permissions API
    Proximity API
    Pointer Lock API
    Vibration API
    Payment Request API
    Battery Status API
    Ambient Light Sensor API
    Service Worker API
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0).
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  15. Service Workers
    Service Workers
    allow for fine-
    grained control
    over caching of
    content and assets,
    enabling cache-first
    web apps
    Service Workers fetch diagram by Mozilla Contributors (CC-BY-SA 2.5).
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  16. https://caniuse.com/#feat=serviceworkers

    View Slide

  17. Registering a service worker example by Mozilla Contributors (CC-BY-SA 2.5).

    View Slide

  18. Install and activate a service worker example by Mozilla Contributors (CC-BY-SA 2.5).

    View Slide

  19. Custom service worker response example by Mozilla Contributors (CC-BY-SA 2.5).

    View Slide

  20. IndexedDB
    IndexedDB enables
    app data to be
    stored locally within
    a browser
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0).
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  21. https://caniuse.com/#search=indexdb

    View Slide

  22. localForage
    localForage wraps
    IndexedDB,
    WebSQL, or
    localStorage,
    providing a
    consistent API
    regardless of which
    storage mechanism
    is supported by the
    end user’s browser
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0).
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  23. https://github.com/localForage/localForage

    View Slide

  24. Sync
    is
    Hard
    Technological devices designed by D3Images / Freepik .
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  25. View Slide

  26. Apache CouchDB
    PouchDB
    IBM Cloudant
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  27. “CouchDB’s superpower is sync.
    Sometimes I even try to explain it to
    people by saying, ‘CouchDB isn’t a
    database; it’s a sync engine.’ It’s a
    way of efficiently transferring data
    from one place to another, while
    intelligently managing conflicts and
    revisions. It’s very similar to Git.
    When I make that analogy, the light
    bulb often goes off.”
    Nolan Lawson
    PouchDB & CouchDB: An interview with Nolan Lawson
    June 13, 2018 / © 2018 IBM Corporation
    https://blog.couchdb.org/2017/04/04/pouchdb-couchdb-an-interview-with-nolan-lawson/

    View Slide

  28. Offline Sync for
    Progressive
    Web Apps
    PouchDB
    Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    June 13, 2018 / © 2018 IBM Corporation
    Apache CouchDB

    View Slide

  29. https://pouchdb.com/

    View Slide

  30. Pokedex.org
    An offline-capable
    Progressive Web
    App built with
    Service Worker and
    PouchDB
    https://www.pokedex.org/
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  31. Multi-User
    Apps with
    Hoodie
    http://hood.ie/
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  32. June 13, 2018 / © 2018 IBM Corporation

    View Slide

  33. Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    PouchDB
    June 13, 2018 / © 2018 IBM Corporation
    Apache CouchDB

    View Slide

  34. Cloudant Envoy
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  35. June 13, 2018 / © 2018 IBM Corporation

    View Slide

  36. Shopping List
    A series of Offline
    First demo apps—
    each built using a
    different stack
    https://ibm-watson-data-lab.github.io/shopping-list-demo
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  37. https://github.com/ibm-watson-data-lab/shopping-list
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  38. https://developer.ibm.com/code/patterns/create-an-offline-first-shopping-list-progressive-web-app/
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  39. Join the
    Offline First
    community

    View Slide

  40. Offline Camp
    We are building an
    Offline First
    community, one
    campfire at a time.
    Offline Camp has
    visited the Catskills
    of New York, the
    Central Coast of
    California, Berlin,
    and Oregon.
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  41. offlinefirst.org/chat
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  42. View Slide

  43. https://medium.com/offline-camp

    View Slide

  44. Thank you
    codait.org
    twitter.com/BradleyHolt
    medium.com/@BradleyHolt
    github.com/bradley-holt
    developer.ibm.com/code
    June 13, 2018 / © 2018 IBM Corporation

    View Slide

  45. June 13, 2018 / © 2018 IBM Corporation

    View Slide