Question

以下配置抛出错误“请求方法'不支持POST'”。我已经读过，存储api并没有使用POST方法作为缓存中的键来请求对象，但是我不知道如何添加路由，这表明了那些请求的networkOnly策略。

规格（设置来自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，但没有成功。任何帮助表示赞赏。我想为POST请求（不仅是管理URL）实现一个sidewide networkOnly策略。

Answer 1

您不能使用Cache API缓存POST请求，这意味着您不能使用网络优先策略。

请参阅：Can service workers cache POST requests?

您也许可以对网络请求执行某些操作（即通过读取POST响应并生成新响应以放入Cache API来更改服务工作者中的请求类型）。这将需要自定义策略。

要使用Workbox路由器访问POST请求，请参阅：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

请求方法“ POST”不受支持

1 个答案: