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

Offline Sync for Progressive Web Apps at Vermont Code Camp

Bradley Holt
September 16, 2017

Offline Sync for Progressive Web Apps at Vermont Code Camp

With the introduction of Progressive Web Apps and web platform APIs such as persistent storage, payments, geolocation, and push notifications, the web platform is taking on native apps. 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. One of the biggest benefits of Offline First apps is that they can be very fast, as they provide zero-latency access to content and data stored directly on the device.

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 sync'ing 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

September 16, 2017
Tweet

More Decks by Bradley Holt

Other Decks in Programming

Transcript

  1. Vermont Code Camp
    Bradley Holt, Developer Advocate
    Saturday, September 16, 2017
    Offline Sync for
    Progressive Web Apps

    View Slide

  2. View Slide

  3. https://mobilefirstplatform.ibmcloud.com/blog/2016/01/13/ionic-hybrid-mobile-app-using-mobilefirst-platform-7-1-cli/
    Native
    Mobile
    Apps

    View Slide

  4. organic growth by Steve Jurvetson, on Flickr (CC BY 2.0).
    The
    Web
    Platform

    View Slide

  5. W3C HTML5 Logo (CC BY 3.0).

    View Slide

  6. Mobile First
    & the
    Mobile Web
    Screen size visualisation by Orde Saunders, on Flickr (CC BY 2.0).

    View Slide

  7. https://responsivedesign.is/examples/css-conf-europe/

    View Slide

  8. Evergreen by Basheer Tome, on Flickr (CC BY 2.0).
    Evergreen
    Browsers

    View Slide

  9. mettalic weave by Joel Ormsby, on Flickr (CC BY 2.0).
    Polyfills

    View Slide

  10. By Diseño Web Valencia, via Wikimedia Commons (CC BY-SA 4.0).

    View Slide

  11. View Slide

  12. https://doesmysiteneedhttps.com/

    View Slide

  13. Percentage of Web Pages Loaded by Firefox Using HTTPS
    https://letsencrypt.org/stats/

    View Slide

  14. Web or
    Mobile
    App?
    iPhone 4 - Bottom View with Bumper by William Hook, on Flickr (CC BY-SA 2.0).

    View Slide

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

    View Slide

  16. Progressive
    Web Apps
    (or how to have your cake and eat it too)
    German Chocolate Cake by Kimberly Vardeman, on Flickr (CC BY 2.0).

    View Slide

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

  18. "I don’t want the web to equal native; I want the web to
    surpass it. I, for one, would prefer a reality where my home screen
    isn’t filled with the icons of startups and companies that have
    fulfilled the criteria of the gatekeepers. But a home screen filled
    with the faces of people who didn’t have to ask anyone’s
    permission to publish? That’s what I want!" –Jeremy Keith
    Adactio: Journal—Progressing the web | Jeremy Keith by Matthew Oliphant, on Flickr (CC BY-ND 2.0).

    View Slide

  19. https://www.pwastats.com/

    View Slide

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

    View Slide

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

    View Slide

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

  23. speed 3 by Monkieyes, on Flickr (CC BY 2.0).
    Zero Latency
    Access to
    Content & Data

    View Slide

  24. Offline, Online & ¯\_(ツ)_/¯

    View Slide

  25. The Next
    Billion
    Internet Users
    the galaxy by [email protected], on Flickr (CC BY 2.0).

    View Slide

  26. Cache
    content
    & assets
    with
    Service
    Workers
    Service Workers fetch diagram by Mozilla Contributors (CC-BY-SA 2.5).

    View Slide

  27. Technological devices design created by D3images - Freepik.com | Texture 94 by Ellen van Deelen, on Flickr (CC BY 2.0).
    Sync
    is
    Hard

    View Slide

  28. IBM Cloudant
    Apache CouchDB
    PouchDB

    View Slide

  29. "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 – CouchDB Blog

    View Slide

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

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

    View Slide

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

  33. Apache CouchDB
    Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    PouchDB
    Browser-to-
    Cloud Sync

    View Slide

  34. userdb-d76846
    userdb-905cec
    userdb-adc95b
    userdb-c082f2
    userdb-730bba
    userdb-c3d3e5
    userdb-a1ec1f
    userdb-85a327
    userdb-9b9aba
    userdb-85bcfe
    userdb-da3d25
    One Database
    Per User
    database by Tim Morgan, on Flickr (CC BY 2.0). userdb-43ecb5
    userdb-8a5dfa

    View Slide

  35. View Slide

  36. Apache CouchDB
    Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    PouchDB

    View Slide

  37. Progressive Web Apps, Progressively
    Ensure your website is mobile friendly
    Improve an existing website
    Create a native app-like experience
    Leverage the web platform

    View Slide

  38. Progressive Web Apps, Progressively
    •  Implement responsive web design
    •  Ensure cross-browser compatibility
    •  Test and improve web performance
    Ensure your website is mobile friendly
    Improve an existing website
    Create a native app-like experience
    Leverage the web platform

    View Slide

  39. Progressive Web Apps, Progressively
    Ensure your website is mobile friendly
    •  Use an SSL/TLS certificate (Let's Encrypt is your friend)
    •  Add a Web App Manifest (name, author, icon, description, etc.)
    •  Use a Service Worker to make your app cache-first
    Improve an existing website
    Create a native app-like experience
    Leverage the web platform

    View Slide

  40. Progressive Web Apps, Progressively
    Ensure your website is mobile friendly
    Improve an existing website
    •  Provide instant page transitions with a single-page (client-rendered) app
    •  Minimize time-to-interactive with the PRPL pattern
    •  Use a local database (IndexedDB, localForage, or PouchDB)
    Create a native app-like experience
    Leverage the web platform

    View Slide

  41. Progressive Web Apps, Progressively
    Ensure your website is mobile friendly
    Improve an existing website
    Create a native app-like experience
    •  Ensure that each page can be addressed via a URL
    •  Implement server-side rendering for users without JavaScript
    •  Build a hybrid mobile app with a tool like Ionic or Apache Cordova
    Leverage the web platform

    View Slide

  42. Shopping List Offline First Demo Apps (work in progress)
    A series of demo Progressive Web Apps, hybrid mobile apps, native mobile
    apps, and a desktop app—each built using a different stack.

    View Slide

  43. https://github.com/ibm-watson-data-lab/shopping-list

    View Slide

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

  45. View Slide

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

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

  48. Questions?

    View Slide