首页 文章

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

提问于
浏览 次
1

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

它工作正常，但现在我试图包括workbox-background-sync模块存储一些失败的POST请求，我不能让它工作 . 运行SW后，我在第一个backgroundSync行（第9行）上得到“ Uncaught TypeError: Cannot read property 'QueuePlugin' of undefined ” . 这是生成的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([]);

我在github上找到了've tried to load it with workbox.loadModule(' workbox-background-sync '), a workaround i'，但它仍无法正常工作 . 此外，尝试 self.workbox = new WorkboxSW() ，具有相同的信念 .

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

javascript node.js npm workbox background-sync

1 回答

  • 0

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

    回复于

相关问题