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

Question

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

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

我想知道，在 Service Worker 施展魔法时，显示进度的最佳方式是什么？在 "Downloading file 25 of 100".

的方式

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

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

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

Answer 1

目前无法跟踪 PWA 的下载进度。但是你可以做的是当 service worker 注册后，使用烤面包机或其他东西弹出一条消息，说明你的 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.');
                }
            };
        };

Answer 2

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

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

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

Answer 3

我是 JavaScript 和 PWA 的新手。我有很多相同的问题（我如何才能发现我的内容可以离线使用意味着已经加载到缓存中以供离线浏览？），在网上四处看看，最后发现 Service Workers (SW)在使用 add() and/or 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 中文件夹的大小，所以答案实际上不完整但逻辑上完整，我认为是

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

Show progress while caching files using a service worker

javascript

progress-bar

service-worker

progress