添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
安静的便当  ·  ThingsBoard CE v2.4.0 ...·  4 月前    · 
纯真的黑框眼镜  ·  Office ...·  10 月前    · 
英俊的书签  ·  python timedate 相关 ...·  1 年前    · 
慈祥的消炎药  ·  Python for ...·  1 年前    · 
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.

Issue still persists as of today, new threads related to it: github.com/firebase/firebase-js-sdk/issues/6844 and github.com/firebase/firebase-js-sdk/issues/7030 – nCr78 May 19 at 14:44

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!

it would be great if someone explain what breaking changes happened on 9.1.0 that the script failed to load – DEEz Jan 27, 2022 at 9:08

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);
                How is "firebase/app" pinned to the proper gstatic script? gstatic.com/firebasejs/4.8.1/firebase-app.js  Is there an importmap required to go with this?
– Kevin
                Apr 29 at 0:26
        

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.