在服务工作人员内部,在“安装”处理程序内部,报告 DOM 已缓存了多少文件以及仍在下载多少文件的正确方法是什么?
仅当有多个 MB 文件需要缓存或连接速度较慢时,此问题才有意义。
最佳答案
有两种方法可以直接将消息从 Service Worker 传递到客户端页面:使用 postMessage()
并使用 Broadcast Channel API .
广播 channel API 更容易用于此目的,但它是 not currently supported在 Safari 或 Edge 中。
无论哪种情况,都由您决定如何格式化消息,并包含客户端向用户显示消息所需的来自 Service Worker 的相关状态信息。
以下是 postMessage()
方法如何工作的粗略示例:
// In your service worker:
self.addEventListener('install', async event => {
event.waitUntil((async () => {
const allUrls = [
'/url1',
'/url2',
// etc.
];
const alreadyCached = [];
const clients = await self.clients.matchAll({
includeUncontrolled: true,
});
const cache = await caches.open('my-cache-name');
for (const url of allUrls) {
await cache.add(url);
alreadyCached.push(url);
for (const client of clients) {
client.postMessage({
// Put whatever info you want here.
alreadyCached,
allUrls,
});
}
}
})());
});
// In your client pages:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.addEventListener('message', event => {
// event.data will contain {alreadyCached, allUrls}.
});
}
关于javascript - 如何将安装进度报告回 DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50789098/