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

user_13660726 0
Viewed 4248

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?

script loaded and viewed

laoded

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

file 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?)

angularfire firebase-cloud-messaging angular firebase
4 Answers

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!

user_136607260

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);
user_186907940

I found the following thread helpful at resolving this issue:

https://github.com/firebase/firebase-js-sdk/issues/5403

There appears to be a compatibility issue introduced around Service Workers broadly and the importScripts function. There is a workaround shown in this thread that allows you to use the older style of importing libraries while using the newest (v9) version of Firebase.

user_121975960

If you want to use version 9 you should use code 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);

Because they have changed the lib script format like ts.

if you still want to use like older versions you can use Compat edition.

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

And you can still change version code to latest.

user_52952160
Related