问题标签 [workbox]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
57 浏览

javascript - Service Worker 同步加载

我正在建立一个第一次实现服务工作者的网站。我正在测试性能,我得到了大约 500 毫秒。我尝试在私人窗口中运行性能测试,结果大约翻了一番。当我查看页面加载时,看起来 service worker 不仅首先加载,而且是同步加载的,并且它本身持续了大约 500 毫秒。请注意,花费这么长时间的不是我的 js 文件,而是我正在以这种方式加载的工作箱库:importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');有人能给我一些见解吗?真的是同步加载吗?有没有其他方法可以解决这个问题?这只是第一次加载吗?先感谢您。

以下是一些截图:

常规负载

常规负载

私人窗口负载

私人窗口负载

0 投票
2 回答
2221 浏览

javascript - 通过 service-worker 的请求被执行两次

我已经完成了一个简单的 service-worker 来推迟我的 JS 应用程序失败的请求(按照这个示例)并且它运行良好。但是当请求成功时我仍然有一个问题:请求完成了两次。一次正常,一次由服务人员由于fetch()我猜的电话。

这是一个真正的问题,因为当客户端想要保存数据时,它们被保存了两次......

这是代码:

如何做好?

编辑:

我想我不必重新fetch()请求(因为这是第二个请求的原因)并等待触发的初始请求的响应,fetchEvent但我不知道该怎么做。fetchEvent似乎没有办法等待(和阅读)响应。

我走对了吗?如何知道触发的请求何时fetchEvent有响应?

0 投票
2 回答
1538 浏览

mobile-safari - Safari iOS 11.3 未添加到 workbox-background-sync

我遵循了关于服务人员和后台同步的教程: https ://codelabs.developers.google.com/codelabs/workbox-indexeddb/index.html?index=..%2F..%2Findex#0

在 Safari iOS 11.3.1 上运行时,服务工作者已注册,因为它在日志中报告(已安装服务工作者)。但我不明白耶!工作箱已加载消息。

IndexedDB 工作正常,对象fetch从服务器上更新。

但是,当我故意下线并执行 POST 时,没有任何内容写入 IndexedDB 队列。我的问题是: 1. 我在哪里可以在 Web Inspector 中检查服务人员?2. workbox-background-sync 是否支持 Safari iOS 11.3.1?如果是,我的设置有什么问题?

0 投票
1 回答
1161 浏览

webpack - 错误的清单预缓存位置

我正在尝试使用 Workbox.injectManifest 生成服务工作者,但我的服务工作者的预缓存清单路径未正确生成时遇到问题。

我的 Webpackoutput.path是 'path.resolve('./scripts/app/dist')' 和我的 Workbox 配置:

因为默认情况下,Workbox 在 output.path 中创建 sw.js,我希望它在我的站点的根目录上,../../../sw.js 但预缓存清单将保留在 output.path 中,这是./scripts/app/dist. 问题是生成的 sw.js 中指向清单的路径是:

那是指向 sw.js 所在的位置,它位于站点根目录上并且无法找到。这是错误还是我没有正确配置?我曾尝试使用“importsDirectory”,但这只是将清单移动到另一个位置,而 sw.js 上的路径仍然是错误的。

更新

我的服务工作者模板中有这个:

但是当我构建时,不会填充数组并创建外部清单:这是插件创建的:

0 投票
1 回答
266 浏览

webpack - Workbox Service Worker 重复加载或不从缓存中读取?

我这里有这两张图片:

在此处输入图像描述 在此处输入图像描述

是否有理由说明为什么在第一张图片中,在 Google Chrome Inspector 网络选项卡中,每个图片都有两个操作:

  1. 从缓存中获取?
  2. 来自服务器的 XHR?

这是否意味着每次加载此页面时,我都会重新下载文件?应用程序是否应该只引用缓存并仅在文件更新时才下载?

我是否必须配置 webpack 以便我的资产在其名称中使用哈希,以帮助像我的 .js 文件一样进行版本控制?

编辑:这是在开发模式,或 webpack-dev-server

0 投票
0 回答
132 浏览

service-worker - Workbox - 服务工作者 index.html/asset 不匹配

我有一个使用workbox设置的简单服务人员。预缓存包含index.html一个main.xxx.jsjavascript 包(除其他外),其中 xxx 在每次构建时都会更新。预缓存设置非常简单,使用workbox-build

我随机看到的问题(特别是在 Safary 和 Firefox 中)是索引似乎进入了一个坏的(过时的)状态,它引用main.xxx.js但当前的构建是 on main.yyy.js,它不存在并破坏了网站。我可以通过访问 Chrome 来验证这一点,它在 中显示了正确的引用main.yyy.js并且index.html工作正常。我在这里缺少什么以及我可以使用什么策略来确保我始终拥有相同的版本?

需要明确的是,一旦问题处于不良状态,似乎没有什么可以解决问题。刷新没有任何作用。

0 投票
2 回答
695 浏览

workbox - Workbox registerRoute问题与兑现

这是我使用 workbox-webpack-plugin (InjectManifest) 编译的 service-worker:

预缓存没问题,但我不知道如何让 registerRoute 工作,我尝试了几件事。SW 只是不兑现来自“ http://54.xx.xxx.57/ ”的任何东西。请帮忙... :)

0 投票
2 回答
544 浏览

service-worker - 如何导入工作箱默认路由器

有示例Workbox Routing/Advanced Usage

但是当我尝试它时,我得到:

未捕获的 ReferenceError:未定义 DefaultRouter

我的服务人员:

0 投票
2 回答
1437 浏览

vue.js - vue-cli + 工作箱不缓存内容

我正在使用 vue-cli v3.0.0.beta10 + 默认的集成工作箱,我在我的文件中添加了以下配置vue.config.js(位于我的根文件夹中):

我希望我的服务人员缓存来自我的 google api 的所有 json 响应,但没有任何反应。我什至在“应用程序”选项卡下的开发人员工具箱中都看不到缓存存储。我错过了什么?请帮忙 :)

0 投票
1 回答
759 浏览

workbox - Service Worker 中的 Workbox 运行时缓存被忽略

在我的服务人员中,我有:

(例如)但没有创建这样的缓存。(但预缓存正在工作)

我想我缺少一些基本的东西。似乎找不到解决此问题的示例。

任何帮助,将不胜感激