Question

我对React工作箱反应还很新。我试图使我的Electron react App能够缓存脱机时所有可用的图像和数据。这正是我在此youtube视频中试图实现的目标。从14:00到21:00分钟：使用React和Workbox /watch?v=Ok2r1M1jM_M

构建PWA

但是此命令给出

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

此错误：

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 =)\[\](;)/

请帮助我解决此问题，或建议其他软件包/存储库/视频以使其成为可能。

Answer 1

如果您严格遵循视频，请确保您在src文件夹中创建的自定义sw.js文件完全是：

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

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

const precacheManifest = [];

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

和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 =）[]（;）/ };

确保工作箱版本与您在他使用的视频3.6.3中使用的版本相匹配，但现在是其4.3.1 .....希望这会有所帮助。

Answer 2

在发布本文时，包括5.1.3当前版本在内的较新的工作箱版本中，用于指定precacheManifest的injectionPoint的参数已从正则表达式更改为字符串。参数的名称也已更改，据我所知，它不向后兼容...这意味着不再使用正则表达式。

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

按照其余视频操作，按照上述方法更改该参数。

然后其他几个更新也影响了sw.js的编写方式...

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

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

const precacheManifest = [injectionPoint];

workbox.precaching.precacheAndRoute(precacheManifest);

您必须删除.supressWarnings（）命令。它已被删除。好的视频...需要一些更新。

链接到演示文稿github，需要更新，以便... https://github.com/mikegeyser/building-pwas-with-react

链接至手册：https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build

@ MegPhillips91

Answer 3

通过如下更改 precacheAndRoute 的参数，它对我有用

workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

请确保您的服务工作者文件包含以下内容：/（const precacheManifest =）\ [\]（;）/

3 个答案: