hanford / next-offline

make your Next.js application work offline using service workers via Google's workbox
https://github.com/hanford/next-offline
1.59k stars 113 forks source link

now2 example app not working #261

Open jfoz opened 3 years ago

jfoz commented 3 years ago

Steps taken:

  1. git clone https://github.com/hanford/next-offline.git
  2. cd next-offline/packages/now2-example/
  3. npm install
  4. npm run dev
  5. Open localhost:3000 in Google Chrome
  6. Check console.

Expected: Service worker registered.

Actual: 404 for http://localhost:3000/service-worker.js (screengrab below)

image

Apologies in advance in case I'm missing something.

NateRadebaugh commented 3 years ago

I'm also seeing this issue myself. My guess is the issue is due to the swDest field it's setting, since /static/ isn't a dir that is respected by nextjs anymore. However, I've tried using public/service-worker.js and also am seeing this error.

Edit: I've found an "official" example in the nextjs codebase with a different config defined, which includes an explicit rewrites to point /service-worker.js at the real /_next/static/service-worker.js.

https://github.com/vercel/next.js/blob/canary/examples/with-next-offline/next.config.js

const withOffline = require('next-offline')

module.exports = withOffline({
  workboxOpts: {
    swDest: process.env.NEXT_EXPORT
      ? 'service-worker.js'
      : 'static/service-worker.js',
    runtimeCaching: [
      {
        urlPattern: /^https?.*/,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'offlineCache',
          expiration: {
            maxEntries: 200,
          },
        },
      },
    ],
  },
  async rewrites() {
    return [
      {
        source: '/service-worker.js',
        destination: '/_next/static/service-worker.js',
      },
    ]
  },
})