Please ensure that your service worker file contains the following:/(const precacheManifest =)\[\](;)/

问题

I am quite new to react React workbox. I am trying to make my Electron react App have the ability to cache all images and data to be made available while it is offline. This is exactly what I am trying to accomplish as in this youtube video. from 14:00 to 21:00 minutes: Building PWAs with React and Workbox, /watch?v=Ok2r1M1jM_M

But this command is giving

"start-sw":"workbox injectManifest workbox-config.js && workbox copylibraries build/ && http-server build/ -c 0"

This error:

C:\Users\rajesh.ram\Desktop\Day\K\demok\client>npm run start-sw

> client@0.1.0 start-sw C:\Users\rajesh.ram\Desktop\Day\K\demok\client
> workbox injectManifest workbox-config.js && workbox copylibraries build/ && http-server build/ -c 0

Using configuration from C:\Users\rajesh.ram\Desktop\Day\K\demok\client\workbox-config.js.
Service worker generation failed:

Unable to find a place to inject the manifest. Please ensure that your service worker file contains the followin

g:/(const precacheManifest =)\[\](;)/

Please help me fix this or suggest alternative packages/repositories/videos to make it possible.

回答1:

If you're following the video strictly, make sure that the custom sw.js file that you create in the src folder is exactly:

importScripts("workbox-v4.3.1/workbox-sw.js");

workbox.setConfig({ modulePathPrefix: "workbox-v4.3.1/" });

const precacheManifest = [];

workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(preCacheManifest);

and workbox-config.js module.exports = { globDirectory: "build/", globPatterns: ["**/*.{json,ico,html,png,js,txt,css}"], swDest: "build/sw.js", swSrc: "src/sw.js", injectionPointRegexp: /(const precacheManifest = )[](;)/ };

make sure the workbox version matches the version you have in the video he uses 3.6.3 but now its 4.3.1.....hope this helps.

回答2:

In newer workbox versions including 5.1.3 current at time of this post , the parameter which specifies the injectionPoint for the precacheManifest has changed from regex to string. The name of the parameter has also changed and as far as I can tell this is not backwards compatible...meaning it doesn't work to use the regex anymore.

module.exports = {
  "globDirectory": "build/",
  "globPatterns": [
    "**/*.{json,ico,html,png,js,txt,css,svg}"
  ],
  "swDest": "build/sw.js",
  "swSrc": "src/sw.js",
  "injectionPoint": "injectionPoint"
}

Changing that parameter as per above worked for me following the rest of the video.

Then several other updates affected how sw.js is written also...

importScripts("workbox-v5.1.3/workbox-sw.js");

workbox.setConfig({ modulePathPrefix: "workbox-v5.1.3/" });

const precacheManifest = [injectionPoint];

workbox.precaching.precacheAndRoute(precacheManifest);

You have to remove the .supressWarnings() command. It has been removed. A good video...needs some updates.

Link to the presentation github which needs an update so... https://github.com/mikegeyser/building-pwas-with-react

Link to the manual: https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build

@MegPhillips91

来源：https://stackoverflow.com/questions/56252946/please-ensure-that-your-service-worker-file-contains-the-following-const-preca

标签

node.js

reactjs

caching

progressive-web-apps