service worker 列出缓存中的所有 url 并传递给另一个函数

Question

我在我的项目中使用了 workbox，但问题并非特定于 workbox。

谁能告诉我如何从特定缓存中检索所有 url 的列表并将其 return 返回回调函数。我正在尝试向用户显示所有缓存网址的列表以及删除它们的选项。但我无法 populate/show 列出所有缓存的网址。

我正在做的是：

function queryCache(){
    var url = [];
    caches.open('mycache').then(function (cache){
        cache.keys().then(function(keys){
            return new Promise(function(resolve, reject) {
                keys.forEach(function (request, index, array) {
                    cache.match(request).then(function (response){
                        url.push(response.url);
                    })
                })
                resolve();
            });
        }).then(function(){
            console.log(url); // lists all urls in console as array
            cacheList(url);
        });
    })
}

function cacheList(Items)
{   for(var i = 0; i < Items.length; i++){
        console.log('Items: '+Items[i]); //never reaches
    }
    console.log(Items.length); // always show 0
}

当我从控制台调用 queryCache() 时，cacheList(Items) 被正确调用，但问题是，Items 始终是一个空数组，其长度始终为 0。

可能我没有正确使用 Promise resolve。请帮忙谢谢

Answer 1

我传递了错误的承诺，下面是工作代码，

在 Whosebug 或网络上没有这样的问题来列出某个缓存的所有 url 并传递给一个函数，我希望它能帮助别人。

function queryCache(){
    var url = [];
    caches.open('mycache').then(function (cache){
        cache.keys().then(function(keys){
            return Promise.all(
                    keys.map(function(k){url.push(k.url); return k.url} )
                )
        }).then(function(u){ cacheList(url);})
    })
}

function cacheList(Items)
{   for(var i = 0; i < Items.length; i++){
        console.log('Items: '+Items[i]);
    }
}

Answer 2

async function getCachedUrls(cacheName, cb) {
  const urls = (await (await caches.open(cacheName)).keys()).map(i => i.url)
  return (cb) ? cb(urls) : urls 
}

getCachedUrls('mycache-v1').then((d) => { console.log(d) })
  // or
getCachedUrls('mycache-v1', console.log)

service worker 列出缓存中的所有 url 并传递给另一个函数

service worker list all urls in cache and pass to another function

javascript

browser-cache

service-worker

workbox