Nuxtjs SSR deployment on Vercel with OneSignal

Question

I'm trying to deploy my nuxt SSR application on vercel with PWA and OneSignal modules. I do get the push notification subscribe popup, but when I click 'Subscribe', the following error occurs in the console.

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://cdn.onesignal.com/sdks/OneSignalSDK.js' failed to load.
    at https://mysite.vercel.app/OneSignalSDKWorker.js?appId=49dd0e5c-6cb2-4b35-986d-b7c2b31861fa:1:1
(anonymous) @ OneSignalSDKWorker.js?appId=49dd0e5c-6cb2-4b35-986d-b7c2b31861fa:1
An unknown error occurred when fetching the script.
ServiceWorkerManager.js:363 [Service Worker Installation] Installing service worker failed TypeError: Failed to register a ServiceWorker for scope ('https://mysite.vercel.app/') with script ('https://mysite.vercel.app/OneSignalSDKWorker.js?appId=49dd0e5c-6cb2-4b35-986d-b7c2b31861fa'): ServiceWorker script evaluation failed

Here's my vercel.json file:

{
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": ["package.json"]
      }
    }
  ],
  "routes": [
    {
      "src": "/sw.js",
      "continue": true,
      "headers": {
        "Cache-Control": "public, max-age=0, must-revalidate",
        "Service-Worker-Allowed": "/"
      }
    },
    {
      "src": "/OneSignalSDKWorker.js",
      "continue": true,
      "headers": {
        "Cache-Control": "public, max-age=0, must-revalidate",
        "Service-Worker-Allowed": "/"
      }
    }
  ]
}

and my nuxt.config.js file:

export default {
  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL,
    resourceURL: process.env.RESOURCE_URL
  },

  head: {
    title: "MySite",

    htmlAttrs: {
      lang: "en"
    },

    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "og:site_name", property: "og:site_name", content: "mysite" },
      { hid: "og:type", property: "og:type", content: "website" },
      { hid: "twitter:site", name: "twitter:site", content: "@mysite" },
      {
        hid: "twitter:card",
        name: "twitter:card",
        content: "summary_large_image"
      },
      {
        hid: "og:image:alt",
        property: "og:image:alt",
        content: "NuxtJS"
      },
      {
        hid: "twitter:image",
        name: "twitter:image",
        content: "https://mysite.vercel.app/og.jpg"
      }
    ],
    link: [
      {
        rel: "icon",
        type: "image/x-icon",
        href: "/favicon.ico"
      },
      {
        rel: "stylesheet",
        href:
          "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Open+Sans:wght@400;500;600;700&display=swap"
      }
    ]
  },

  css: ["~/assets/scss"],

  plugins: ["~/plugins/axios", "~/plugins/moment"],

  components: true,

  buildModules: [
    "@nuxtjs/eslint-module",
    "@nuxtjs/tailwindcss",
    "@nuxt/image",
    "@nuxtjs/moment",
    "@nuxtjs/onesignal",
    "@nuxtjs/pwa"
  ],

  modules: ["@nuxtjs/axios", "nuxt-svg-loader"],

  axios: {},

  oneSignal: {
    cdn: true,
    OneSignalSDK: "https://cdn.onesignal.com/sdks/OneSignalSDK.js",
    init: {
      appId: process.env.ONESIGNAL_APP_ID,
      allowLocalhostAsSecureOrigin: true
    },
    importScripts: ["/sw.js"]
  },

  content: {},

  build: {}
};

Does anyone know what am I missing? Also, I don't see the PWA icon on the address bar (which would allow you to install the PWA app)

Answer 1

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://cdn.onesignal.com/sdks/OneSignalSDK.js' failed to load.

It seems that https://cdn.onesignal.com/sdks/OneSignalSDK.js did not load on your site.

It could be the browser (like Brave) or with Chrome, an extension is blocking OneSignal

However, we just check your URL and it is getting a 404. But based on the error it seems they had this hosted correctly before

https://mysite.vercel.app/OneSignalSDKWorker.js?appId=49dd0e5c-6cb2-4b35-986d-b7c2b31861fa

Another problem could be that you don't have the service workers files from OneSignal. Push notifications in general depend on service workers to be triggered in your web app.

You can find more information here about the OneSignal Service Workers and the files of the SW to be downloaded.

More resources:

• https://documentation.onesignal.com/docs/web-push-typical-setup

• https://documentation.onesignal.com/docs/troubleshooting-web-push#pwa-or-multiple-service-workers