QUESTION - With nuxt generate, can I put sw.js file into a subdirectory?

[avblink]

I'm serving my nuxt generated folder behind nginx proxy on a sub url. (https://localhost/preview)

Need to serve sw.js from a subfolder, alternatively need to give it a different name so it can be easily differentiated by nginx proxy.

I tried with publicPath, but it still puts the sw.js file into the root of the dist folder.

Is there any way of achieving this?

Thank you in advance.

[farnabaz]

There is two options, swDest and swURL in the docs that might help you.

[avblink]

Unfortunatelly, those didn't move/rename the file in dist folder. It stayed sw.js in the root of the dist folder

[farnabaz]

You can follow these steps:

• Create a directory inside static dir, lets call it preview
• Change swDest to resolve('./static/preview/sw.js')

import { resolve } from 'path';

export default {
  pwa: {
    workbox: {
      swDest: resolve('./static/preview/sw.js')
    }
  }
}

• Generate project

And you will see preview/sw.js inside dist

[avblink]

Hi @farnabaz ,

thank you for taking the time to help me.

I think I was missing the 'resolve' bit. Now the file is in the right place, however, caching stopped working, i.e. the page is no longer accessible offline.

Lighthouse report shows 2 errors:

• Does not register a service worker that controls page and start_url This origin has one or more service workers, however, the page (https://localhost/some/page/) is not in scope.

  • start_url does not respond with a 200 when offline _Timed out waiting for starturl (https://localhost/?standalone=true) to respond.

  Here is my current config:

   workbox: {
    swDest: resolve('./static/ap-assets/sw.js'),
    swURL: '/ap-assets/sw.js',
    swScope: '/ap-assets/',
    publicPath: '/ap-assets/',
  },