Workbox Service Worker with Background Sync module

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.

P.S: 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!

Did you install the npm module workbox-background-sync? – cdoshi Dec 26 '17 at 04:28 — cdoshi, Dec 26 '17 at 04:28
Yes I did, it installed the 2.0.3 version – Conrad Dec 26 '17 at 12:48 — Conrad, Dec 26 '17 at 12:48

score 0 · Answer 1 · answered Dec 27 '17 at 00:27

0

I solved it.. it was actually pretty silly, i was accesing the const workbox instead of instantiating a new workbox.backgroundSync, i fixed it by simply renaming the const workbox to const workboxSW

answered Dec 27 '17 at 00:27

Conrad

57
1
8

After installing it, did you have to add the module? If so what was it called, trying to add a module and can't find a name – James Nurse Feb 13 '18 at 10:55

Workbox Service Worker with Background Sync module

1 Answers1