具有背景同步模块的Workbox Service Worker

Question

I've been using Workbox for a few days and i correctly set it up for generating a service worker from a source and dont let Workbox generate it for me.

It works ok but now im trying to include the workbox-background-sync module for storing some failed POST requests and i cant get it to work. After running the SW, i get " Uncaught TypeError: Cannot read property 'QueuePlugin' of undefined " on the first backgroundSync line (line number 9). This is the generated ServiceWorker file:

importScripts('workbox-sw.prod.v2.1.2.js');
importScripts('workbox-background-sync.prod.v2.0.3.js');

const workbox = new WorkboxSW({
  skipWaiting: true,
  clientsClaim: true
})

let bgQueue = new workbox.backgroundSync.QueuePlugin({
  callbacks: {
    replayDidSucceed: async(hash, res) => {
    self.registration.showNotification('Background sync demo', {
    body: 'Product has been purchased.',
    icon: '/images/shop-icon-384.png',
  });
},
replayDidFail: (hash) => {},
requestWillEnqueue: (reqData) => {},
requestWillDequeue: (reqData) => {},
},
});

const requestWrapper = new workbox.runtimeCaching.RequestWrapper({
  plugins: [bgQueue],
});

const route = new workbox.routing.RegExpRoute({
  regExp: new RegExp('^https://jsonplaceholder.typicode.com'),
  handler: new workbox.runtimeCaching.NetworkOnly({requestWrapper}),
});

const router = new workbox.routing.Router();
router.registerRoute({route});

workbox.router.registerRoute(
  new RegExp('.*\/api/catalog/available'),
  workbox.strategies.networkFirst()
);

workbox.router.registerRoute(
  new RegExp('.*\/api/user'),
  workbox.strategies.networkFirst()
);

workbox.router.registerRoute(
  new RegExp('.*\/api/security-element'),
  workbox.strategies.networkOnly()
);

workbox.precache([]);

I've tried to load it with workbox.loadModule('workbox-background-sync'), a workaround i've found on github, but it still not working. Also, trying with self.workbox = new WorkboxSW() , with the same faith.

PS: Is there a way i can hook a function AFTER a strategy like networkFirst has failed and its going to respond with cache? because i want to know, if im getting a cached response i would like to tell the user that by modifying the incoming response and handle it later in Vue for example. Thanks for reading!

Answer 1

我解决了它..它实际上是非常愚蠢的，我是accesing的const workbox ，而不是实例化一个新workbox.backgroundSync，我固定它通过简单地重新命名const workbox到const workboxSW