Building Web Apps that Work Everywhere

Chapter 5. Offline

We live in a disconnected & battery powered world, but our technology and best practices are a leftover from the always connected & steadily powered past.

Offline First

As discussed in the previous chapter, good web performance benefits all of our users, especially those on slow connections. But often, users are accessing our sites in variable network conditions. A person may pick up her phone and begin browsing through our site at home over WiFi, but open the browser again offline on the subway, only to be presented with dreaded offline error messages.

Even more infuriating are the times where we appear to be connected to the network, but assets are failing to load. This experience is something that developer Jake Archibald has termed Lie-Fi. Everything seems like it should be working, but is slow to load as assets feebly connect to our struggling signal.

There are a number of potential reasons, besides a poor signal, that a user may experience poor network conditions, such as:

• An overloaded cellular network
• Problems with the website’s server
• A misconfigured proxy
• Being nearby a previously accessed WiFi network

Creating offline experiences for our users can provide us the ability to brand and give better error messaging to our users on a poor connection, provide limited functionality of our sites to offline users, or even create seamless offline experiences. As a bonus, offline web applications work blazingly fast, providing a benefit to users on all types ...