Workbox: [workbox-webpack-plugin] v3 webpack's output.publicPath option is not added to precache-manifest in service-worker

[akash5474]

Library Affected:
[email protected]

Browser & Platform:
node v8.9.1, npm v5.5.1, Mac OSX 10.13.2

Issue or Feature Request Description:

Inside the generated service worker, the string passed into the importScripts function for the precache-manifest file does not prepend webpack's output.publicPath.

This is relevant in the case where the service-worker needs to be served from a different directory than the precache-manifest.

For example if I want to cache /index.html, this requires the service worker to be served from the root. If the precache-manifest is in a subdirectory then the request would fail.

I've created an example of this scenario and the problem, the link is below:

https://github.com/akash5474/workbox_ex/tree/manifestImportPath

With the following webpack config:

module.exports = {
    entry: './index.js',

    output: {
        path: path.resolve(__dirname, 'dist/static'),
        publicPath: '/static/',
        filename: '[name].js',
    },

    plugins: [
        new WorkboxPlugin.GenerateSW({
            swDest: '../service-worker.js',
        })
    ]

After running webpack, the service worker contains:

importScripts(
  "precache-manifest.c9a80c52428753eb3fa76deb3cb9830f.js",
  "https://storage.googleapis.com/workbox-cdn/releases/3.0.0-alpha.6/workbox-sw.js"
);

I believe the precache-manifest should include /static/ from the publicPath option in the webpack config, resulting in "/static/precache-manifest.c9a80c52428753eb3fa76deb3cb9830f.js".

[gauntface]

cc @jeffposnick

[jeffposnick]

Thanks for reporting this. I'll switch the precache manifest importScripts() URL to use the same prefixing logic used for importWorkboxFrom: 'local':

https://github.com/GoogleChrome/workbox/blob/1eb463e52fdb30d1d3e757d7cc3ac7e5f2154388/packages/workbox-webpack-plugin/src/lib/get-workbox-sw-imports.js#L44-L45

[asolopovas]

Guys I have a question for you, it's great that it is attaching public path but how to operate if I am using something like Wordpress + Webpack + Browser-sync + Workbox? In my case the publicPath: '/wp-content/themes/theme/public/js/' so the default destination of the worker becomes
http://localhost:3000/wp-content/themes/theme/public/js/sw.js so it does not catch any request from / and pretty much makes it useless. Is there a way around it as if I change swDest: from 'sw.js' to '../sw.js', sw.js disappears and can't be loaded.