Как использовать Workbox setDefaultHandler

Question

Я переключаюсь с sw-toolbox на Workbox и не могу понять, как использовать setDefaultHandler ().

Если я попытаюсь (как указано в документации, указанной выше):

workboxSW.router.setDefaultHandler({
    handler: new workbox.runtimeCaching.CacheFirst()
});

Я получаю сообщение об ошибке, что runtimeCaching не определено:

Uncaught ReferenceError: маршрутизатор не определен

Итак... как мне его использовать и настроить так же, как я могу настроить sw-toolbox:

toolbox.options.cache = {
    name: "default",
    maxEntries: 128,
    maxAgeSeconds: (60*60*24), // 24hrs
};
toolbox.router.default = toolbox.cacheFirst;

Я хотел бы иметь возможность сделать что-то вроде этого:

workboxSW.router.setDefaultHandler({
    handler: workboxSW.strategies.cacheFirst({
        cacheName: 'default',
        cacheExpiration: {
            maxEntries: 128,
        },
        cacheableResponse: {statuses: [0, 200]},
    })
});

.. который не генерирует ошибки компиляции, но когда я использую его, я получаю это:

Uncaught (в обещании) TypeError: Метод запроса 'POST' не поддерживается

..и мое кеш-хранилище для 'default' остается пустым..?

Answer 1

Поскольку мои поправки к первому решению Джеффа были отклонены, я просто отправлю ответ сам.

Образец Джеффа подошел близко. Он предложил:

Вы можете проверить тип запроса в обработчике по умолчанию и применить только кеш-стратегию к GET-запросам:

workboxSW.router.setDefaultHandler({
  handler: (args) => {
    if (args.event.request.method === 'GET') {
      return workboxSW.strategies.cacheFirst(args);
    }
    return fetch(args.event.request);
  },
});

Это правильный подход, но приведенный им пример кода не сработал. Для аргумента обработчика нужен обработчик, а не стратегия. К счастью, стратегии имеют ровно один (публичный) метод, называемый "дескриптор".

Поэтому я немного изменил его код; Во-первых, я создаю стратегию под названием defaultStrategy со всеми вариантами, которые мне нужны. Затем в вызове setDefaultHandler я возвращаюсь defaultStrategy.handle(args) вместо конструктора CacheFirst. Это оно!

// Register 'default'
var defaultStrategy = workboxSW.strategies.cacheFirst({
    cacheName: "default",
    cacheExpiration: {
        maxEntries: 128,
        // more options..
    },
    cacheableResponse: {statuses: [0, 200]},
});
workboxSW.router.setDefaultHandler({
    handler: (args) => {
        if (args.event.request.method === 'GET') {
            return defaultStrategy.handle(args);
        }
        return fetch(args.event.request);
    },
});

Answer 2

workboxSW.router.setDefaultHandler({
  handler: workboxSW.strategies.cacheFirst({...})
});

правильный синтаксис в целом.

Я верю что ты видишь

Uncaught (в обещании) TypeError: Метод запроса 'POST' не поддерживается

потому что обработчик по умолчанию запускается для всех запросов HTTP, которые не соответствуют ни одному явному маршруту, включая HTTP POST Запросы. Но HTTP POST Запрос не может быть использован с Cache Storage API, и исключение, похожее на то, что вы видите, будет выдано, когда стратегия сначала кеша попытается сохранить пару запрос / ответ в кеше.

В этом конкретном случае, когда вы знаете, что ваше веб-приложение будет отправлять запросы HTTP POST, вы можете выбрать один из двух подходов.

Вы можете проверить тип запроса в обработчике по умолчанию и применить только кеш-стратегию к GET Запросы:

workboxSW.router.setDefaultHandler({
  handler: (args) => {
    if (args.event.request.method === 'GET') {
      return workboxSW.strategies.cacheFirst(args);
    }
    return fetch(args.event.request);
  },
});

В качестве альтернативы можно создать маршрутный символ, который соответствует всем запросам, и воспользоваться тем, что по умолчанию маршруты будут соответствовать только HTTP GET:

workboxSW.router.registerRoute(
  /./, // This should match all requests.
  workboxSW.strategies.cacheFirst({...}),
  'GET' // This is the default, and can be left out.
);