How to remove a service worker from clients browsers when index.html is taken from service...

I have a website that was once developed with react, the developers added service-worker.js to the project and tha registred the service worker in the useres browsers.

My setup is NGINX as server, cloudflare as reverse proxy and application gateway.

Here is the code for the service-worker.js

const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);

export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
return;
}

window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

if (isLocalhost) {
checkValidServiceWorker(swUrl);
navigator.serviceWorker.ready.then(() => {
});
} else {
registerValidSW(swUrl);
}
});
}
}

function registerValidSW(swUrl) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
console.log('New content is available; please refresh.');
} else {
console.log('Content is cached for offline use.');
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}

function checkValidServiceWorker(swUrl) {
fetch(swUrl)
.then(response => {
if (
response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1
) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
registerValidSW(swUrl);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}

export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}


We developed the website from scratch with Angular now, And we uploaded the new build to server.

The problem When the users navigate to my website, They keep getting the old website from the service worker that is registered in the browser.

I looked in to all of the answers for similar questions but none of them answered/fixed my issue. They all talk about adding new code to the website that will remove the service worker. But these files are never served, the filex are taken from the service worker.

My setyp is: Server: NGINX Reverse Proxy: Cloudflare Application Gateway: Cloudflare.

I tried adding headers to delete the service-worker.js I tried adding a new service-worker.js file and unregistering the service worker.

But the issue is that my code is never fetched because the service worker takes the index.html from cache.

I am expecting the new files to be downloaded from server (the angular code) and not take the react code from cache (service-worker)

Continue reading...