webpack / webpack/webpack-dev-server

Pwa- Service worker not work

Open
#4,540 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
7.8k
Forks
1.5k
Avg merge
5h 32m
Merged PRs (30d)
6

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue using the shown service-worker registration, sw.js install handler, and webpack-dev-server serverConfig with devMiddleware.writeToDisk enabled. Compare the dev-server behavior with another web server; done means the service worker install event runs and logs “Hello” under dev-server as described.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, webpack
Domain
devtools, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.