Lighthouse PWA error on Netlify using gatsby-plugin-offline

I’ve been at this for some time now and cannot for the life of me figure out what is going wrong. I’ve been attempting to improve the performance of my Netlify hosted Gatsby.js site (abarnwell.dev) and I’ve been using Google Lighthouse results to do so.

I’ve made significant progress but the one thing I cannot make green is the Progress Web App enabled site indicator.

Screenshot 2020-04-24 at 09.55.45

After some investigation, I’ve found the following errors specifically tied to why my site is not being considered by Lighthouse to be PWA enabled. The two issues Lighthouse complains about are:

  • start_url in the manifest does not respond with 200 as it times out
  • Does not respond with a 200 when offline (I suspect this stems from the first issue whereby it’s timing out)

I did some digging and access my manifest being served by Netlify (here) and as expected, it is present, has a start_url and it’s set the root of the website.

I also double checked I had a valid sw.js and that is also present at the root (here).

This got me thinking. Perhaps the gatsby-plugin-manifest and gatsby-plugin-offline plugins I was using were not configured or installed correctly. So I’ve run countless production Gatsby builds and run them locally (the same build command I run on Netlify), only to find Google Lighthouse reports that I have a fully PWA enabled site. Furthermore the manifest files look identicle and in particular, the start_url is still just the root (/).

To add to the complexity, when I monitor the network traffice on my Netlify site, Google Chrome dev tools is clearly reporting that there is a service worker installed and it’s interacting with it to fetch and download images, etc…

My last place to look is Netlify as something is timing out that shouldn’t be. Could it be I’m not including some redirects that I should be including in my Netlify config and/or some of the post processing features I have enabled on Netlify? Namely the following:

  • Pretty URLs
  • Bundle & Minify CSS
  • Minify JS
  • Loessless image compression
  • Prerender

I’m open to all suggestions at this point. I’m hoping someone else has got Gatsby sites working as PWA’s in Netlify. It’s frustrating if Google is not reporting on the existance of a PWA as it will effect how Google interacts with my site.

Strangely enough, I’ve started having mixed success now, as in sometimes it reports that it’s a PWA and other times it doesn’t.

Very odd.

hey @abarnwell, this isn’t a direct answer to your question, but if you run a search for gatsby-offline-plugin you’ll see that there are definitely some strange behaviours with that plugin - build errors mostly. i wonder if these things are related.

Thanks for responding perry, I had a look and there generally seems to be a number of issues so will just resign myself to expect it to be flakey.

1 Like