Workbox: error implemented strategy firstcache(ERROR in Can't find self.__WB_MANIFEST in your SW source.)

[FelCer]

Library Affected:
"workbox-webpack-plugin": "latest"

Browser & Platform:
node -v: v10.22.0, npm -v: 6.14.6, browser all.

wepack.config.js

const { GenerateSW, InjectManifest } = require('workbox-webpack-plugin');
plugins: [
    new InjectManifest({
      swSrc: './src/js/serviceworker.js'
    })
  ],

serviceworker.js

import { registerRoute } from 'workbox-routing';
import { NetworkFirst, CacheFirst } from 'workbox-strategies';

registerRoute(
    new RegExp('/.*\.js'),
    new NetworkFirst({
        cacheName: 'logic-cache'
    })
);

registerRoute(
    new RegExp('/.*\.(?:png|jpg|jpeg|svg|gif)$/'),
    new CacheFirst({
        cacheName: 'image-cache'
    })
);

index.js

if (navigator.serviceWorker.controller) {
  console.log("Active service worker found");
} else {
  navigator.serviceWorker
    .register("serviceworker.js", {
      scope: "./"
    })
    .then(function (reg) {
      console.log("Service worker  registered");
    });
}

terminal

ERROR in Can't find self.__WB_MANIFEST in your SW source.
npm ERR! code ELIFECYCLE
npm ERR! errno 2

I want to implement the firstCache strategy and control, push(notification) later.

[TheForsakenSpirit]

@FelCer InjectManifest search injection point for static assets and if not found, send your error. Check this.

import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

If you don`t wont precache. Configure your webpack just for compiling your service worker without InjectManifest plugin.

[jeffposnick]

Closing, as @TheForsakenSpirit's guidance is correct. Flagging this with the Documentation tag as something we can explain better in the future, though.

There's more info at https://developers.google.com/web/tools/workbox/guides/using-bundlers