Making my Gatsby site a PWA

|

2 minute read

Creating a PWA 📲

This isn’t another one of my in 25 minutes articles - it actually took about 5! It’ll take you less to read it.

⁉️

What is a Progressive Web App?

I once gave a presentation on progressive web apps in Budapest, Hungary and Stoke, UK. Let me dig out that slide deck

Ok, it was a few years ago. The slides didn’t help.

So what is a “progressive web app” then? A PWA is a general term for the philosophy toward building websites offline-first and a specific term with an established set of requirements. A progressive web app must:

  • Run under HTTPS
  • Include a Web App Manifest
  • Implement a service worker

HTTPS

HTTPS is an easy one. I use Let’s Encrypt with my Netlify site to provision HTTPS. I think I just pressed a button and waited for it to start working.

Web app manifest

The web app manifest is a JSON file that provides information about your website that allows your site to be installable to your users’ devices. Learn more about what can go into a manifest on MDN.

Service worker

A service worker is a JavaScript script that runs in the background separate from your page, enabling features including caching offline, background sync, and push notifications.

🔌

Gatsby plugins

Standing on the shoulders of Gatsbyagain. In Tech rundown, I mention utilising off-the-shelf, open-source software and services.

“There is a huge community of developers worldwide building software that’s free for personal and commercial use.”

Gatsby has a thriving plugin ecosystem, and I’m using two fantastic plugins to make my PWA life much easier - gatsby-plugin-manifest and gatsby-plugin-offline.

Install them

yarn add gatsby-plugin-manifest gatsby-plugin-offline
# or
npm install gatsby-plugin-manifest gatsby-plugin-offline

Use them

Below is my gatsby-config.js, setting up these plugins.

  1. These fields are mandatory when configuring the manifest plugin
  2. An icon is mandatory - using a single icon entry generates other sizes of icons for you automatically
  3. Make sure this plugin comes after the manifest plugin, so the manifest file gets cached with the service worker
  4. No configuration required for this plugin as default
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-manifest`,
options: {
// [1] mandatory configuration fields
name: `Dan Furze`,
short_name: `Dan Furze`,
start_url: `/`,
background_color: `#f7f7f7`,
theme_color: `#ffc251`,
display: `standalone`,
icon: `src/images/icon.png`,
// [2] creating the icon took me the longest!
},
},
`gatsby-plugin-offline`, // [3]
// no config required [4]
],
}
🕯

Testing the PWA

I’m using Google Chrome to test my PWA.

App install banner

It’s installable!

Application panel

Go to the Chrome developer tools, open the Application tab and select Manifest on the side menu.

App install banner

The manifest report in the application panel

Note: you’ll have to run gatsby build and gatsby serve to test this - for local development the service worker doesn’t kick in, so as not to heavily cache whilst developing.

Lighthouse?

Google Lighthouse is an automated tool for measuring the quality of web pages. It measures performance, accessibility, best practices, search engine optimisation, and most importantly, Progressive Web App functionality.

Lighthouse report

The Lighthouse report

Lighthouse report

The PWA audit report

Not bad for a first pass.

Perhaps I need to focus on performance for a series of articles now

🎉

Voila!

Now my website is a Progressive Web App. Cached and available offline. Ready to read on trains.

Thanks for reading! 👋🏻
If you enjoyed this article, please let me know and share it 🙌🏻