Workbox Error: PrecacheController.mjs:194 Uncaught (in promise) bad-precaching-response: ..._redirects?__WB_REVISION__...404

Support
, , ,
7

I have a hypothesis I want to test here:
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 trafffic 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 invected 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:30
o @ 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/],
		}

Run build again, check dist folder manifest, no .map files included in 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 404 page as intended.
Publishing the deploy, I can now install the app as a PWA on my desktop.

Issue resolved.
Thanks for your emotional support and friendship during this difficult time in my life.

3 Likes