Offline First Blog Tracker

A project management tool built as an offline-capable Progressive Web App

Project Background

The Offline First Blog Tracker is a Progressive Web App built to track the status of blog posts in the works for the Offline Camp Medium publication, of which I'm a managing editor. I developed this offline-capable project management tool as a capstone project for a graduate-level JavaScript course at Harvard Extension School in 2017. The app uses the in-browser JavaScript database PouchDB for client-side storage, syncing to a remote IBM Cloudant database to share data between users when a network connection is available. These two NoSQL document stores work together using the Apache CouchDB Replication Protocol to manage the sync process and avoid conflicts. Critical page resources are cached using service workers to ensure the page can be loaded while offline.

The GitHub repo for this project includes detailed instructions for running the app on your own machine. Alternatively, you can view my conference talk that walks through the app and the code behind it, or read my 2-part tutorial series on buiding Offline First applications.

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:

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.

View all projects

How can I help?

Looking for a front-end developer to build your next web app? Need help growing the developer community that uses your technology? Let's talk.