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

Question

我对JavaScript不太熟悉，很难招募服务人员。

我想使用服务人员使整个Web应用程序脱机使用，以在页面加载时缓存必要的文件。尽管这是可行的，但要花很多时间才能将所有文件下载到磁盘上，这会使浏览器无响应，并且用户不耐烦。

我想知道，当服务人员不断努力时，显示进度的最佳方法是什么？以“下载文件25 of 100”的方式。

客户如何知道服务人员的进度？由于工作人员没有DOM访问权限。我必须在工作人员和客户端之间使用消息吗？

这是我在这里的第一个问题，希望我清楚自己，不要发布重复的内容（找不到任何东西）并遵守所有规则。

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

Answer 1

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

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

ReadableStream是必需的，浏览器未完全实现。注意浏览器的支持。