You Get an Offline First App, and You Get an Offline First App, and…
Hit the ground running with a series of Offline First demo apps
When we don’t embrace Offline First for web and mobile application development, we let our users down. It’s frustrating when their favorite applications become unusable when disconnected or when operating under terrible network conditions. But much of the pain caused by unreliable internet connectivity can be alleviated with an Offline First approach.
Maintaining network availability and reliability can be difficult. Improving user experience, despite network conditions, doesn’t have to be.
Learning By Example
Developing offline-capable applications can be easier than you think, and our developer advocacy team at IBM has been working on a series of Offline First Shopping List sample applications to demonstrate this. We want to demystify the Offline First approach by providing concrete sample applications that can be used to quickly get started.
The idea of a shopping list app is simple enough to grasp, yet involved enough to convey common use cases when developing for network uncertainty. For example:
- Users should be able to see their data (e.g., shopping lists and items) whether the device is online or offline
- Users should be able to edit their data whether the device is online or offline
- Users should be able to access their data across different devices
The sample apps cover Progressive Web Apps, hybrid mobile apps, native mobile apps, and desktop apps for many frameworks and technologies and are available as tutorials or reference implementations (e.g., this Vue.js reference implementation) to guide you in building or improving your own application.
Tools of the Trade
Like any other offline-capable app, the Shopping List sample applications involve:
- storing data on the local client so it is always available to the user (offline or online)
- syncing data to the cloud storage for sharing, update, and backup purposes when online
Any number of tools and technologies can be used to address these. However, the combination of PouchDB and Apache CouchDB™ found their way into the majority of the Shopping List apps. Both are powerful tools which make developing offline-capable applications simpler.
Apache CouchDB is an open source, NoSQL document store. Its replication protocol makes it ideal for our applications’ synchronization requirements, while its REST API allows it to be accessible from whatever platform or framework we used for a particular implementation.
PouchDB is an open source, in-browser database that implements the CouchDB replication protocol. Thus, it can sync with any database supporting the CouchDB replication protocol, such as CouchDB itself or IBM Cloudant. Written in JavaScript, PouchDB is cross-browser, lightweight, and easy to learn. It’s well suited to incorporate into the various technology stacks we wanted to focus on.
Using PouchDB and CouchDB in tandem, the Shopping List apps write data to a local PouchDB instance. The data remains safe on the client device and is persisted between sessions, even when offline. When online, the data gets synchronized from the local device to an instance of CouchDB and can then be shared with different devices.
Learning By Doing
Our team set out with the goal of providing sample Offline First apps for many of the popular application frameworks. As such, the Offline First Shopping List sample applications remain a work in progress.
The series is open source and available on GitHub. We encourage people to clone the apps for their favorite frameworks, learn how to easy it is to go Offline First, and then implement what they’ve learned in their applications.
We also welcome GitHub issues and pull requests to help improve the sample apps and deliver on our goal.
Happy coding!
Editor’s Note: Want to spend a weekend exploring Offline First at a discussion-based tech retreat? The next Offline Camp will take place August 2–5, 2019 in Grants Pass, Oregon. Learn more in our announcement post or head straight to the website to apply. Can’t make it? Sign up for updates and cast your vote on where we should host future editions of Offline Camp.
