Jeremy Keith gave a talk on how and why you would design and develop sites that can work offline, also known as a progressive web app. He also has a book on this topic if you’d like to read about it in more detail.

You might question, “but why is creating an offline experience important?” Imagine that your users are browsing your site while they’re riding the subway or riding as a passenger in a car that’s driving through the mountains, connectivity will go in-and-out. Or if your users have traveled internationally and don’t have access to data, but, thanks to offline caching, they’re able to use parts of your site.

“A Progressive Web App is a regular website following a progressive enhancement strategy to deliver native-like user experiences by using modern Web standards.” -What is a PWA

Keith created a website to demonstrate how it can look, on your phone go to adactio.com  and then turn airplane mode on. You can still get to every page on this site without wifi or without going to every page beforehand.

adactio.com QR code
Scan this QR code with your phone to open adactio.com, then turn your phone on airplane mode.

Possible with a Service Worker

This is possible with using a web worker, complex things (JavaScript running in the background) are done here without affecting the performance of a page. A service worker is a specific type of web worker, it sits between a website and a server. It is more powerful than a cookie installed on the device, and it has to be https. Service worker has steps involved; first register, then install, activate, and finally update.

Cache Options

Caching will need to be done to store information, and there are three different options to cache: cache first, network first, or cache as you go. Depending on what the goals of the project are, will help you decide which one to use.

Cache first is to try to find the file in the cache first otherwise fetch the file from the network. This option would be good for content that is not updated, ex. Books, where the offline version is fine to be cached.

Network first is when a page is requested try to fetch the page from the network first, otherwise retrieve the offline page from the cache. For most websites, some parts would be fine non-updated, ex. header and footer. Remainder will want to try and fetch network first, otherwise retrieve an offline custom page from cache which can be a branding opportunity.

These are custom pages stored from caching network first

Cache as you go is when a page is requested, try to fetch the page from the network first and store a copy in the cache, otherwise try to retrieve the page from the cache, otherwise retrieve the offline page from the cache. This option can retrieve pages they have visited before instead of nothing, and to save offline option, this is common in podcasts.

These are custom pages showing links a user visited before using cache as you go

Web App Manifest

Web app manifest is a file to store metadata associated with a web application. This metadata could include the web application's name, links to icons, etc. Common practice is to note that pages are:

  • Responsive
  • First load fast even on 3G
  • Site works cross-browser
  • Each page has a URL
  • Page transitions don’t block on the network.

For a responsive web app, all that needs to be added to that list is:

  • Site is served over HTTPS (to be secure)
  • All app URLs load while offline
  • Metadata provided for Add to Home screen (seen on Android phones).

Progressive Web App

There you have it, to create an offline experience, otherwise known as a progressive web app, you’ll need it to be secure, use a service worker, and have a web app manifest.

HTTPS + service worker + web app manifest = progressive web app

More info on AnEventApart

AnEventApart has held a conference four times a year for fifteen years now and is still ongoing, the topics range from design, code, and content and are mainly intended for those in UX and front-end experts. You can watch past talks, read their articles, and more resources are listed, and find out about future conferences on aneventapart.com.