Gatsby-plugin-offline - Service Worker 拦截表单 POST 请求

问题描述

我有一个带有 gatsby-plugin-offline 的页面设置。

我终于让一切都脱机工作了（文档有点少，所以这有点“反复试验”）。但我现在有一个我似乎无法解决的问题。

我向 Netlify 发出的联系表单 POST 请求被 serviceworker 拦截。我在这里真的不需要任何离线功能 - 当用户离线时，我简单地将表单中的“发送”按钮“交换”为“网络离线”消息。但是，当页面在线时，serviceworker 仍然会启动。

我想我必须为 POST 请求做某种替代路由，但我不知道如何解决这个问题？

到目前为止，这是我在 gatsby-plugin-offline 中按预期工作的设置：

{
      resolve: "gatsby-plugin-offline",options: {
        precachePages: [
          `/index.html`,`/en/artikler/*`,`/en/artikler/*/*`,`/en/`,`/artikler/*`,`/artikler/*/*`,`/webudvikling/*`,`/en/webudvikling/*`,`/grafik/*`,`/en/grafik/*`,`/kompetencer/*`,`/en/kompetencer/*`,],workBoxConfig: {
          globPatterns: [
            "**/*{.html,.webp,.webmanifest,.woff,.woff2,.ttf,.eot,.css,.svg,.mp3,icons/icon*,.ico,sw.js}",},

插件的文档暗示可以通过在选项下添加一行来将脚本附加到 serviceworker：

appendScript: require.resolve(`./src/custom-sw-code.js`),

我的想法是添加如下内容：

workBox.routing.registerRoute(
      /\$?????????/,workBox.strategies.networkFirst(),)

但我不确定？您能否通过 event.request.method === 'POST' 或类似方式进行过滤以仅将任何 POST 请求强制发送到网络？

解决方法

啊对不起。这已经在该线程的其他地方回答了：

Netlify Forms and service worker

简而言之：在每个表单提交的 POST url 中附加一个唯一的 id。这样，Service Worker 将无法拦截响应，因为实际上没有什么可缓存的。