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

标签 javascript reactjs service-worker progressive-web-apps workbox

从其他文件夹运行 service-worker

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

如何从 public/index.html 运行我的软件?

我使用 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);
  • 公开
    • manifest.js
    • index.html
  • SRC
    • JS
    • CSS
    • SW.js

最佳答案

你有两种方法。

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

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

关于javascript - 在位于 SRC 文件夹的 index.html 文件中注册一个 service-worker - ReactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60509988/

相关文章:

javascript - 事件委托(delegate)与文档一起使用,但与家长无关

javascript - React - 通过图像数组进行映射

javascript - Internet Explorer - 检查权限是否被拒绝

javascript - 在 jquery 中追加文本长度

javascript - 根据之前的路径 url 在 componentWillReceiveProps 上调用一个方法

JSON.stringify() 函数正在用空对象替换文件对象

javascript - Service Worker 和页面性能

Webpack-服务 worker

javascript - 存储在 Service Worker 中的变量的生命周期是多少?

javascript - Chart.JS 自定义 - 如何调试?