Turning a Gatsby Website into a PWA

Turning this website into a PWA was a bit trickier than normal due to not fully understanding how Gatsby and Stackbit compiled the web pages.

The major stumbling block I came across was registering the service worker. Not knowing where to enter script into Gatsby and through using the pwabuilder.com https://www.pwabuilder.com/ suggested code I was stumped for a while.

Following these instructions from the pwabuilder website for building a PWA https://github.com/pwa-builder/pwabuilder-web/blob/V2/src/assets/web/next-steps.md I needed to add this code to the HEAD section to register the service worker.

<script type="module">
   import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
   const el = document.createElement('pwa-update');
   document.body.appendChild(el);
</script>

Reading this article https://www.stackbit.com/docs/knowledge-base/analytics/ I found out that to add code to the HEAD section of the website you need to add it to Netlify by adding a snippet to the Post Processing section and using the insert before </head>.