工作箱路由不起作用

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

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

基本上，我的 service worker 位于 /static/build/sw.js，而我正试图在 /static/img/ 中缓存图像 ...doh！

工作箱路由不起作用

Workbox routing just not working

javascript

service-worker

workbox