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指的是什么。