Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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?)
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.
–
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.
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!
–
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);
–
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.