How to Make Your Web Apps Work Offline

The Power of Javascript and Browser Apis

The world is becoming a more connected place —the number of people with access to the internet has grown to over 4.5 billion.

What isn’t captured in that figure is the number of people who have slow or faulty connections. Even in the United States, 4.9 million homes can’t get wired access to connection speeds over 3 Megabits per second.

The rest of the world — those who have access to reliable internet — are still susceptible to connection loss. Some factors that can affect the quality of a network connection include:

• Poor coverage of a provider.
• Extreme weather conditions.
• Power outages.
• Users traveling into “dead zones” such as buildings that block their network connections.
• Traveling on a train and going through a tunnel.
• Connections that are managed by a third party and time-boxed.
• Cultural practices that require limited or no internet access at specific times or days.

Given this, it’s clear that we should be considering offline experiences when designing and building applications.

I recently had the opportunity to add offline capabilities to an existing application using service workers, cache storage, and IndexedDB. The technical work required to make the application work offline boiled down to…