Question

我对JavaScript不太熟悉，很难进入服务人员。

我希望使用服务工作人员使整个Web应用程序脱机，以便在页面加载时缓存必要的文件。虽然这是有效的，但是所有文件都下载到磁盘需要相当长的时间，这会使浏览器无响应并且用户不耐烦。

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

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

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

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

Answer 1

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

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

ReadableStream是必需的，浏览器并未完全实现。记住browser support。

Answer 2

我是JavaScript和PWA的新手。我遇到了几乎相同的问题（如何找出我的内容可以脱机使用，这意味着已将其加载到缓存中以进行脱机浏览？），在网上四处张望，最后发现服务人员（SW）除了软件可以使用add（）和/或addAll（）方法完成加载之后，SW不能与客户端进行其他对话（console.log）。我认为最好的办法是使用estimate.quota（）和estimate.usage（）来找出可用于存储和使用的限制，因为您可能已经知道这些是存储Api的方法。

var storageMax = Math.round(estimate.quota/(1024*1024))

这将为您提供Mib中可用的最大存储容量，下面的代码行将为您提供已使用的存储空间。

Var storageValue = Math.round(estimate.usage/(1024*1024))

<progress value=" storageValue " max=" storageMax "></progress>

如果您在[index.html或任何一个页面]上使用上述进度条，它至少会在加载的内容和初始容量方面为您显示某种进度。现在来看第二部分，如果使用JavaScript（我确定可以），我们可以找出内容的大小，例如如果我能找到包含要离线存储的视频的文件夹的大小，那么我们可以有另一个进度条

Var folderSize = [folder1] + [folder2] + …;
<progress value=" storageValue " max=" folderSize "></progress>

这将为您提供非常精确的进度条，其中将folderSize显示为进度条的最大长度，将storageValue显示为已加载的内容。我仍在尝试找出如何在JavaScript中找到文件夹的大小，因此答案实际上是不完整的，但在逻辑上是完整的，

Answer 3

目前，无法跟踪PWA的下载进度。但是，您可以做的是当服务人员注册时，使用烤面包机弹出消息或说明您的PWA正在保存以进行离线缓存。然后在完成后弹出另一条消息。类似下面的代码

window.addEventListener('load', function () {
    navigator.serviceWorker.register('/service-worker.js')
    .then(function (registration) {
        registration.onupdatefound = function () {
            // toaster('Saving assets for offline caching!');

            const installingWorker = registration.installing;
            installingWorker.onstatechange = function () {
                switch (installingWorker.state) {
                    case 'installed':
                        if (!navigator.serviceWorker.controller) {
                            // toaster('Caching complete!');
                        }
                        break;

                    case 'redundant':
                        throw Error('The installing service worker became redundant.');
                }
            };
        };

使用服务工作者

3 个答案: