使用服务工作者从服务器获取要缓存的文件列表答案

【问题标题】：Using a service worker to get list of files to cache from server使用服务工作者从服务器获取要缓存的文件列表
【发布时间】：2019-03-01 03:25:51
【问题描述】：

我正在尝试在现有的 asp mvc 应用程序中使用服务工作者。一般来说，它工作正常：我可以缓存文件等等。问题是，有很多文件要缓存，我正在尝试将路径数组返回给服务工作者，以便可以将文件添加到缓存而无需手动添加它们。

这是我目前所拥有的：

控制器：

    public ActionResult GetFilesToCache()
    {
        string[] filePaths = Directory.GetFiles(Server.MapPath(@"~\Content"), "*", SearchOption.AllDirectories);
        string[] cuttedFiles = new string[filePaths.Length];
        int i = 0;

        foreach (var path in filePaths)
        {
            cuttedFiles[i] = path.Substring(path.IndexOf("Content"));
            i++;
        }

        return Json(new { filesToCache = cuttedFiles }, JsonRequestBehavior.AllowGet);
    }

这给了我一个字符串数组，其中包含“Content\image1.png”等条目。

服务工作者：

    self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
    e.waitUntil(
            caches.open(cacheName).then(function (cache) {
            console.log('[ServiceWorker] Caching app shell');

            return fetch('Home/GetFilesToCache').then(function (response) {
                return response;
            }).then(function (files) {
                return cache.addAll(files);
            });      
    })
  );
});

我得到的错误是：

Uncaught (in promise) TypeError: Failed to execute 'addAll' on 'Cache': Iterator getter is not callable.

调用该动作就可以了，服务工作者接收到数据，但没有添加到缓存中。

【问题讨论】：

标签： asp.net-mvc service-worker

【解决方案1】：

在以下代码中：

return fetch('Home/GetFilesToCache').then(function (response) {
    return response;
}).then(function (files) {
    return cache.addAll(files);
});

files 参数的值将是一个Response 对象。您希望它成为Response 对象主体的JSON deserialization。您可以通过将return response 更改为return response.json() 来获得此信息，从而导致：

return fetch('Home/GetFilesToCache').then(function(response) {
    return response.json();
}).then(function(files) {
    return cache.addAll(files);
});

【讨论】：

感谢您的回答，但它不起作用：未捕获（承诺）类型错误：无法在“缓存”上执行“addAll”：迭代器 getter 不可调用。
在 .then(function(files)) 处设置断点显示 files 是一个包含 84 个元素的数组，这是我预期的。但我不知道为什么会出现该错误消息。

【解决方案2】：

用这段代码搞定了：

    self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
    e.waitUntil(
        caches.open(cacheName).then(function (cache) {
            console.log('[ServiceWorker] Caching app shell');

            return fetch('Home/GetFilesToCache').then(function (response) {
                return response.json();
            }).then(function (files) {
                var array = files.filesToCache;
                return cache.addAll(array);
            });      
    })
      );
    });

注意： Chrome 只列出了存储在缓存中的部分文件，因此您只需单击那个小箭头即可显示下一页：

【讨论】：

【解决方案3】：

return fetch('Home/GetFilesToCache').then(function(response) {
    return response.json();
}).then(function(files) {
    return cache.addAll(files);
});

返回的文件在“files”上具有“filesToCache”属性，并且还使用“add”而不是“addAll”。

所以你需要这样写。

return fetch('Home/GetFilesToCache').then(function(response) {
    return response.json();
}).then(function(files) {
    return cache.add(files.filesToCache);
});

【讨论】：