Offline Sync for Progressive Web Apps
Apache CouchDB + Hoodie + PouchDB
A lot has changed in the almost fifteen years that I’ve been building web apps. I’ve always loved the open nature of the web platform. There are no gatekeepers on the web. No one can tell you what you can and cannot publish on the web (which certainly has its pros and its cons).
The massive success of the iOS platform after its launch in 2007 presented a bit of an existential threat to the web platform. Would people abandon the web for native apps? To a certain extent, many of web developers’ fears about native apps proved true. The user interaction model of native apps was very compelling, and many developers turned away from the web platform for the greener pastures of native app platforms.
However, the web platform has demonstrated remarkable resiliency and adaptability. Not only has the web platform persisted all of these years, it has demonstrated an impressive capacity for slow yet inexorable innovation. The introduction of HTML5 brought new energy to the web platform. Evergreen browsers allowed for a constant stream of new web platform features to be delivered to end users. Polyfills allowed web developers to adopt new web platform features immediately without having to first wait for every browser to get these new features.
Progressive Web Apps = web + native apps
Today the web platform is taking on native apps. There’s still some work to be done, but I believe that the future of apps is web apps. More specifically, I believe that the future of apps is Progressive Web 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 Service Worker is a small bit of code that a web developer can write to instruct the browser on exactly how to cache content and assets for offline usage. Service Workers are an essential tool for building Offline First Progressive Web Apps.
Thinking about sync
Once you’ve figured out Service Workers, the next hurdle is figuring out how to store and sync your app’s data. Offline sync is a bit more challenging, and there is no “one true answer” yet. However, I believe that the best answer for offline sync for Progressive Web Apps is a combination of Apache CouchDB, Hoodie, and PouchDB.
Trust me, you do not want to write your own sync functionality—it’s way harder than you might think—and it’s a good thing you don’t have to! Fortunately, Apache CouchDB has already solved this problem. Even better, PouchDB is a JavaScript database that can run in a web browser and can sync with Apache CouchDB over HTTP. Nolan Lawson recently had this to say about Apache CouchDB and PouchDB:
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.
So, there you have it! Apache CouchDB on the server side, PouchDB on the client side in the web browser, and the two of them sync’ing with each other over HTTP. Fantastic! Not so fast…
Unfortunately Apache CouchDB does not (yet) have per-document permissions. This means that you need to store each user’s data in their own database. Then there’s the matter of account creation, and creating user databases, and user login, and…
Welcome to the neighbor-Hoodie
This is where Hoodie fits in. Hoodie is a Node.js framework that makes building Offline First apps easier—a lot easier. Hoodie is an entire backend for Offline First applications, leveraging Apache CouchDB on the server and PouchDB on the client. Hoodie provides APIs for managing users, persisting data, sync’ing data, and a number of other features. Also, Hoodie has cultivated an amazing developer community that is friendly, inclusive, and welcoming. Check out the recording of Gregor Martynus’ recent talk on “Building Offline First apps with Hoodie” at js.la if you want to learn more about how Hoodie works.
I hope that you’re excited about building some Offline First Progressive Web Apps with Apache CouchDB, Hoodie, and PouchDB! Keep an eye out for resources from me and other IBM Watson Data Lab team members on building Offline First Progressive Web Apps using IBM Cloudant (our fully-managed database-as-a-service based on Apache CouchDB) and IBM Bluemix (our platform-as-a-service). In the meantime, check out these resources:
- Voice of InterConnect is an Offline First Progressive Web App featuring Hoodie, IBM Cloudant, and IBM Watson Services.
- Tracker is a sample Hoodie app that can serve as the starting point for building with Hoodie. Instructions are provided for deploying Tracker to IBM Bluemix.
- The Hoodie documentation provides instructions for using IBM Cloudant as Hoodie’s database backend.
- You’ll find lots of great info about Offline First on the Offline Camp Medium publication and on the Offline First Resources page.
- Looking for a consultant who can help you with your Offline First app? Make&Model specializes in user experience design for Offline First apps and Neighbourhoodie, an IBM Business Partner, specializes in architecting Offline First apps.
Let’s get sync’ing!
