API requests go through but respond with a 404

[benjamintd]

Thanks for this plugin! I am trying to set this up but am running into the following issue. I am using now v2 with Now (serverless) API routes.

• The service-worker is generated as expected, and registered properly.
• All requests except the ones to /api/... go through as expected.
• requests to /api/... hit the server properly, get the expected response but the status code is 404.

This issue is not happening in development (I unfortunately did not manage to run the sw in development but it seems to be a pending issue #155), so I think this is due to the service worker.

This happens both with the default configuration and the one I'm trying to run, for every request method (POST, GET, ...):

workboxOpts: {
    swDest: "static/service-worker.js",
    runtimeCaching: [
      {
        urlPattern: /api\/.*/,
        handler: "NetworkOnly",
        method: "POST",
        options: {
          cacheName: "api-calls",
          backgroundSync: {
            name: "networkQueue",
            options: {
              maxRetentionTime: 60 * 60 * 24 * 7 // 1 week
            }
          }
        }
      },
      {
        urlPattern: /^https?.*/,
        handler: "NetworkFirst",
        options: {
          cacheName: "https-calls",
          networkTimeoutSeconds: 15,
          expiration: {
            maxEntries: 150,
            maxAgeSeconds: 30 * 24 * 60 * 60 // 1 month
          },
          cacheableResponse: {
            statuses: [0, 200]
          }
        }
      }
    ]
  }

I don't understand what about the next api routes makes them behave differently?

[benjamintd]

I found the solution, which had nothing to do with next-offline but with now v2 configuration.

Setting up my routes to account for the service worker, I had an entry with { "src": "/api/.*", "dest": "/api/$1.ts" } which weirdly caused this bug - requests actually hitting the server, replying with the right body but responding with a ok: false and status: 404.

The solution was using the Next.js built-in API routes in the pages folder.