Remove Service Worker - Gatsby
The Gatsby offline plugin is really handy right up until you don’t want it any more!
I switched my main site over to Toast from Gatsby and hit a bump when it came to removing the old Gatsby site because it used a service worker meant that the new site had to remove the installed service worker.
How I got round it was taking the sw.js
file from the
gatsby-plugin-remove-service-worker
plugin and added that to the
build script of my new site.
A good place to start is if you have the offline plugin installed
already is to also have the gatsby-plugin-remove-service-worker
ready to go as well.
This is what my gatsby-config.js
looked like when I’d finished:
// {
// resolve: `gatsby-plugin-offline`,
// options: {
// precachePages: [`/2020/*`, `/2021/*`],
// },
// },
`gatsby-plugin-remove-serviceworker`,
// {
// resolve: `gatsby-plugin-manifest`,
// options: {
// name: siteMetadata.title,
// short_name: siteMetadata.title,
// start_url: `/`,
// background_color: `#336699`,
// theme_color: `#663399`,
// display: `minimal-ui`,
// icon: `static/favicon.png`, // This path is relative to the root of the site.
// },
// },
So remove gatsby-plugin-offline
and gatsby-plugin-manifest
and
make sure gatsby-plugin-remove-serviceworker
is enabled.
If I go to https://scottspence.com/sw.js
I can see the script that
is in the gatsby-plugin-remove-serviceworker
package. What I need to
do now is mirror that on my new site.
Here’s that script:
// sw.js
self.addEventListener('install', function (e) {
self.skipWaiting()
})
self.addEventListener('activate', function (e) {
self.registration
.unregister()
.then(function () {
return self.clients.matchAll()
})
.then(function (clients) {
clients.forEach(client => client.navigate(client.url))
})
})
I’ve taken that sw.js
script from the
gatsby-plugin-remove-serviceworker
package and added it to the root
of my project.
I have a postbuild
script I run to create the sitemap and
robots.txt
file amongst other things so I’ll add it in with that.
In the npm
script I’ll move a copy of the sw.js
file to the
public
folder, that’s where the site build output goes:
"sw": "cp sw.js public/"
Then when the new site spins up it will remove the old service worker.
There's a reactions leaderboard you can check out too.
Analytics Information