javascript - 如何在 Service Worker 中缓存动态 URL?和预缓存有关系吗?我正在使用 ReactJS 默认 serviceWorker

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

在我的 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 进行预缓存,并且应该在用户访问页面时缓存它们,但是我在哪里以及如何缓存它们?

最佳答案

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

希望对您有帮助!

关于javascript - 如何在 Service Worker 中缓存动态 URL?和预缓存有关系吗?我正在使用 ReactJS 默认 serviceWorker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59893731/

相关文章:

javascript - 在条形图中的条形顶部显示值

javascript - Safari 扩展 : WebSocket connection failure calls onclose and not onerror and no exception

javascript - 在 AngularJS 的 javascript 中使用数组进行过滤

javascript - 错误 : [$compile:tplrt] Template for directive 'checkNav' must have exactly one root element

javascript - onClick 激活所有其他 onClick 事件

android - 移动应用程序是否相互共享缓存并与默认浏览器共享缓存

javascript - 为什么我的 body 在从 React JS 前端进行 post 调用时总是空的

reactjs - 如何在运行时从 React 应用程序访问 Azure Web App AppSettings

caching - 防止浏览器缓存 UI5 应用程序资源

caching - ASP.NET Webforms - 关闭缓存,但仅适用于 "pages",不适用于静态内容