Метод запроса 'POST' не поддерживается

Question

Следующая конфигурация выдает ошибку «Метод запроса« POST »не поддерживается».Я уже читал, что API-интерфейс хранилища данных не запрашивает объекты с методом POST в качестве ключей в кеше, но я понятия не имею, как добавить маршрут, который демонстрирует стратегию networkOnly для этих запросов.

Specs (настройка взята из https://github.com/nystudio107/annotated-webpack-4-config)

• Использование GenerateSW

webpack.settings.js (запомните инструкцию importScripts)

workboxConfig: {
    swDest: "../sw.js",
    precacheManifestFilename: "js/precache-manifest.[manifestHash].js",
    importScripts: [
        "/dist/workbox-catch-handler.js"
    ],
    exclude: [
        /\.(png|jpe?g|gif|svg|webp)$/i,
        /\.map$/,
        /^manifest.*\\.js(?:on)?$/,
    ],
    globDirectory: "./web/",
    globPatterns: [
        "offline.html",
        "offline.svg"
    ],
    offlineGoogleAnalytics: true,
    runtimeCaching: [
        {
            urlPattern: /\.(?:png|jpg|jpeg|svg|webp)$/,
            handler: "cacheFirst",
            options: {
                cacheName: "images",
                expiration: {
                    maxEntries: 20
                }
            }
        }
    ]
}

wepack.prod.js

// webpack.prod.js - production builds
    const LEGACY_CONFIG = 'legacy';
    const MODERN_CONFIG = 'modern';
    const WorkboxPlugin = require('workbox-webpack-plugin');

// config files
    const settings = require('./webpack.settings.js');
    const common = require('./webpack.common.js');
    ...

// Configure Workbox service worker
      const configureWorkbox = () => {
         let config = settings.workboxConfig;

         return config;
      };

// Module Exports – simplified for clarity - see github repro for more details
   module.exports = [
      ...
      ...,
    merge(
       common.modernConfig,
       {
          ...
          ...
          plugins: [
             ...
             new WorkboxPlugin.GenerateSW(
                configureWorkbox()
             ),
          ]
       }
   ]

workbox-catch-handler.js

// fallback URLs
   const FALLBACK_HTML_URL = '/offline.html';
   const FALLBACK_IMAGE_URL = '/offline.svg';

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.

   workbox.routing.setCatchHandler(({event, request, url}) => {
      // Use event, request, and url to figure out how to respond.
      // One approach would be to use request.destination, see
      // https://medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c

         switch (request.destination) {
            case 'document':
               return caches.match(FALLBACK_HTML_URL);
               break;

            case 'image':
               return caches.match(FALLBACK_IMAGE_URL);
               break;

            default:
               // If we don't have a fallback, just return an error response.
               return Response.error();
         }
   });

// Use a stale-while-revalidate strategy for all other requests.
      workbox.routing.setDefaultHandler(
         workbox.strategies.staleWhileRevalidate()
      );

Ошибка вызвана стратегией DefaultHandler, поэтому я попытался добавить другой маршрут для этих запросов прямо подDefaultHandler, но безуспешно. Например:

workbox.routing.registerRoute(
   new RegExp('*/admin/*'),
   workbox.strategies.networkOnly()
);

Я также безуспешно пробовал bgSyncPlugin. Любая помощь приветствуется. Я хотел бы реализовать стратегию networkOnly для широкой стороны только для запросов POST (не только для URL-адресов администратора)).

Answer 1

Вы не можете кэшировать POST-запросы с помощью Cache API, что означает, что вы не можете использовать первую стратегию сети.

См .: Может ли обслуживающий персонал кэшировать POST-запросы?

Возможно, вы сможете что-то сделать с сетевым запросом (т. Е. Изменить тип запроса у работника службы, прочитав ответ POST и сгенерировав новый ответ для добавления в Cache API).Для этого потребуется специальная стратегия.

Чтобы получить доступ к запросам POST с помощью маршрутизатора Workbox, см .: https://developers.google.com/web/tools/workbox/modules/workbox-routing#defining_a_route_for_non-get_requests

Чтобы написать собственную функцию для обработки сетевого запроса, см .: https://developers.google.com/web/tools/workbox/modules/workbox-routing#matching_and_handling_in_routes

Возможно, вам удастся повторно использовать некоторые стратегии рабочего ящика, проверьте здесь подробности, как это может работать: https://developers.google.com/web/tools/workbox/guides/advanced-recipes#make-requests