Repository navigation
Pwa- Service worker not work #4540
Description
Bug report
The service worker not work with webpack DevServer also when dev-server is configure in write memory like specify in :
(https://webpack.js.org/configuration/dev-server/) writes in-memory
Actual Behavior
The service worker is register and activated but event are never trigger. no error
Expected Behavior
Event of service worker should be trigger
How Do We Reproduce?
- Register your service worker :
if ('serviceWorker' in navigator) {
try {
var registration = await navigator.serviceWorker.register('/sw.js', { scope: './' });
var serviceWorker;
if (registration.installing) {
serviceWorker = registration.installing;
console.log('installing : ' + serviceWorker.state);
} else if (registration.waiting) {
serviceWorker = registration.waiting;
console.log('waiting : ' + serviceWorker.state);
} else if (registration.active) {
serviceWorker = registration.active;
console.log('active : ' + serviceWorker.state);
}
} catch (err) {
console.error(err);
}
}
else {
console.error('Service workers are not supported.');
}
- sw.js
self.addEventListener('install', event => { console.log('Hello'); });
with other web server you will have in the console :
active : activated
Hello
but with dev-server only
active : activated
Please paste the results of npx webpack-cli info here, and mention other relevant information
"webpack": "5.74.0",
"webpack-dev-server": "4.10.0"
const serverConfig = { client: { overlay: false, logging: 'error', }, devMiddleware: { writeToDisk: true, }, open: false, https: false, host: '127.0.0.1', port: 5800, hot: true, liveReload: false, static: { directory: path.join(__dirname, 'dist/'), } };
Activity
alexander-akait commentedon Aug 12, 2022
Please create reproducible test repo, hard to say what is wrong
thebat93 commentedon Aug 12, 2022
Are you using multiple entries for app and service worker? If yes, try this solution.
I'm still having trouble with hot reloading though.
alexander-akait commentedon Aug 12, 2022
@thebat93 Do you use plugin for service worker code generation or it is self-created code?
thebat93 commentedon Aug 12, 2022
@alexander-akait it is a self created code. For debug purposes it has only
install,activate,fetchhooks with logs. The file is used as one of two entries for webpack. Also I use this config:thebat93 commentedon Aug 12, 2022
Here's my message in another issue
thebat93 commentedon Aug 12, 2022
And here are the errors that I'm getting when I try to change some app code and wait for hot reload. Sorry for spamming.
thebat93 commentedon Aug 12, 2022
@alexander-akait here is a minimal test repo with the issue: https://github.com/thebat93/sw-webpack-hmr
I mentioned solutions that I tried in webpack config file.
ohrrkan commentedon Aug 14, 2022
Confirm what you say @thebat93 . Your solution to bypass the issue on pack-dev-server work :
Thanks
Anubhab2003 commentedon Jan 3, 2025
Hey I am Interested in contributing this issue, How to get started ?