The Web is Moving Offline: How Progressive Web Apps Help Users and Businesses

Written by in Technology on

Every company is now a tech company. But your company’s website relies on the least reliable central point of failure to operate — the network.

Network connections are fragile. Aside from obvious areas of low connectivity, a storm can wipe out electricity, or a cloud provider can shut down. Even more frustrating; users are often stuck in infamous "Li-Fi zones" where their phone is just close enough to the WiFi to trigger a connection and switch off 3G/4G, yet they aren't close enough to the WiFi to get any use out of it.

If any of the above happens while a user is trying to access a service on your site, or just engage with content you’ve created, they’re out of luck. Users that have a more difficult time getting what they need from your website will be less likely to come back. This results in a drop of re-engagement rates and drains revenue from your business.

Lucky for you, it's 2016, and the web has come a long way. Powered by advancements in JavaScript called Service Workers, we can now make Offline-First sites that function without any network connectivity. We can even build Progressive Web Apps — a paradigm in which your site operates as if it's a native application with included offline capability.

When Flipkart, India’s largest ecommerce site, replaced their mobile website and native app with a Progressive Web App with offline functionality, users started spending 3x more time on site, using 3x lower data, had a 40% higher re-engagement rate, and a 70% greater conversion rate.

The Web is moving offline, so optimize accordingly or risk leaving your users in the dark.

Servers go down, databases are fragile.

Lack of communication is dangerous. Imagine that you run a website which provides information on hiking trails. Now imagine that a hiker had read about an exciting path. After a few miles of hiking, the unfamiliar path becomes less clear. So the hiker pulls out a phone to load up the information from your site again. Unfortunately, nothing happens because the hiker isn't connected to the internet anymore. Communication always needs to be available.

As mobile devices become cheaper and more available, there will be more devices connected to the internet. The increase in mobile device usage yields more people trying to connect to your site. To help minimize the possibilities of users not being able to connect to your site, you should build your website to work offline and be fault tolerant to servers going down.

Make Amazing UX

Helpful offline web apps are being used all around the world to solve problems that traditional client-server models cannot solve.The web is moving offline. Building your site to work offline means you'll be retaining users, sending fewer bytes from your servers, and you'll have a greater surface area to make that sale or help more people. Greater user experiences can be created on sites that works offline when compared to sites that require network connectivity.

For instance, ponyfoo will store each visited article on your device. You can reread any of it's articles with your phone on airplane mode on Android. is a web app that lets you edit markdown offline. Neighbourhoodie Software even helped eHealth Africa build an offline web app with peer-to-peer data replication to help track down the Ebola virus in low-connectivity areas of Africa! These are just a few examples of websites and web apps that think of network connectivity as an enhancement, not a guarantee.

Recipe for great user experience:

  • Check the device for a cached offline site.
  • If the site is cached, load it instantly without a network request.
  • Fetch for new data on the server after the page loads.
  • Give the user a toggle to see any new content.

This recipe allows the user to read their content instantly, regardless of network connectivity. It also gives users a sense of control over their experience, e.g. “There have been updates made to this page since your last visit, would you like to refresh?”

Faster page loads means more revenue for content publishers. Metrics and case studies show higher engagement rates and revenue from sites that focus on performance and user experience.

How it Works

Building websites that work offline is largely made possible due to an emerging technology called Service Workers. A Service Worker is primarily a bit of JavaScript that contains the ability to test for an internet connection, perform operations in the background, and selectively cache data to the user's device. The Service Workers API is available in the most modern browser except for Edge, though it's coming soon. Using tools such as Service Workers enable capabilities that match those of native applications. Visiting the URL is analogous to how native apps get installed. The user has to download the app from the internet before they can use it offline. Websites are even faster at downloading, though. Rather than going to an app store, you're going to a URL.

Unfortunately, iOS users will not be able to visit your site while offline. This is because web browsers on iOS need to use Apple's WebKit, which doesn't support Service Workers.  However, I would propose that we build websites to use Service Workers regardless of iOS users not being able to benefit from that work. Eventually, enough sites will be working offline for Apple to no longer be able to ignore the need for that support on iOS.

Need a website that works offline but want someone else to handle the heavy lifting? We'd love to help you!

Discuss on Twitter