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!

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 tommy@chau, 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