0

在我的 service worker 中使用来自workboxjs 示例的以下 js进行测试：

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

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

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

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

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

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

4

1 回答 1

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});
于 2017-08-11T14:36:51.477 回答