Question

我一直在使用Workbox几天，我正确地设置它来从源生成服务工作者，不要让Workbox为我生成它。

它工作正常，但现在我试图包含 workbox-background-sync 模块来存储一些失败的POST请求，我无法让它工作。运行SW后，我在第一个backgroundSync行（第9行）上得到“未捕获的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()，信仰相同。

P.S：有没有办法可以挂钩功能 AFTER 像 networkFirst 这样的策略失败了，它会用缓存来响应？因为我想知道，如果我得到一个缓存的响应，我想告诉用户通过修改传入的响应并稍后在Vue中处理它。谢谢你的阅读！

Answer 1

我解决了..它实际上非常愚蠢，我正在访问const workbox而不是实例化一个新的workbox.backgroundSync，我通过简单地将const workbox重命名为const workboxSW来修复它

工作箱服务工作者与背景同步模块

1 个答案: