arg0

Making this blog work offline

Published on
Last updated on

Note: This blog no longer works offline! It was hard to bust the cache, and the plugin doesn't give enough control over that, so until I can make it work well I've disabled it.

A Progressive Web App (PWA) is a website that uses service workers to intercept network requests and cache results. If the user's device goes offline, then we can serve these cached results to the user in order to make sure that they can still access the content even when offline.

If you put your device in airplane mode right now and refresh this page, it should still work. That's because it's using eleventy-plugin-pwa. It took me around half an hour to set everything up the way I wanted it to.

  1. npm install --save eleventy-plugin-pwa and follow the instructions in the readme.
  2. Create a manifest.json file in the root of the eleventy project, following the guidelines here.
  3. Add the following to your .eleventy.js file:
config.addPassthroughCopy("manifest.json");

Now you will be able to retrieve the file from <your domain>/manifest.json. You can test that it's working by opening chrome dev tools and running a lighthouse audit. That's it!

Back Home | Back To Top | View on GitHub