未捕获的 DOMException：无法在“WorkerGlobalScope”上执行“importScripts”答案

【问题标题】：Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'未捕获的 DOMException：无法在“WorkerGlobalScope”上执行“importScripts”
【发布时间】：2022-06-17 01:02:53
【问题描述】：

我正在尝试从

导入脚本

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

它用于 Firebase 云消息传递 (FCM)，但不知道为什么 Angular 不喜欢在 ServiceWorker 上导入

它导入它（单击错误 URL 并获取脚本）但不知何故未能加载？

错误在这里：

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">

尝试使用 fireship 的实现 https://www.youtube.com/watch?v=z27IroVNFLI&t=140s&ab_channel=Fireship 但也不起作用（相同的实现只是不同的 firebase 版本），我也认为与此无关

我的理论是我认为它真的没有加载，而我查看的是控制台请求？（因为文件名是（索引）在意味着它没有文件名因此不存在？）

【问题讨论】：

标签： angular firebase firebase-cloud-messaging angularfire

【解决方案1】：

解决了半天我认为它需要旧版本的 firebase (9.1.0 => 8.10)

所以我将angular.json firebase 版本和 service worker 版本同步到了 8.10 并且成功了！

【讨论】：

如果有人解释在 9.1.0 上发生了哪些脚本无法加载的重大变化，那就太好了

【解决方案2】：

在web version-9你必须这样做

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

【讨论】：

【解决方案3】：

Las importaciones en el archivo firebase-messaging-sw.js，deben ser asi（Firebase 版本：9.8.3）：

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

En el archivo app.component.ts：

import firebase from 'firebase/compat/app';
import 'firebase/compat/messaging';

【讨论】：

【解决方案4】：

我发现以下主题有助于解决此问题：

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

Service Worker 和importScripts 函数似乎存在兼容性问题。此线程中显示了一种解决方法，允许您在使用最新 (v9) 版本的 Firebase 时使用旧样式的导入库。

【讨论】：

抱歉，我反射性地点击了提交。已添加上下文！