GenerateManifest in workbox-webpack-plugin

[ujjwalmishra09]

Library Affected:
workbox-webpack-plugin

Issue or Feature Request Description:
Like workbox-webpack-plugin~InjectManifest, can we have workbox-webpack-plugin~GenerateManifest?

It should have one callback function with following arguments.

1. webpack plugin callbacks arguments (compiler, compilation)
2. generated-precahce-manifest-filename

Now developer can inject precahce-manifest-filename in compiled service worker file according to his choice.

[jeffposnick]

Thanks for the request!

Can you share some more background on what benefits that would offer vs. using InjectManifest, which does allow you to add the manifest information to what could potentially be a compiled service worker file? Perhaps there are some improvements to the InjectManifest use case that would make it easier to accomplish what you're looking to do, without having to add support for a brand-new mode.

[ujjwalmishra09]

My webpack configuration:

var config = {
     entry: {
         'service-worker': './src/js/service-worker.js'
     },
     output: {
         path: path.resolve(__dirname, buildOutputPath),
         publicPath: publicHost + '/static/',
         filename: './js/[name].[chunkhash].js',
         chunkFilename: './js/chunk.[chunkhash].js'
     },
     plugins: [
        new WorkboxPlugin.InjectManifest({
            swSrc: './src/js/service-worker.js'
        })
     ]
 }

In above webpack config, I am getting two service worker files.

1. Generated by webpack with hash key (minified service worker)
2. Generated by webpack-workbox-plugin

i don't want 2nd one file but want to inject generated precahce-manifest file name in first one.

[Jamiewarb]

Try specifying a swDest as well as an swSrc. Then make sure webpack is only minifying the destination file, and not the source file. The source will be used as a template for the destination file, having the manifest injected into it then stored in the destination, which can then be minified or whatever with webpack.

E.g. my config is:

new WorkboxPlugin.InjectManifest({
    swSrc: `service-worker-template.js`,
    swDest: `sw.js`,
    include: [/\.css$/, /\.js$/],
})

This grabs a template SW file from the root of my site /, where I've written all of my service worker logic, called service-worker-template.js. It then imports the workbox library and my manifest file, and outputs both this and the precache manifest to my /public directory. Workbox can then do what it wants with it there.

You also want to make sure your service worker has the same file name when you update it, so you're not versioning it in the filename. You can run into trouble if you change the filename of the service worker, where it won't be able to get to the new one.

[jeffposnick]

In Workbox webpack plugin v5, the swSrc you provide to InjectManifest will be compiled by webpack. I think that takes care of your use case.

[jeffposnick]

This should be addressed by the current Workbox v5.0.0 alpha.