BASE_URL resolves to undefined

[roarkmccolgan]

Hi All

I'm really stuck with something and hoping someone could help me out.
I've built my app using Ionic with vue-cli

"@vitejs/plugin-vue": "^4.5.0",
"@vue/cli-plugin-pwa": "~4.5.12",
"register-service-worker": "^1.7.1",

I installed vite-plugin-pwa and I have a registerServiceWorker.js file in the root of ./src
In this file it has the following:

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
   /// rest of lifecycle methods
});

In my production it is always resolving to :

undefinedservice-worker.js

so I get the following network errors:

A bad HTTP response code (404) was received when fetching the script.

Error during service worker registration: TypeError: Failed to register a ServiceWorker for scope ('https://mysite.com/') with script ('https://mysite.com/undefinedservice-worker.js'): A bad HTTP response code (404) was received when fetching the script.

The base setting of my vite.config.js is as follows:

base: process.env.NODE_ENV === 'production' ? '' : './',

Should BASE_URL not resolve to '' for production?

Thanks so much!

[userquin]

try using import.meta.env.DEV/PROD for NODE_ENV, import.meta.env.MODE for mode and import.meta.env.BASE_URL for BASE_URL

check https://vitejs.dev/guide/env-and-mode.html#env-variables

[userquin]

is your registerServiceWorker.js inside the src folder? if added to the public folder Vite will just copy it to the dist folder (forgot it, it is in the src folder)

[roarkmccolgan]

Hi Userquin

Thanks for your suggestions
Ok so I’ll replace
‘’’
register(${process.env.BASE_URL}service-worker.js
‘’’
With
‘’’
register(${import.meta.env.BASE_URL}service-worker.js
‘’’

yes it’s in the src directory.
thank you!

[roarkmccolgan]

Hi Again,

@userquin that helped as now there is no 'undefined' when loading service-worker.js
However there is no service-worker.js in my dist or src folder:

Here is what I do have regarding service worker related files in the directories:

// /src
App.vue
main.ts
registerServiceWorker.js
router/
store/
theme/
views/
vite-env.d.ts

// /dist
// ... logos, favicon, etc
registerSW.js
sw.js
assets/
workbox-3e911b1d.js
img/
site.webmanifest

So should my src/registerServiceWorker.js file not reference sw.js
instead of this:

register(`${import.meta.env.BASE_URL}service-worker.js`, {

this:

register(`${import.meta.env.BASE_URL}sw.js`, {

Thanks!

[userquin]

Add filename: 'service-worker.js' to pwa plugin options or change registerServiceWorker.js to use sw.js instead service-worker.js.

FYI: if your application already deployed with old service worker (via register-service-worker) check this entry https://vite-pwa-org.netlify.app/guide/unregister-service-worker.html#custom-selfdestroying-service-worker (you may break your exsiting app)

[roarkmccolgan]

Thanks so much @userquin

Yes, I have the following in my config:

VitePWA({
      registerType: 'autoUpdate',
      selfDestroying: false,
      devOptions: {
        enabled: true
      },
      manifest: false
    }),

So the idea is to deploy once with selfDestroying set to true, then set it to false and deploy again to force the new service worker?

Really appreciate your help on this.

[userquin]

do you have your application deployed? can your shared the repo if public? find me on discord