InjectManifestPlugin with local workbox not gets served over webpack-dev-server

[0nlyP2P]

I have the following webpack config

new InjectManifest({
    importWorkboxFrom: 'local',
    swSrc: './app/src/service-worker.js',
    include: /\.(html|js|svg)$/
})

When I run the build all workbox files are in the folder workbox-v3.4.1

But with webpack-dev-server I get a 404 when the service-worker.js tries to load

https://localhost:8080/workbox-v3.4.1/workbox-sw.js

As you can see I use workbox-webpack-plugin version 3.4.1

[jeffposnick]

When using the local Workbox libraries, depending on your configuration, you may need to follow the steps at https://developers.google.com/web/tools/workbox/modules/workbox-sw#using_local_workbox_files_instead_of_cdn inside of your app/src/service-worker.js file to set the correct prefix that corresponds to the URL structure that webpack-dev-server uses.

Does tweaking that setting help?

[0nlyP2P]

Thanks for your reply :)

My app/src/service-worker.js content:

workbox.skipWaiting();
workbox.clientsClaim();

workbox.core.setCacheNameDetails({
    prefix: 'sw-cache',
    suffix: 'v1',
    precache: 'precache',
    runtime: 'runtime'
});

workbox.precaching.precacheAndRoute(self.__precacheManifest);

The InjectManifest plugin transforms it to this

importScripts("/precache-manifest.54d94be072048053343ed6883bb58326.js", "/workbox-v3.4.1/workbox-sw.js");
workbox.setConfig({modulePathPrefix: "/workbox-v3.4.1"});
workbox.skipWaiting();
workbox.clientsClaim();

workbox.core.setCacheNameDetails({
    prefix: 'sw-cache',
    suffix: 'v1',
    precache: 'precache',
    runtime: 'runtime'
});

workbox.precaching.precacheAndRoute(self.__precacheManifest);

My webpack-dev-server serves over https://localhost:8080.

When the service worker tries to load workbox via this url:

https://localhost:8080/workbox-v3.4.1/workbox-sw.js

But the browser gets a 404 error for this url.

When I build the project (Only using webpack, not the dev server) and upload it to my production server, it loads workbox via this url (I replaced the url with example.com here):

https://example.com/workbox-v3.4.1/workbox-sw.js

It works fine.

I think the whole workbox library gets not served via the webpack-dev-server and only copied in when I build the project. I use the same webpack config for the dev server and build.

[Dabolus]

Same issue here. I think the problem is that Workbox is downloading its files on the real filesystem instead of using memory-fs. In fact, during development I get a build directory (that is my Webpack config destination folder) containing only Workbox files, while everything else is correctly using memory-fs:

Probably this is due to this file, that simply copies Workbox files on the filesystem.

By the way, the issue seems to be only relative to the local option. When importing from cdn everything works like a charm (including the precache manifest, that gets correctly generated into memory-fs)

EDIT:
A simple workaround until the issue gets fixed is to set importWorkboxFrom to disabled and then to copy Workbox files manually using copy-webpack-plugin in your Webpack config.

[jeffposnick]

Thanks for debugging further. Moving importWorkboxFrom: 'local' over to the webpack asset pipeline is tracked in #1338, and is planned for the future v4 release.

I'm going to close this in favor of that issue.