具有后台同步模块的 Workbox Service Worker答案

【问题标题】：Workbox Service Worker with Background Sync module具有后台同步模块的 Workbox Service Worker
【发布时间】：2017-12-27 08:27:16
【问题描述】：

我已经使用 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()，同样的信念。

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

【问题讨论】：

你安装npm模块workbox-background-sync了吗？
是的，我安装了 2.0.3 版本

标签： javascript node.js npm workbox background-sync

【解决方案1】：

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

【讨论】：

安装后是不是要加模块？如果是这样，它叫什么，试图添加一个模块，但找不到名称