CODEWITHSUNDEEP
javascriptservice-workerworkbox
Andre
Andre

Reputation: 1322

Workbox routing just not working

I'm trying to convert a existing project from a service worker where everything is managed manually, to one managed by workbox 3 (beta).

The Precache works perfectly fine. However, the routing.registerRoute method just doesn't work no matter what I try. The example below is taken exactly as is from the documentation, but whenever images are fetched, the image-cache is never generated and no images are ever cached.

Any pointers as to what I might be doing wrong here will be greatly appreciated.

Secondly the two event listeners for message and push don't work anymore either.

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);
    }
});

Upvotes: 2

Views: 5220

Answers (2)

Andre
Andre

Reputation: 1322

Right so I eventually figured out. I made a newbie mistake. My service worker was in the wrong Scope ;)

Basically, my service worker was located in /static/build/sw.js and I was trying to cache images in /static/img/ ... doh!

Upvotes: 1

pate
pate

Reputation: 5253

I'm not sure if anything else is broken, but it should be workbox.strategies.cacheFirst instead of workbox.strategies.CacheFirst.

Upvotes: 0

Related Questions