CODEWITHSUNDEEP
javascripttypescriptwebpackservice-workerworkbox
raf zan
raf zan

Reputation: 41

Removing __WB_REVISION__ Query String from URLs precached by WorkBox

I need to completely remove __WB_REVISION__ query strings from URLs precached by workbox.

My project is running under very strict rules, and the backend will create unique cache entries for each request with different query strings. This creates a problem when precaching needs to add query strings with revision info.

I've already tried using a simpler service-worker, but since we use webpack with split chunks, we've stumbled up so many import() and window object problems that workbox was the way to go.

I've already tried doing precache by hand via workbox.precaching.precacheAndRoute(). Any suggestions would be appreciated.

workbox config (webpack.config.js):

        new WorkboxPlugin.InjectManifest({
            swSrc: "./assets/js/pwa/worker.js",
            swDest: "sw.js",
            precacheManifestFilename: "precache.[manifestHash].js",
            excludeChunks: ["main", "page", "login"]
             include: [
                 /(vendor).*\.js(?=\?|$|)/,
                 /\.(woff2)(?=\?|$|)/,
                 /(?=sprite)\.(svg)(?=\?|$|)/,
            ],
        })

worker.js:

const cacheableResponse = {
    statuses: [0, 200]
};
const offlinePage = "offline.html";
workbox.precaching.precacheAndRoute([offlinePage]);

workbox.routing.registerRoute(/\/$|(.html?)$/, new workbox.strategies.NetworkOnly());
workbox.routing.setCatchHandler(({ event }) => {
    return caches.match(offlinePage);
});

workbox.precaching.precacheAndRoute(self.__precacheManifest);

EDIT: Adding the code below to webpack config seemed to solve, but feels kinda hacky

manifestTransforms: [
                originalManifest => {
                    return (manifest = originalManifest.forEach(entry => delete entry.revision));
                }
            ]

Upvotes: 4

Views: 4063

Answers (1)

pate
pate

Reputation: 5253

The correct way to do this is to use the dontCacheBustURLsMatching option in the plugin configuration. It takes a regexp that matches against urls to be precached. The default value is null (matching nothing) but you can configure it to match any assets you like. With this, you can match all your assets that already include the hash of the file contents in their name. Put it another way, with this option you can say "files matching this regexp should not have revision info in the precache manifest".

More in the docs here: https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin

Upvotes: 3

Related Questions