PWA cache.addAll在ASP.NET项目中不起作用

Question

我正在构建一个Progressive Web App，目前正在使用Service Worker来构建带有几个静态图像文件的app shell

使用cache.addAll下面的代码返回以下错误

未捕获（承诺）TypeError：无法获取

var appShellCacheName = 'mike-tss-appShell-v1';

var filesToCache = [    
    "/media/1014/newyork.png",
    "/media/1018/london.png",
    "/media/1015/boston.png"
];

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

没有CORS，3个文件都存在。我在Chrome 64版上运行此功能

注册服务工作者（位于scripts/目录中）时，我给它的根目录

navigator.serviceWorker.register("./scripts/my.serviceworker.js", { scope: "/" })

并且还添加

<add name="Service-Worker-Allowed" value="/" />

到web.config

似乎服务工作者只是看不到要缓存的资产

Answer 1

看起来你没有正确引用png文件。这对我有用：

var filesToCache = [    
    "../media/1014/newyork.png",
    "../media/1018/london.png",
    "../media/1015/boston.png"
];