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

If you want to keep using a plain-JS service worker file along with >= v9 SDK you need to reformat the file like this:

public/firebase-messaging-sw.js

// v8/namespaced style service worker
importScripts('https://www.gstatic.com/firebasejs/10.1.0/firebase-app-compat.js')
importScripts('https://www.gstatic.com/firebasejs/10.1.0/firebase-messaging-compat.js')

const firebase_config = {
    apiKey: "...",
    projectId: "...",
    messagingSenderId: "...",
    appId: "...",
}
firebase.initializeApp(firebase_config)
firebase.messaging()

importScripts wont work with v9+ without using the -compat library, but note this will lose all benefits of the modular library (it will import everything).

You have to boot your app, and call firebase.messaging() for the service worker to start listening.

If you are using the modern Firebase libraries in your app, you don't need to register the service worker - it will find firebase-messaging-sw.js and register it automatically.

If you wanted to use the other examples provided in some of these answers, using import and the v9 modular syntax, you would need to include the service worker in your app build, as you can't use import in a plain JS file which isn't a module.

The solution DEEz used was to avoid the problem by downgrading their library to v8 and continue using the namespaced syntax. This would work of course, but at some point will block the upgrade maintenance.

I thought I'd add this answer, as non of the other answers had a complete "v8" style worker file, just parts mixed in with v9 examples which I found confusing.