服务工作者缓存失败

时间:2016-10-21 23:19:12

标签: javascript caching service-worker progressive-web-apps

我正在开发一个渐进式Web应用程序,旨在缓存所有要脱机使用的资产。这是我的服务人员

    self.addEventListener('install', function(e) {
        e.waitUntil(
           caches.open('default-cache').then(function(cache) {
              return cache.addAll([
                 '/',
                 '/index.html',
                 '/bundle.js',
                 '/libraries/p5.dom.min.js',
                 '/libraries/p5.min.js',
                 '/libraries/p5.sound.min.js',
                 '/sound/spokesm4v.mp3',
                 '/css/flexboxgrid.min.css',
                 '/images/icon-192.png',
                 '/manifest.json',
            ])
        }).then(function() {
            return self.skipWaiting();
        }));
    });

    self.addEventListener('activate', function(e) {
        e.waitUntil(self.clients.claim());
    });

    self.addEventListener('fetch', function(e) {
        e.respondWith(
            caches.match(e.request).then(function(response) {
                return response || fetch(e.request);
            })
        );
    });

无论我是否在线,服务工作者都无法缓存某些资产(在本例中为bundle.js)并破坏了我的缓存优先系统,即使我在注册工作人员时记录了成功消息。

https://postimg.org/gallery/2yo1ig35y/

2 个答案:

答案 0 :(得分:1)

我没有看到bundle.js缓存失败的问题,但是当打开coloursel.io时,我可以在控制台中看到你的sw.js中有一个JavaScript错误“未捕获的ReferenceError:事件未在sw中定义的.js:27"

如果你改变了

self.addEventListener('fetch', function(e) {
    e.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

服务工作者应按预期工作。

答案 1 :(得分:0)

尝试使用sw-precache应该更容易