How to include a generated PWA manifest into a precache-manifest rendered by Workbox

4
votes

I have a Webpack config file that uses a webpack-pwa-manifest plugin (https://github.com/arthurbergmz/webpack-pwa-manifest) to generate a PWA manifest file. The manifest file name is manifest.hash.json, where "hash" is a value dynamically generated on every build.

I'm also using an InjectManifest plugin of Workbox (https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) to render a precache manifest that will then gets injected into a service worker file.

Here is a "plugins" section of my Webpack config file:

      plugins: [
        new CleanWebpackPlugin([ path.join(destDir, '*.*') ], {
        allowExternal: true,
        exclude: [],
        verbose: true,
        dry: false
      }),
      new MiniCssExtractPlugin({
        filename: 'style.[hash].css'
      }),
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
        template: path.join(projectRoot, 'src/index.html')
      }),
      new WebpackPwaManifest({
        name: 'Test PWA',
        short_name: 'Test PWA',
        fingerprints: true,
        inject: true,
        lang: 'en-US',
        start_url: 'https://localhost:8120/index.html',
        display: 'standalone',
        theme_color: '#777777',
        background_color: '#333333',
        icons: [
          {
            src: path.join(sourceDir, 'images/icon.png'),
            sizes: [36, 48, 72, 96, 144, 192, 512],
            destination: 'icons'
          }
        ]
      }),
      new InjectManifest({
        swSrc: path.join(projectRoot, 'src/sw.js'),
        swDest: 'sw.js',
        importWorkboxFrom: 'local',
        globPatterns: ['dist/*.{json,js,html}']
      })
    ]

The problem is I cannot find a way to add a rendered manifest.hash.json into a precache manifest generated by InjectManifest. Is there any way to make them play nicely together or is it not possible?

3
webpackworkbox
If you can give the manifest a chunk name, you should be able to add the chunk of the workbox webpack plugin. – Matt Gaunt

3 Answers

2
votes

I had the same problem with commons chunk named manifest.<chunkhash>.js that wasn't included in the generated precache manifest.

The solution was to add exclude option to InjectManifest plugin in webpack config file, since the default value for it is (according to docs): [/\.map$/, /^manifest.*\.js(?:on)?$/].

plugins: [
  new InjectManifest({
    swSrc: path.join(projectRoot, 'src/sw.js'),
    swDest: 'sw.js',
    importWorkboxFrom: 'local',
    exclude: [] // <-- Add this
  })
]
0
votes

Somehow file generated by webpack-pwa-manifest plugin isn't included in webpack build pipeline (maybe a bug), so InjectManifest plugin can't add all the assets on the fly.

There is workaround to precache additional assets using globDirectory and globPatterns options:

new InjectManifest({
  swSrc: './dist/sw.js',
  globDirectory: '.',
  globPatterns: ['dist/manifest.*.json']
})

In this config example, plugin gets all bundles and your additional manifest file as external file. But webpack gives you a warning:

You're using the following Workbox configuration options: [globDirectory, globPatterns]. In Workbox v3 and later, this is usually not needed.

You should use it only to assets is that is not performed by webpack. Check the explanation in docs.

In your particular config the problem is that you missed globDirectory: '.' option and plugin can't find the file(s).

I hope it's still relevant and help you.