Pwa- Service worker not work

[ohrrkan]

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/'), } };

[alexander-akait]

Please create reproducible test repo, hard to say what is wrong

[thebat93]

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]

@thebat93 Do you use plugin for service worker code generation or it is self-created code?

[thebat93]

@alexander-akait it is a self created code. For debug purposes it has only install, activate, fetch hooks with logs. The file is used as one of two entries for webpack. Also I use this config:

  optimization: {
    // runtimeChunk: 'single',
    runtimeChunk: {
      name: (entrypoint: any) => {
        if (entrypoint.name.startsWith("service-worker")) {
          return null;
        }

        return `runtime-${entrypoint.name}`;
      },
    },
    splitChunks: {
      chunks(chunk) {
        return chunk.name !== "service-worker";
      },
    }
  }

[thebat93]

Here's my message in another issue

[thebat93]

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]

@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]

Confirm what you say @thebat93 . Your solution to bypass the issue on pack-dev-server work :

 optimization: {

        splitChunks: {
            chunks(chunk) {
                return chunk.name !== "sw";
            },
        },

    },

Thanks