Gatsby: How to remove Service Worker created by gatsby-plugin-offline?

[pedromartinez11]

I would like to remove the service worker on my site.
I removed gatsby-plugin-offline from my gatsby-config and tried doing this in my index page:

console.log('removing service worker')
if (typeof window !== 'undefined') {
  if ('serviceWorker' in window.navigator) {
    window.navigator.serviceWorker.ready.then(registration => {
      registration.unregister();
    });
  }
}

But I don't even see removing service worker in my console logs. I think it's because the old JS is still being served?

[KyleAMathews]

Possibly — try opening the site in an incognito window.

[KyleAMathews]

But you'll probably need to keep shipping the SW while also removing it with the above code as SW don't update unless you ship a new one.

Google around for patterns around removing a SW — not an area I'm expert in.

[ahmedelgabri]

@pedromartinez11 you found a solution for this? I'm having the same problem

[pedromartinez11]

@ahmedelgabri , no, I ended up just re-adding the SW.

[ahmedelgabri]

This might work

if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
  window.navigator.serviceWorker.getRegistrations().then(registrations => {
    registrations.forEach(r => r.unregister())
  })
}

[pedromartinez11]

When I tried something similar, my "new" JS was never delivered to the browser because the SW cached all previous files. So, the new code that removed the SW was never executed.

Maybe I was putting the "remove SW" code in the wrong place though.

[ahmedelgabri]

Maybe you need to add this code while you still have the plugin so the SW tries to fetch the new changes & then it will be removed.

[ahmedelgabri]

@pedromartinez11 I found a way to do this, don't put the script inside your gatsby files, put the script in static this way it will not be part of the bundle that Webpack creates & it won't be part of the SW. This way the script will run for sure.

Just put this in your layout or something

{/* assuming you have the script directly inside static/ */}
<script src="/script.js" />

You can also add it as an inline script too, that should work too.

[benedfit]

Check out https://github.com/NekR/self-destroying-sw/tree/master/packages/gatsby-plugin-remove-serviceworker

[Lidofernandez]

Hi I've added this plugin to my gatsby project but still I need to reload a couple of time to make sure that the sw is gone: maybe I'm doing something wrong?

{
    'gatsby-plugin-catch-links',
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    'gatsby-plugin-remove-serviceworker',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'img',
        path: 'src/img/',
      },
    },
}

[pungggi]

@Lidofernandez if i understood it right the plugin helps you naming the service worker you still need to add a script to remove it?

To do it properly, as special ServiceWorker has to be constructed. It has to be put in the place of the previous broken/unwanted ServiceWorker, with the same name.

Note: If the previous ServiceWorker file was cached with HTTP headers, the update may take some time depending on how long the caching duration is set, but not more than 24 hours.

[Lidofernandez]

Hi @pungggi yeah in order to remove it completely I added the script as well.

[deadcoder0904]

Probably a noob mistake but I had a console error The installing service worker became redundant. because I was applying gatsby-plugin-remove-serviceworker after gatsby-plugin-offline like:

[
`gatsby-plugin-manifest`,
`gatsby-plugin-offline`,
`gatsby-plugin-remove-serviceworker`
]

So it was installing new Service Worker first with gatsby-plugin-offline & then removing it with gatsby-plugin-remove-serviceworker. That's why the error.

To remove it just put gatsby-plugin-remove-serviceworker first like so:

[
`gatsby-plugin-remove-serviceworker`,
`gatsby-plugin-manifest`,
`gatsby-plugin-offline`
]

[neonguru]

@deadcoder0904 I tried to put gatsby-plugin-remove-serviceworker before the others and the sw.js file was unchanged after the build. I then put it after the others and sw.js was replaced with the gatsby-plugin-remove-serviceworker's sw.js file as expected.

In the end, I removed the others and left just gatsby-plugin-remove-serviceworker.

The console error confirms the service worker is redundant as desired.

[digilockhub]

@neonguru Hi.. Having a hell of a time trying to remedy my issue. My content is cached after initial upload to server. I'm trying to follow thread but not having much luck... I'm assuming my problem has to do with SW. Ive added plugin-remove-serviceworker

plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-remove-serviceworker',
{
resolve: gatsby-plugin-postcss-sass
},
{
resolve: gatsby-plugin-sitemap
},

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `src`,
    path: `${__dirname}/src/`
  }
},
`gatsby-transformer-sharp`

]

Now just getting blank page with no content at all. Do I need manifest and offline plugins too?

[nsebhastian]

@Lidofernandez hello, May I know where did you put the script file?

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[valayd]

I tried everything mentioned here but site still loads older version. In Chrome Incognito it works fine. Any workaround available ? As The site is still in development and each time I need to check updates in Incognito mode.

[davidbailey00]

To remove the service worker created by gatsby-plugin-offline, you should remove this line entirely from your gatsby-config.js and replace it with gatsby-plugin-remove-serviceworker (after installing this with Yarn/NPM). See here for more info.

When testing your site before deployment, this is unnecessary; you can use the Chrome console to quickly clear the service worker from your site:

(console -> Application -> Clear storage -> Clear site data)

[ajayns]

What if not using Gatsby for my updated site. In that case how do I remove the service worker? @davidbailey00 @NekR

[tkhquang]

What if not using Gatsby for my updated site. In that case how do I remove the service worker? @davidbailey00 @NekR

@ajayns Have you found the solution for this? My app keeps using the old gatsby version instead of my new Vue based version.

[davidbailey00]

@ajayns @tkhquang I no longer work at Gatsby but you can take a look at this: https://github.com/NekR/self-destroying-sw (put it in /sw.js since that's where Gatsby has its service worker)

[tkhquang]

@ajayns @tkhquang I no longer work at Gatsby but you can take a look at this: https://github.com/NekR/self-destroying-sw (put it in /sw.js since that's where Gatsby has its service worker)

Thank you, it seems to work!

[ajayns]

Thanks @davidbailey00 that worked. The issue was that the code needs to be in the exact path and filename that Gatsby previously used