如何使用工作箱对发布请求进行排队？答案

【问题标题】：How to queue post request using workbox?如何使用工作箱对发布请求进行排队？
【发布时间】：2023-04-10 07:24:01
【问题描述】：

在我的服务工作者中使用来自workboxjs sample 的以下 js 进行测试：

importScripts('https://unpkg.com/workbox-sw@0.0.2/build/importScripts/workbox-sw.dev.v0.0.2.js');

我想尝试如何使用 workbox-sw 在离线模式下对发布请求进行排队，因此一旦网络可用，它就会处理来自队列的请求！

问题 1： 我想我需要导入额外的库来为 post 方法定义我的路由，如此处所示在 github issue #634

如何在浏览器上使用导入？我尝试使用importScripts，但它不起作用。

import * as worker from 'workbox-sw';
import 'workbox-routing';

问题 2： 我是否需要任何额外的库来进行后台同步，所以 post 方法需要排队？

【问题讨论】：

标签： service-worker progressive-web-apps background-sync workbox

【解决方案1】：

我建议将它用作更大的workbox-sw 框架的一部分，作为插件。这是示例代码的一个版本，已修改为使用 importScripts() 从 CDN 中提取 Workbox 代码。或者，您可以使用 ES2015 模块语法，然后使用 Rollup 或 Webpack 之类的捆绑器，将本地 node_modules 中的相关代码包含到最终的 service worker 文件中，而不是使用 CDN 上的预打包包。

importScripts('https://unpkg.com/workbox-runtime-caching@1.3.0');
importScripts('https://unpkg.com/workbox-routing@1.3.0');
importScripts('https://unpkg.com/workbox-background-sync@1.3.0');

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});

【讨论】：