使用服务工作程序缓存文件时显示进度 [英] Show progress while caching files using a service worker

问题描述

我不太熟悉JavaScript并且很难进入服务工作者。

I'm not too familiar with JavaScript and have a hard time getting into service workers.

我想使用服务工作者来缓存整个webapp页面加载时所需的文件。虽然这是有效的，但是所有文件都下载到磁盘需要相当长的时间，这会使浏览器无响应并且用户不耐烦。

I want to make a whole webapp available offline using service workers to cache the necessary files at page load. Though this is working, it takes quite some time until all the files are downloaded to disk, which makes the browser unresponsive and the user impatient.

我想知道，在服务工作者发挥其魔力的同时，展示进步的最佳方式是什么？以下载文件25的100的方式。

I wonder, what is the best way to show progress while the service worker is doing its magic? In the way of "Downloading file 25 of 100".

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

How can the client know the progress of the service worker? Since the worker has no DOM access. Do I have to use messages between the worker and the client?

这是我在这里的第一个问题，我希望自己明确表示，不要发布重复（didn'找不到任何东西）并遵守所有规则。

This is my first question here and I hope I made myself clear, do not post a duplicate (didn't find anything) and obeyed all the rules.

提前感谢任何帮助或指导。

Thanks in advance for any help or guidance.

推荐答案

下面的示例从服务工作者发出进度指示器事件。您可以为多个PWA请求保留一个运行进度总计，稍微重新编写代码并更改 const total （在此声明）到让总计在全局范围内计算所有响应的运行字节数总计。使用HTTP2，否则总大小将随着新响应开始进入而增长，从而产生不准确的进度条。 HTTP2很可能同时启动所有响应，允许您从一开始就计算总计，从而提供更好的UX准确性。

The example below emits progress indicator events from a Service Worker. You can keep a running progress total for multiple PWA requests reworking the code a bit and changing const total (declared here) to let total in global scope to calculate a running byte count total of all the responses. Use HTTP2, otherwise the "total" size will grow as new responses start to come in, yielding inaccurate progress bars. HTTP2 will most likely start all responses at the same time, allowing you to calculate the grand total from the onset, which provides better UX accuracy.

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

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

ReadableStream is required and not fully implemented by browsers. Mind the browser support.

这篇关于使用服务工作程序缓存文件时显示进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！