使用服务工作者缓存文件时显示进度

下面的示例从服务工作者发出进度指示器事件。您可以为多个PWA请求保留运行总进度,稍微修改代码并更改 const total ( declared here )至 let total 在全局范围中,计算所有响应的运行字节总数。使用HTTP2,否则随着新的响应开始出现,“总”大小将增加,从而产生不准确的进度条。HTTP2很可能同时启动所有响应,允许您从一开始就计算总计,从而提供更好的UX准确性。

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

ReadableStream 是必需的,但浏览器未完全实现。当心 browser support 。

我对JavaScript和PWAs都是新手。我也有同样的问题(我如何才能发现我的内容可以脱机使用,意味着我的内容已经加载到缓存中进行脱机浏览?),在web上四处查看,最终发现服务人员(SW)无法与客户端对话,而SW在使用add()和/或addAll()方法完成加载后可能会执行(console.log)。我认为最好的办法是使用估算值找出可用的存储和使用限制。配额()和估计。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中找到文件夹的大小,因此答案实际上是不完整的,但逻辑上是完整的,我想是的

目前,无法跟踪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.');
                }
            };
        };