Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'

Question

i am trying to import scripts from

importScripts("https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/9.1.0/firebase-messaging.js");

its for firebase cloud messaging (FCM) but idk why angular does not like to import on a ServiceWorker

it imports it (clicked the error URL and got the script) but somehow failed to load?

error is here:

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js' failed to load.
    at initInSw (http://localhost:4200/firebase-messaging-sw.js:35:1)
    at http://localhost:4200/firebase-messaging-sw.js:56:1

angular.json

"assets": [
          "src/favicon.ico",
          "src/assets",
          "src/manifest.json",
          "src/firebase-messaging-sw.js"
        ],

index.html

  <link rel="manifest" href="/manifest.json">

directory

tried to use fireship's implementation https://www.youtube.com/watch?v=z27IroVNFLI&t=140s&ab_channel=Fireship but does not work either (same implementation just different firebase version) and i also think theres nothing to do with this

my theory is that i think it really didnt load and the one that i viewed is the console request? (because the filename is (index) in means that it has no filename thus not exist?)

Answer 1

after solving it for half a day I figured that it needs an older version of firebase (9.1.0 => 8.10)

so I synced up the angular.json firebase version and the service worker version to 8.10 and it worked!

Answer 2

In web version-9 You have to do like this

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

const messaging = getMessaging(firebaseApp);