Offline Sync for Progressive Web Apps

Bradley Holt Intermediate

With the introduction of Progressive Web Apps and web platform APIs such as persistent storage, payments, and geolocation, the web platform is taking on native apps. 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.
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! You'll leave this workshop having built a fully-functional Offline First Progressive Web Apps using Polymer, Web Components, Service Workers, Apache CouchDB, Hoodie, and PouchDB.