使用 workbox-webpack-plugin 时,预缓存资源使用什么工作箱策略?

2024-04-20

我正在尝试了解工作箱和服务人员。

使用workbox-webpack-plugin和GenerateSW模式时,用于预缓存资源的workbox策略是什么? IE。因为我似乎没有为预缓存资产设置路由/策略,以便服务工作线程更新这些资产的缓存。那么这些的默认处理程序是什么?

其次,服务器响应中的 Cache-Control 标头如何在工作箱刷新资源的策略中发挥作用?如果有的话。

回答 root /index.html 资产的问题对我来说是最有帮助的。

Thanks.


workbox-webpack-plugin生成一个服务工作者来调用workbox.precaching.precacheAndRoute([...]) https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.precaching#.precacheAndRoute,带有 URL 数组(以及每个 URL 的可选修订信息)。

致电给precacheAndRoute()做了两件事:

  • Precaches 提供的所有 URL。

  • 自动创建一个fetch处理程序将检查传入的请求以查看它是否与预缓存的 URL 匹配,如果匹配,则使用有效的缓存优先策略进行响应。 (这是和路线部分。)被调用的代码 https://github.com/GoogleChrome/workbox/blob/b472f45966d44afe26b9258ed46e427c7a2e30eb/packages/workbox-precaching/_default.mjs#L215-L232当有一场比赛时并不是字面上的workbox.strategies.cacheFirst(),但大致相当。

工作箱将自动回避 https://github.com/GoogleChrome/workbox/blob/b472f45966d44afe26b9258ed46e427c7a2e30eb/packages/workbox-precaching/models/PrecacheEntry.mjs#L41-L77如果预缓存清单中为给定条目提供了带外修订信息,则浏览器的 HTTP 缓存将使用该信息作为 URL 内容可能随时间变化的信号。这docs https://developers.google.com/web/tools/workbox/modules/workbox-precaching为了workbox-precaching模块进一步阐明了正在发生的事情。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 workbox-webpack-plugin 时,预缓存资源使用什么工作箱策略? 的相关文章

  • PWA - 清单属性“display”:“standalone”在 Android 上不起作用

    我注意到我的 PWA 的行为非常奇怪 我可以在 Windows 上以 独立 模式启动它 但是当我尝试在 Android 设备上执行相同操作时 它会忽略 独立 值并在 Chrome 中打开网址 Android 7 0 Chrome Andro
  • Service Worker 和网页之间的通信

    我正在开发一个应用程序 其目标是定期 例如每小时 向用户发送通知 我的想法是使用一个服务工作者 该服务工作者可以在选项卡关闭后运行 并继续向用户发送这些通知 网页需要能够与 Service Worker 沟通有关这些通知的具体细节 消息应该
  • Service Worker 不会缓存 Manifest start_url

    我正在使用 Lighthouse 来审核我的网络应用程序 我正在克服失败 但我坚持这一点 失败 Service Worker 未缓存 Manifest start url In my manifest json I have start u
  • React (CRA) Service Worker 缓存“公共”文件夹

    执行 create react app 并启用 Service Worker 后index js 来自的所有相关文件src文件夹被缓存 然而我的一些资源位于public目录 当我跑步时npm run build the asset mani
  • 使用 Service Worker 处理离线时的文件上传

    我们有一个 Web 应用程序 使用 AngularJS 构建 我们也逐渐添加 PWA 功能 服务工作线程 可启动项 通知等 我们的网络应用程序的功能之一是能够在离线状态下完成网络表单 目前 我们在离线时将数据存储在 IndexedDB 中
  • 尝试与服务工作者一起显示离线页面,但即使在离线状态下,我的请求也会收到 200 响应

    我正在尝试使用服务工作者来执行以下任务 缓存一组页面 如果请求 则从缓存中返回页面 如果该页面不在缓存中 则从服务器返回 如果缓存或服务器没有响应 则返回自定义离线页面 我有以下代码 this addEventListener instal
  • 无后端的 PWA 通知

    我正在使用 Javascript PWA 制作一个待办事项应用程序 待办事项会有提醒 我想向用户发送通知以提醒他们 任务和提醒时间将存储在localStorage中 所以现在我想在没有任何后端的情况下发送通知 我尝试过一些教程 它们都需要后
  • Service Worker js 中的 Fetch() 无法发送请求标头?

    我的代码相同 我正在调用 fetch 但网络和服务器中的请求没有像 cookie 这样的请求标头 我又找到了一篇关于这个的帖子Service Worker 未发送请求标头 https stackoverflow com questions
  • Service Worker 破坏 301 重定向

    我在 WordPress 网站上使用 Service Worker 它搞乱了来自的重定向https example com page https example com page to https example com page http
  • 未捕获(承诺中)DOMException:超出配额

    我正在尝试查看离线状态演示 https serviceworke rs offline status demo html从下面的链接 我得到 DOMException 超出配额 https serviceworke rs offline s
  • 渐进式 Web 应用程序的预期启动体验是什么?

    测试渐进式 Web 应用程序 当我在飞行模式下启动应用程序时 我得到了意外的启动 启动体验 Android Chrome 从主屏幕体验启动 我看到一个白色的屏幕 然后是 离线恐龙 的短暂闪烁 然后应用程序成功启动 一切正常 启动时间比我预期
  • 使用 Service Worker 和推送通知做出反应

    一些初步考虑 react 16 8 2 react scripts 2 1 5 我创建了一个新的反应应用程序 我需要实现推送通知 下列的this https developers google com web fundamentals co
  • 无法查看 Service Worker 日志

    看不到我的 Service Worker 的日志 以下是我尝试打开已注册和正在运行的服务工作人员日志的步骤 Open chrome serviceworker internals 单击开始并检查 刷新检查窗口 等待日志出现 但是 两者chr
  • 在 Android 移动设备上使用 Chrome 调试 Service Worker

    我正在开发一个渐进式 Web 应用程序 为了确保它可以在移动设备上运行 特别是在 Android 版 Chrome 上 因为它有 90 的用户 我正在尝试在 Android 设备上测试 Service Worker 不幸的是 在安卓版 Ch
  • 收到无效的 JSON 负载。未知名称 click_action

    所以我目前正在开发一个 PWA 我现在正在与推送通知我已经能够使用以下非常简单的 JSON 结构接收后台和前台通知 message token aValidToken notification title New Content body
  • 如何编辑 Angular CLI 项目的 Service Worker 文件

    我已经添加了 angular pwa使用以下命令打包到我的 Angular CLI 项目ng add angular pwa project project name 所以它变成了一个渐进式 Web 应用程序 这增加了我认识的服务人员 我想
  • 如何在一段时间后隐藏推送通知?

    我必须在一分钟后隐藏推送通知 为了实现这一目标 我应该在 Service Worker 中做什么 您可以使用notification close 方法 https developer mozilla org en US docs Web A
  • 为什么 Service Worker 只能通过 HTTPS 工作?

    根据最初的提案 关于 更喜欢安全来源以获得强大的新功能 http www chromium org Home chromium security prefer secure origins for powerful new features
  • 使用 workbox-webpack-plugin 时,预缓存资源使用什么工作箱策略?

    我正在尝试了解工作箱和服务人员 使用workbox webpack plugin和GenerateSW模式时 用于预缓存资源的workbox策略是什么 IE 因为我似乎没有为预缓存资产设置路由 策略 以便服务工作线程更新这些资产的缓存 那么
  • Service Worker 是否持续向服务器请求、响应?

    我正在使用服务器发送事件来显示通知 我创建了一个服务工作线程 并在运行项目后使用 EventSource 与服务器连接 在我的例子中 我使用了 servlet 一切正常 但事件内的内容会被多次执行 我想知道为什么 我的另一个问题是 一旦我关

随机推荐