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

Question

我正在构建一个渐进式 Web 应用程序，目前正在使用 Service Worker 来构建带有几个静态图像文件的应用程序外壳

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

Uncaught (in promise) TypeError: Failed to fetch

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

似乎 Service Worker 只是看不到要缓存的资产

Answer 1

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

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