Bad HTTP response (Maybe 404?)

[thedevdavid]

Hey! I've configured next-offline with next-componse plugins & now 2 with the following setup:

next config:

const workboxOpts = {
  swDest: 'static/service-worker.js',
  runtimeCaching: [
....
    {
      urlPattern: /^https?.*/,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'https-calls',
        networkTimeoutSeconds: 15,
        expiration: {
          maxEntries: 150,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
        },
        cacheableResponse: {
          statuses: [0, 200],
        },
      },
    },
  ],
};

const config = {
  env,
  reactStrictMode: true,
  workboxOpts,
  generateInDevMode: true,
  transformManifest: manifest => ['/'].concat(manifest),
};

now.json
{
  "version": 2,
  "public": false,
  "builds": [
    {
      "src": "next.config.js",
      "use": "@now/next@canary"
    }
  ],
  "build": {
    "env": {
     ...
    }
  },
  "rewrites": [
    { "source": "/", "destination": "/" },
    {
      "source": "^/service-worker.js$",
      "destination": "/_next/static/service-worker.js"
    }
  ],
  "headers": [
    {
            "source": "^/service-worker.js$",
            "headers": [
                {
                    "key": "cache-control",
                    "value": "public, max-age=43200, immutable"
                },
                {
                    "key": "Service-Worker-Allowed",
                    "value": "/(.+)"
                }
            ]
    },
    {
      "source": "/(.+)",
      "headers" : [
        {
          "key" : "X-Content-Type-Options",
          "value" : "nosniff"
        },
        {
          "key" : "X-Frame-Options",
          "value" : "DENY"
        },
        {
          "key" : "X-XSS-Protection",
          "value" : "1; mode=block"
        }
      ]
    }
  ]
}

Devtools shows it's generates multiple but I can't see it from Source

The error: SW registration failed: TypeError: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/service-worker.js'): A bad HTTP response code (404) was received when fetching the script.

It runs on the latest Next (9.3) and latest next-offline (5.0)

Link: https://web.qa.unipieapp.com

[Quadriphobs1]

Same here I can see the service-worker.js file created however its not been served when using express setup and results in 404 error

[AlexWheeler]

@DLevai94, @Quadriphobs1

I had same issue, but got this working with the following config: Note how I'm telling workbox to put the generated service-worker.js into ../public/

This way when the app is built next serves it at /service-worker.js

const withOffline = require('next-offline')
const config = {
  workboxOpts: {
    swDest: '../public/service-worker.js',
  },
    // rest of your config
}
module.exports = withOffline(config)