workbox: InjectManifest Plugin doesn't compile the serviceworker with webpack

Does the new guidance at https://developers.google.com/web/tools/workbox/guides/using-bundlers help any?

Not much. I have the same struggles. I write everything in TypeScript and Webpack is using ts-loader to combile the TypeScript code. But the plugin totally ignores this. If I set swSrc to be a TypeScript file and swDest to be a JavaScript file, the plugin simply copies the TypeScript file and renames it, but doesn’t run it through the defined webpack chain.

That’s one way to do it, but I think that’s working around the plugin, vs having the plugin work in the more ideal way.

We are actively working on a rewrite for the InjectManifest plugin that will perform a webpack child compilation on swSrc, in addition to populate the precache manifest.

It’s still too early to use, but you can see a sneak-preview of the changes at https://github.com/GoogleChrome/workbox/compare/v5...wepback-v5?expand=1

We’ll be rolling out the first alphas of v5 with this functionality following some additional tests and cleanup work—likely in the order of a couple of weeks from now.

I’d like to use InejctManifestPlugin as follows, without the two-pass hack suggested above:

// webpack.config.js
module.exports = {
  entry : {
    sw: './src/sw.js'
  }, 
  output: {
    filename: '[name].js'
  },
  target: 'webworker',
  plugins: [
    new InjectManifestPlugin()
  ]
}

The way it currently works is not intuitive at all. I expect webpack to compile my service worker and expect the InjectManifestPlugin to inject the manifest in a single pass. Also, both the source and the destination of my service worker are already present.

I’ve just tried v5.beta-1 because I also wanted a webpack/typescript build on my worker file. I got exactly that and saw the typical webpack generated code without any single config modification (I am using InjectPlugin). However when moving from v4 to v5 I noticed the ‘workbox’ global no longer exists and there is no mention in the changelogs.

Is there doc/example about how to access ‘workbox’ in v5?

If I understand the problem correctly, one way to solve this would be to first build the service worker file only and then build the rest of the app and specify swSrc to be the previously built service worker file.

To achieve this simply export multiple configs from webpack config file. In the first config, specify the service worker body file as the single entry point and do any transformations you want with it in the rest of the build. In the second build just use the file. Is this clear enough or should I give a complete example?

I have the same problem, in my custom sw I want to import some files from node_modules but webpack do not compile the swSrc. Does anyone know how to do that?

@philipwalton Thanks man. I made it work.

Have you figured this out guys?

My problem seems the following:

i got service-worker in my src directory:

'use strict';
const utils = require('./utils')
const path = require('path')
const DotEnvWebpack = require('dotenv-webpack');
const WorkboxPlugin        = require('workbox-webpack-plugin');

console.log(path.resolve(__dirname, '../src/js/service-worker.js'));
module.exports = {
    mode: process.env.NODE_ENV !== 'development' ? 'production' : 'development',
    entry: {
        main: './src/js/service-worker.js'
    },

    output: {
        path: utils.resolve('dist'),
        publicPath: '/',
        filename: 'service-worker.js',
    },
    resolve: {
        alias: {
            '~': path.resolve('')
        }
    },

    plugins: [
        new DotEnvWebpack({systemvars: true}),
        new  WorkboxPlugin.InjectManifest({
            swSrc: path.resolve(__dirname, '../src/js/service-worker.js'),
            include:[
                /\.html$/,
                /\.js$/,
                /\.css$/,
                /\.woff2$/,
                /\.jpg$/,
                /\.png$/
            ]
        })
    ]
};

import { skipWaiting, clientsClaim, setCacheNameDetails } from 'workbox-core';
import { precacheAndRoute } from 'workbox-precaching';
import { registerNavigationRoute } from 'workbox-routing';

skipWaiting();
clientsClaim();

console.log(self.__precacheManifest, " hoops1");
console.log(self.__WB_MANIFEST, " hooops2");
precacheAndRoute(self.__precacheManifest);

When i run the above config of webpack, it makes service-worker.js file in dist, but doesn’t contain anything such as importScripts(‘manifest’) and also when running in browser,

console.log(self.__WB_MANIFEST, " hooops2"); //prints empty array

console.log(self.__precacheManifest, " hoops1"); //prints undefined

What do I do?

Oh, found the problem, it was because I was importing another file named service-worker.js from another directory. Renaming the file fixed the problem.

workbox corresponded to an instance of the workbox-sw module, which is effectively a proxy that mapped a namespace of other Workbox modules with code to import the corresponding files from the CDN.

Because you’re using a local bundle of all the Workbox code that you actually need now, the idea is that workbox-sw (and therefore the workbox global symbol) should no longer be needed.

If you’re trying to accomplish something specific with the workbox symbol that you can’t figure out how to do in v5, could you open a new GitHub issue (or Stack Overflow question) with the details? This is a closed GitHub issue and it would be best to move the discussion elsewhere.

@ray-kim-12 yes, neither of those options should be supported in the current beta 1 release, as they are no longer relevant.

In v5, if you list a service worker file as the swSrc in InjectManifest mode, webpack will automatically perform a (child) compilation on that file, in addition to replacing self.__WB_MANIFEST with the precache manifest that was derived from the main compilation’s assets.

That was not the case in v4, so if you need that functionality, please try out the v5 beta.

This should be addressed by the current Workbox v5.0.0 alpha.