CODEWITHSUNDEEP
progressive-web-appsonesignalvercelnuxt.js
user1012181
user1012181

Reputation: 8726

Nuxtjs SSR deployment on Vercel with OneSignal

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)

Upvotes: 1

Views: 631

Answers (1)

Patricio Vargas
Patricio Vargas

Reputation: 5522

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:

Upvotes: 1

Related Questions