如何使用工作箱对 post 请求进行排队？

Question

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

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

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

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

所示

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

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

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

Answer 1

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

如何使用工作箱对 post 请求进行排队？

How to queue post request using workbox?

service-worker

progressive-web-apps

background-sync

workbox