Как поставить в очередь пост-запрос, используя рабочий ящик?

Question

Используя следующий js в моем сервисном работнике из примера workboxjs для моего тестирования:

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

Я хочу опробовать, как ставить почтовые запросы в очередь в автономном режиме, используя workbox-sw, поэтому, как только сеть станет доступна, она обработает запрос из очереди!

Q 1: я думаю, что мне нужно импортировать дополнительные библиотеки, чтобы определить мои маршруты для методов post, как показано здесь в выпуске № 634 на github.

Как можно использовать импорт в браузере? Я пытался с помощью importScripts но это не работает

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

Вопрос 2: Нужны ли дополнительные библиотеки для фоновой синхронизации, поэтому методы post ставятся в очередь?

Answer 1

Я бы рекомендовал использовать его как часть большего workbox-sw рамки, как плагин. Вот версия примера кода, модифицированная для использования importScripts() вытащить код Workbox из CDN. В качестве альтернативы, вместо использования предварительно упакованных пакетов по CDN, вы можете использовать синтаксис модуля ES2015, а затем такой пакет, как Rollup или Webpack, чтобы включить соответствующий код из вашей локальной сети. node_modules в окончательный рабочий файл службы.

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