CODEWITHSUNDEEP
node.jsreactjscachingprogressive-web-apps
emailshe
emailshe

Reputation: 31

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

> [email protected] 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.

Upvotes: 3

Views: 5809

Answers (3)

Reuben Frimpong
Reuben Frimpong

Reputation: 93

By changing the parameter of precacheAndRoute as below it worked for me

workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

Upvotes: 4

Satrogan
Satrogan

Reputation: 489

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.

Upvotes: 0

MegPhillips91
MegPhillips91

Reputation: 336

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

Upvotes: 2

Related Questions