Vue CLI 3 PWA deploying to Production Netlify gives Workbox Error: bad-precaching-response ..._redirects?__WB_REVISION__...404

I've found the issue:Here's my thinking as I was testing it, was posted elsewhere, too:

I need the _redirects file in the published build directory, but I want to exclude it from the generated manifest that the service worker uses to filter traffic to local or internet assets.So I’m going to try to specify an exclusion for _redirects

Try:Change my vue.config.js (a proxy for webpack.config in vue CLI projects) from this:

module.exports = {    devServer: {        host: 'lite.bdfi.test'    },    pwa: {        name: 'BDFI',        themeColor: '#2d3748',        msTileColor: '#2d3748',        appleMobileWebAppCapable: 'no',        appleMobileWebAppStatusBarStyle: 'default',        manifestPath: 'manifest.json',        workboxPluginMode: 'GenerateSW'            }}

To this:

module.exports = {    devServer: {        host: 'lite.bdfi.test'    },    pwa: {        name: 'BDFI',        themeColor: '#2d3748',        msTileColor: '#2d3748',        appleMobileWebAppCapable: 'no',        appleMobileWebAppStatusBarStyle: 'default',        manifestPath: 'manifest.json',        workboxPluginMode: 'InjectManifest',        workboxOptions: {            // swSrc is required in InjectManifest mode.            swSrc: 'service-worker.js',            // ...other Workbox options...            exclude: [/_redirects/],        }    }}

This means that I’m now specifying the input for the service worker, so I need to get a service worker from somewhere.Here’s my service worker (it’s just a stripped-out version of the autogenerated one)

workbox.core.setCacheNameDetails({prefix: "lite-bdfi-app"});self.addEventListener('message', (event) => {      if (event.data && event.data.type === 'SKIP_WAITING') {    self.skipWaiting();  }});self.__precacheManifest = [].concat(self.__precacheManifest || []);workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

After build it’s the same with the injected manifest and workbox scripts:

importScripts("/precache-manifest.54b556dfe16cf1359c2f3257fa76ade9.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

And also, the local ‘dist’ directory confirms that the ‘_redirects’ file is omitted.

Now I run this build in local and fire it up in the local server, now it’s throwing different errors. in local, which has never happened before…

PrecacheController.mjs:194 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"http://127.0.0.1:8887/css/app.159bf243.css.map?__WB_REVISION__=b04e3357da21d1241e39","status":404}]    at l.o (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js:1:1749)    at async Promise.all (index 0)    at async l.install (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js:1:1221)n @ WorkboxError.mjs:30o @ PrecacheController.mjs:194

Looks familiar, and there are now 5 of them, all looking for files with a .map extension…Now I’ll remove .map files from the manifest build and see what that does:

workboxOptions: {            // swSrc is required in InjectManifest mode.            swSrc: 'service-worker.js',            // ...other Workbox options...            exclude: [/\.map$/, /_redirects/], //this fixed it.        }

Run build again, check dist folder manifest, no .map files included in the manifest.Then check the local version of the app with cleared cache and local storage. no errors there… seems promising.Push to GitHub. Netlify build triggers, not auto-published, so visit staging link.No more errors on page load looking for _redirects file.Check the redirect for ‘/invalid-url’ and it diverts to the 404 pages as intended.Publishing the deployment, I can now install the app as a PWA on my desktop.

Issue resolved for me.I hope this helps someone with the same problem in the future.

only doing this

pwa: {    name: 'App Name',    workboxOptions: {        exclude: ['_redirects'],}

works for me.