Resilient offline applications

When you hear somebody mention Progressive Web Applications, there's a good chance that the first thing that pops into your mind is offline applications. This is really one of the main selling points of PWAs. Even though there are a lot of other benefits to PWAs, the ability to build apps that you distribute through the web, but have the resilience of native applications is simply great.

While many people talk about offline first, what we often want is to build an application that is functional regardless of network conditions. It should be fast when connected, as fast as possible when experiencing less than ideal network conditions and not break when offline.

When building PWA, there are two things we need to consider in order to build network resilient applications: ServiceWorker and App Shell.

ServiceWorker

A ServiceWorker is a JavaScript file that sits between your application and the network. You can program it to cache resources and intercept network requests. By configuring a ServiceWorker properly, you can cache essential resources while the user is online and then fall back on them if a user experiences connection issues. ServiceWorkers can handle an entire application or only parts of it, depending on the scope that you register it in.

See the page on caching strategies on more information on how you can design your application to deal with network issues.

App Shell

Progressive Web Applications often utilize what's know as an App Shell pattern. The App Shell is the bare minimum HTML, JavaScript and CSS that is need to show the static parts of the application. This usually includes things like the header, logo, navigation etc.

By caching the resources needed for the App Shell in a ServiceWorker, your application can load instantly on repeat visits and load at least the basic look and feel even if it's offline. This is similar to how native apps like Facebook and Twitter work.