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

Question

我已经使用Workbox几天了，并且正确地设置了它以便从源生成服务工作者，并且不要让Workbox为我生成它。

它工作正常，但现在我试图包括用于存储一些失败的POST请求的workbox-background-sync模块，但我无法使其正常工作。 运行SW后，在第一backgroundSync行（第9行）上收到“ Uncaught TypeError：无法读取未定义的属性'QueuePlugin' ”。 这是生成的ServiceWorker文件：

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([]);

我试图用workbox.loadModule（'workbox-background-sync'）加载它，这是我在github上发现的一种解决方法，但仍然无法正常工作。 另外，以相同的信念尝试self.workbox = new WorkboxSW() 。

PS：有没有办法可以在诸如networkFirst之类的策略失败并且能够响应缓存后挂接函数？ 因为我想知道，如果即时通讯收到缓存的响应，我想告诉用户通过修改传入的响应并稍后在Vue中进行处理。 谢谢阅读！

Answer 1

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