在位于 SRC 文件夹中的 index.html 文件中注册一个 service-worker - ReactJS

Question

运行 来自其他文件夹的 service-worker

我正在尝试使用 service-worker 来预缓存整个 PWA，我需要在 SRC 文件夹中找到 SW。

如何从 public/index.html?

运行 我的 SW

我使用 create-react-app 并使用 google workbox 来生成 service-worker。

我尝试将 SW 导入 App.js 文件，但我发现了一个错误：

'importScripts' is not defined no-undef

importScripts(
  "https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js"
);

const precacheManifest = []; 

workbox.routing.registerRoute(
  new RegExp("https://app.tessa.technology/api/"),
  new workbox.strategies.CacheFirst()
);

workbox.routing.registerRoute(
  new RegExp(
  "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
),
new workbox.strategies.CacheFirst()
);


 workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

• public
  • manifest.js
  • index.html
• SRC
  • JS
  • CSS
  • SW.js

Answer 1

你有两种方法。

1) 将您的 service-worker.js 文件放入 public 目录。

2) 或者，使用 workbox-webpack-plugin。通过这种方式，service-worker.js 将自动生成并导入。比较推荐这种方式。