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(

Answer 1

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.