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

时间:2018-03-05 16:18:13

标签: javascript caching scope promise progressive-web-apps

我正在构建一个渐进式Web应用程序,目前正在使用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

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

1 个答案:

答案 0 :(得分:1)

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

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