javascript - 使用 Service Worker 缓存文件时显示进度

Question

我对 JavaScript 不太熟悉，很难进入 service workers。

我想使用 service worker 在页面加载时缓存必要的文件，使整个 webapp 离线可用。虽然这是可行的，但需要相当长的时间才能将所有文件下载到磁盘，这会使浏览器无响应且用户不耐烦。

我想知道，在 Service Worker 施展魔法时，显示进度的最佳方式是什么？以“下载第25个文件共100个”的方式。

client怎么才能知道service worker的进度呢？由于 worker 没有 DOM 访问权限。我必须在工作人员和客户之间使用消息吗？

这是我在这里的第一个问题，我希望我说清楚，不要张贴重复(没有找到任何东西)并遵守所有规则。

在此先感谢您的帮助或指导。

Answer 1

下面的示例从 Service Worker 发出进度指示器事件。您可以保留多个 PWA 请求的运行进度总计，稍微修改代码并将 const total ( declared here ) 更改为全局范围内的 let total 以计算运行字节计算所有响应的总数。使用 HTTP2，否则“总”大小将随着新响应开始进入而增长，从而产生不准确的进度条。 HTTP2 很可能会同时启动所有响应，使您能够从一开始就计算总计，从而提供更好的用户体验准确性。

https://fetch-progress.anthum.com/sw-basic/

ReadableStream 是必需的，浏览器并未完全实现。注意browser support .