firebase-messaging-sw.js 不允许导入语句。 如何在Angular中使用firebase onBackgroundMessage？

Question

我正在尝试在我的 Angular 项目中实施 Firebase 消息服务。

Firebase 当应用程序处于焦点状态时 onMessage 工作正常，但我无法弄清楚如何使用 onBackgroundMessage 并向用户显示系统通知。

我遵循了这个Firebase 消息指南，但无法像指南中那样从“firebase/messaging/sw”导入 onBackgroundMessage。

如果我使用 import 语句，它说 import 语句不能在模块外使用。

目前我的 firbase-messaging-sw.js 看起来像这样。

importScripts("https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.1.3/firebase-messaging-compat.js");
console.log('123asd123ascd')
const app = firebase.initializeApp({
  apiKey: "AIzaSyAyGD0QIxpGieOtvEvFBzJMO5l5WnQxwEw",
  authDomain: "notifications-test-a3170.firebaseapp.com",
  projectId: "notifications-test-a3170",
  storageBucket: "notifications-test-a3170.appspot.com",
  messagingSenderId: "301382591226",
  appId: "1:301382591226:web:7646ab699982008f35df43",
  measurementId: "G-E58TMQZWLP",
  senderId: 301382591226,
});
const messaging = firebase.messaging(app);

我想要这样的 firebase-messaing-sw.js

import { getMessaging } from "firebase/messaging";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Answer 1

您需要从导入 firebase 服务的文件中导出一些内容。 无论如何，您需要在某处包含对onBackgroundMessage的调用，否则它不会运行。 我不知道self指的是什么。