Question

我尝试将现有项目从手动管理所有内容的服务工作者转换为workbox 3 (beta)管理的项目。

Precache工作得非常好。但是，无论我尝试什么，routing.registerRoute方法都无法正常工作。下面的示例与文档完全相同，但无论何时获取图像，都不会生成image-cache，也不会缓存任何图像。

关于我在这里做错了什么的任何指示都将不胜感激。

其次 message和push的两个事件监听器不再工作。

importScripts('workbox-v3.0.0-beta.0/workbox-sw.js');

/**
* The workboxSW.precacheAndRoute() method efficiently caches and responds to
* requests for URLs in the manifest.
*/
workbox.precaching.precacheAndRoute([...<snip>...]);

workbox.routing.registerRoute(
    /.*\.(?:png|jpg|jpeg|svg|gif)/g,
    new workbox.strategies.CacheFirst({
        cacheName: 'image-cache',
    })
);


self.addEventListener('message', function(ev) {
    if (ev.data.action === 'skipWaiting') { self.skipWaiting(); }
});

self.addEventListener('push', function(ev) {
    if (ev.data) {
        var data = ev.data.json();
        var title = data.title;
        const promiseChain = self.registration.showNotification(title, data);
        ev.waitUntil(promiseChain);
    }
});

Answer 1

我不确定是否还有其他问题，但它应该是workbox.strategies.cacheFirst而不是workbox.strategies.CacheFirst。

Answer 2

是的，所以我最终想通了。我犯了一个新手的错误。我的服务人员的范围错误;）

基本上，我的服务工作人员位于/static/build/sw.js，我试图在/static/img/中缓存图片... doh！

工作箱路由不起作用

2 个答案: