Wookbox服务工作者具有背景同步模块

Question

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

它可以正常工作，但是现在我试图包括 workbackground-sync 模块，用于存储一些失败的帖子请求，我无法使其工作。运行SW之后，我在第一个BackgroundSync行（第9行）上获得了" 未定义的typeError：无法读取属性'queueplugin''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（'workback-background-sync'）加载它，这是我在github上找到的解决方法，但仍然无法正常工作。另外，尝试 self.workbox = new WorkboxSW()，同样信念。

p.s：有没有一种方法可以在之后连接函数 em> networkfirst 之后的策略失败了，并且它将与cache响应？因为我想知道，如果我得到缓存的响应，我想告诉用户，例如修改传入响应并以后在VUE中处理。感谢您的阅读！

Answer 1

我解决了它。它实际上很愚蠢，我正在加入const workbox，而不是实例化新的workbox.backgroundsync，而是通过简单地将const workbox重命名为const workboxSW

来修复它。