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

我尝试使用 workbox.loadModule('workbox-background-sync') 加载它，这是我在 github 上找到的一种解决方法，但它仍然无法正常工作。self.workbox = new WorkboxSW()此外，以同样的信念尝试 。

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

4

1 回答 1

0

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

于 2017-12-27T00:27:16.713 回答