Wrong manifest precache location

Question

I'm trying to use Workbox.injectManifest to generate a service worker but I'm having issues with the path to the precache manifest from my service worker not being generated properly.

My Webpack output.path is 'path.resolve('./scripts/app/dist')' and my Workbox config:

new WorkboxPlugin.InjectManifest({
        swSrc: path.resolve("./scripts/app/src/service-worker.js"),
        swDest: "../../../sw.js",        
        globDirectory: path.resolve("./"),
        globPatterns: [
            "scripts/**/*.js",
            "fonts/**/*.{eot,ttf,woff,woff2,otf}",
            "images/**/*.{png,jpg,svg,gif,ico}",
            "styles/**/*.css"
        ]
    });

Because by default Workbox creates the sw.js in the output.path and I want it on the root of my site I have the ../../../sw.js but the precache manifest will stay in output.path, this is ./scripts/app/dist. The issue is that the path pointing to the manifest in the generated sw.js is:

importScripts("precache-manifest.472387a6bbb5e3e8f5e8392d628202d5.js", "https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");

That is poiting to where the sw.js is, which is on the site root and it cannot be found. Is that a bug or something I;m not configuring properly? I have tried using 'importsDirectory' but that just move the manifest to another location and the path on the sw.js is still wrong.

UPDATE

I have this in my service worker template:

workbox.skipWaiting();
workbox.clientsClaim();

workbox.precaching.precacheAndRoute([])

workbox.routing.registerRoute( .......

But when I build, the array is not populate and an external manifest is created: This is what the plugin creates:

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

workbox.skipWaiting();
workbox.clientsClaim();

workbox.precaching.precacheAndRoute([])

workbox.routing.registerRoute(

your injectManifest() creates a new manifest <array> inserting the array at workbox.precaching.precacheAndRoute([]) - which exists in earlier sw.js. So, why do u need to import a precache-manifest when 'injectManifests' globs are designed to recreat / insert a new manifest. — Robert Rowntree
maybe it helps to read this : github.com/GoogleChrome/workbox/issues/1260 — Robert Rowntree
hmmm, not sure if that's related. I don't want to use a local copy of Workbox. I just want the path to the manifest to be correct when the service worker is compiled. — Mario Lopez
fwiw - i had some similar problems coordinating <generateSw() , injectManifest() > and then managing those . IMO they are not design , intended to be used in conjunction with one another.. rather select one of the other. I dont use the plugin so in my case , i always inlined preCache array at the regex in a preexisting sw.js. < no timestamped cache file > I was getting outta sync sw in the app and solved it by focusing on 'watch' stmts and any bundles output by watch stmts where the bundles were in the preCache list/manifest — Robert Rowntree

Felix Eve Felix Eve · Accepted Answer · 2020-01-17T14:01:05

You need to set the importsDirectory paramater when initializing InjectManifest.

For example I want my precache-manifest to be in the public folder so my config looks like this:

new InjectManifest({
    swSrc: './resources/js/sw.js',
    swDest: '../sw.js',
    importsDirectory: '../'
})

Based off your swDest value I suspect you may need a value of ../../../ for your importsDirectory.

Wrong manifest precache location

1 Answers