时间戳

首页 > 解决方案 > 如何在服务人员中缓存动态 url？它与预缓存有什么关系吗？我正在使用 ReactJS 默认 serviceWorker

javascript - 如何在服务人员中缓存动态 url？它与预缓存有什么关系吗？我正在使用 ReactJS 默认 serviceWorker

问题描述

在我的 Main.js 文件中，我有以下代码：

import * as serviceWorker from './serviceWorker';
/*
some code
*/
ReactDOM.render(<Main />,document.getElementById('app'));
serviceWorker.register()

这个 serviceWorker 它是默认从 create-react-app 操作创建的，但我必须从源代码复制它，因为我没有使用 create-react-app 创建应用程序。

serviceWorker 在 / 范围内查找“service-worker.js”文件。在以下行中：

const swUrl = `/service-worker.js`;

使用此配置，我可以缓存 service-worker.js 文件的 PrecacheConfig 变量中提到的所有内容，例如 /js/app.js

当涉及到动态网址时，例如/myapp/{id}/test/. 我确定不应该对所有这些动态 url 进行预缓存，并且应该在用户访问页面时缓存它们，但是我在哪里以及如何缓存它们？

标签： javascriptreactjscachingservice-workerprogressive-web-apps

解决方案

我建议使用 Workbox https://developers.google.com/web/tools/workbox来管理您的 Service Worker 功能。使用 workbox.routing 模块 ( https://developers.google.com/web/tools/workbox/modules/workbox-routing )，您可以使用特定于您的应用正则表达式来指定自定义的兑现规则。

希望对您有所帮助！

推荐阅读