Workbox: webpack-plugin: globDirectory and templatedURLs removed in v5

[rmja]

Library Affected:
workbox-webpack-plugin

Browser & Platform:
all browsers

Issue or Feature Request Description:
globDirectory and templatedURLs are no longer available as parameters to GenerateSW in the webpack plugin in v5. Comparing:

https://github.com/GoogleChrome/workbox/blob/master/packages/workbox-build/src/options/schema/webpack-generate-sw.js

and

https://github.com/GoogleChrome/workbox/blob/master/packages/workbox-build/src/options/schema/generate-sw.js

it seems that globPartial is not in the "allowed" set when using the webpack plugin.

What is the recommended way to "bring back" this feature in v5? I am specifically using this with:

globDirectory: "./",
                templatedURLs: {
                    "Index": ["Pages/Index.cshtml*"],
                },

where Index.cshtml and Index.cshtml.cs is an ASP.Net Core Razor Page responsible for rendering the index page.

I have manually tried and re-add globPartial in https://github.com/GoogleChrome/workbox/blob/master/packages/workbox-build/src/options/schema/webpack-generate-sw.js and it seems to work just fine.

[jeffposnick]

The workbox-webpack-plugin in v5 has moved from a model of generating your precache manifest based on glob patterns to a model where the manifest is generated based on the webpack asset pipeline. In general, we believe that this is the expected behavior for developers who are using a webpack plugin, but it does represent a breaking change.

templatedUrls, unfortunately, never worked for webpack assets (only for file system assets)—this is tracked in #1384.

You can do one of two things:

• Use either workbox-build or workbox-cli instead of workbox-webpack-plugin if you want to go back to the glob-based manifest generation, including templatedURLs. You could add that in as an extra build step after the webpack compilation completes.

• Use the manifestTransforms option in workbox-webpack-plugin to add a ManifestTransform function that will create an additional entry simulating what templatedURLs does (untested, but something along the lines of):

const crypto = require('crypto');
const fs = require('fs');

addIndexEntry(manifestEntries, compilation) {
  // If your Index files are present in compilation.assets,
  // you can use that to generate the composite hash. Otherwise:
  const files = ['Index.cshtml', 'Index.cshtml.cs'];
  let contents = '';
  for (const file of files) {
    contents += fs.readFileSync(file, 'utf-8');
  }
  const md5 = crypto.createHash('md5');
  md5.update(contents);
  const revision = md5.digest('hex');

  const indexEntry = {
    revision,
    url: 'Index',
  };
  manifestEntries.push(indexEntry);
  return manifestEntries;
}

GenerateSW({
  // ...other config...
  manifestTransforms: [addIndexEntry],
})

Hopefully one of those approaches work for you. Sorry about the extra work for this use case in v5.

[rmja]

For any one interrested, I created https://github.com/utiliread/ur-workbox-utils which restores this functionality. It exposes the function addTemplatedURLs which globs the file system in the same way as the old templatedURLs did:

plugins: [
    new GenerateSW({
        manifestTransforms: [
            addTemplatedURLs({
                "Index": ["Pages/Index.cshtml*"]
            })
        ]
    })
]