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

Question

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

使用下面的代码，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"
];