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.

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