service-worker.js not receiving message - reactjs

Question

Im trying to get my service-worker.js to execute skipWaiting when a new service worker gets uploaded. However, im not successful in performing this. Please note that my main framework is reactjs
Tried following this guide (https://deanhume.com/displaying-a-new-version-available-progressive-web-app/) and adapting the code to mine but wasnt successful either.
Currently Im only able to receive notifications that the a new service worker is available, this was observed and confirmed under the browser-dev-tools as well.
Here's my code:
index.js
import "#babel/polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
function check() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(reg => {
reg.addEventListener('updatefound', () => {
// A wild service worker has appeared in reg.installing!
const newWorker = reg.installing;
newWorker.addEventListener('statechange', () => {
// Has network.state changed?
switch (newWorker.state) {
case 'installed':
if (navigator.serviceWorker.controller) {
// new update available
window.serviceWorkerCallback('new_version')
newWorker.postMessage({ action: 'skipWaiting' });
console.log("New Version!")
}
// No update available
break;
}
});
});
});
};
}
check();
window.serviceWorkerCallback('new_version') from index.js activates _serviceWorkerCallback function under App.js which triggers my reload command. After refreshing my page, I could see that the new service worker is still waiting. Below is my reload command code:
App.js:
_serviceWorkerCallback = (state) => {
if (state === 'new_version') {
this.setState({
hasNewVersion: true
});
}
}
_renderNewVersion = () => {
return (
<Snackbar
style={{ marginBottom: 16 }}
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
open={this.state.hasNewVersion}
message={<span>A new version is available</span>}
action={<Button color="secondary" size="small" onClick={this._handleRefresh}>Refresh</Button>}
/>
);
}
_handleRefresh = (value) => {
this.setState({
hasNewVersion: false,
});
window.location.reload();
}
Here is service-worker.js :
self.addEventListener('message', event => {
console.log('Skipping');
if (event.data.action === 'skipWaiting') {
self.skipWaiting();
}
});
self.addEventListener('fetch', function (event) {
console.log('Fetching');
event.respondWith(
caches.match(event.request)
.then(function (response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
_handleRefresh = (value) => {
this.setState({
hasNewVersion: false,
});
window.location.reload();
}
Im expecting newWorker.postMessage({ action: 'skipWaiting' }); to trigger event.data.action === 'skipWaiting' but nothing happened and no log messages has been observed from the console.
Both files are residing under the same directory.

Answer 1

In the tutorial you linked, the code includes a call to reload the page but I do not see that in yours.
The reload is important because it allows the newly activated service worker to become the active worker once the page calls register. Alternatively you can use Clients.claim() to let your new service worker take immediate control of existing pages.