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

Question

我正在尝试从

导入脚本

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 版本），我也认为与此无关

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

Answer 1

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

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

Service Workers 和

importScripts

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

Answer 2

如果你想使用版本 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);

因为他们改变了像ts这样的lib脚本格式。

如果您仍然想像旧版本一样使用，可以使用兼容版。

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

您仍然可以将版本代码更改为最新。

Answer 3

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

所以我将

angular.json

firebase 版本和 Service Worker 版本同步到 8.10，它成功了！

Answer 4

在网页版-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);

Answer 5

如果您想继续使用纯 JS 服务工作文件以及 >= v9 SDK，您需要像这样重新格式化文件：

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

 库，

-compat

将无法与 v9+ 一起使用，但请注意，这将失去模块化库的所有优势（它将导入所有内容）。

您必须启动您的应用程序，然后调用

firebase.messaging()

让服务人员开始监听。

如果您在应用中使用现代 Firebase 库，则无需注册 Service Worker - 它会找到

firebase-messaging-sw.js

并自动注册。

如果您想使用其中一些答案中提供的其他示例，使用

import

和 v9 模块化语法，则需要在应用程序构建中包含 Service Worker，因为您不能在应用程序中使用

import

纯 JS 文件，不是模块。

DEEz 使用的解决方案是将其库降级到 v8 并继续使用命名空间语法来避免该问题。这当然可行，但在某些时候会阻止升级维护。

我想我应该添加这个答案，因为其他答案都没有完整的“v8”样式工作文件，只是与 v9 示例混合在一起的部分，我发现这令人困惑。