Conference Talk with Live Demo

This project is the subject of my conference talk, Offline First: Making Your App Awesome When the Network Isn't, which is geared toward developers who are new to Offline First. The talk, recorded at the We RISE Tech Conference in June 2018, covers how PouchDB, CouchDB, and service workers make it possible to build an offline-capable app with only client-side code.

Tutorial Series

In preparation for my talk, I wrote a 2-part, beginner-friendly tutorial series that walks readers through the steps I took to build my first offline-capable Progressive Web App using only client-side code. You can read both articles on Medium:

• Enabling offline data storage, sync, and sharing with PouchDB and Apache CouchDB™
• Ensuring quick page loads — offline or not — with a service worker

Offline First Functionality

The Offline First approach to web development plans for the most constrained network environment first, enabling a great user experience even while the device is offline or has only an intermittent connection, and providing progressive enhancement as network conditions improve. This design also makes apps incredibly performant (fast!) on the best of networks.

PouchDB, CouchDB, service workers, and a web app manifest are the primary tools that turn this simple project management tool into a high-performance, offline-capable Progressive Web App.

Data stays safe on your device, even while it's offline. Persistance of data entered by the user is achieved using the in-browser database PouchDB. This will allow your data to survive between sessions and when disconnected from the network. (Whether you're offline at an event or back in the office on your trusty Wi-Fi, you can still add new projects and modify existing ones.)

Data syncs between devices when a connection is available. When a connection is available, the data is synced from the local device to a CouchDB database in the cloud, and can thus be shared across multiple devices or users. (Managing a project with a partner or need to access the data on both your phone and your laptop? No problem!)

The app loads quickly, even while offline. To keep the app itself functional while offline, a service worker is used to cache page resources (the most important HTML, CSS, and JavaScript files) when the web application is first visited. Each device must have a connection for this first visit, after which the app will be fully functional even while offline or in shoddy network conditions. (No more error messages or frustratingly slow page loads.)

The app can be installed on a mobile device. In combination with the service worker used for caching, a web app manifest containing metadata allows the app to become a Progressive Web App, an enhanced website that can be installed on a mobile device and can then be used with or without an internet connection. (It's secretly still a website, but you can access it through one of those handy dandy little app icons on your homescreen!)

Explore the code in my GitHub repository, read my tutorials, or watch my conference talk to see how the Offline First design is applied.