Firebase 服務人員和 Angular

Question

我想顯示帶有操作按鈕的通知。
這僅適用於 serviceWorker.showNotification API。

我有一個 Angular 9 應用程序和firebase-messaging-sw.js服務工作者，如 Firebase 消息傳遞文檔中所述。

當頁面在后台時使用服務工作者。
在firebase-messaging-sw.js我發送通知：

self.registration.showNotification(notificationTitle,
        notificationOptions);

如果應用程序在前台，我需要使用操作按鈕顯示相同的通知。 所以我需要在 Angular 服務 TypeScript 文件中訪問同樣的 firebase 服務工作者，但self.registration當然不起作用。

如何訪問已注冊的 Firebase 服務人員以在我的 Angular TypeScript 文件中顯示帶有操作按鈕的通知？

Answer 1

創建 firebase-messaging-sw.js 推送消息需要服務工作者。 這允許您的應用程序檢測新消息，即使在用戶關閉應用程序之后也是如此。 並在 src/ 目錄下的 manifest.json 文件的同一目錄中創建此文件。

注意：- 在導入以下腳本之前，您需要檢查最新版本，最好導入最新版本的 CDN 鏈接，所以這里我導入 7.6.0 版本的鏈接。

importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js');
firebase.initializeApp({
    apiKey: “from firebase config”,
    authDomain: “from firebase config”,
    databaseURL: “from firebase config”,
    projectId: “from firebase config”,
    storageBucket: “from firebase config”,
    messagingSenderId: “from firebase config”,
    appId: “from firebase config”,
    measurementId: “from firebase config”
});
const messaging = firebase.messaging();

我們需要在 angular-cli.json 中注冊這些文件

"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/firebase-messaging-sw.js", // add this one
    "src/manifest.json" // this one also 
]

您可以參考下面的服務代碼代碼。

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { BehaviorSubject } from 'rxjs'
@Injectable()
export class MessagingService {
    currentMessage = new BehaviorSubject(null);
    constructor(private angularFireMessaging: AngularFireMessaging) {
    this.angularFireMessaging.messaging.subscribe(
    (_messaging) => {
    _messaging.onMessage = _messaging.onMessage.bind(_messaging);
    _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
    }
    )
    }
    requestPermission() {
    this.angularFireMessaging.requestToken.subscribe(
    (token) => {
    console.log(token);
    },
    (err) => {
    console.error('Unable to get permission to notify.', err);
    }
    );
    }
    receiveMessage() {
    this.angularFireMessaging.messages.subscribe(
    (payload) => {
    console.log("new message received. ", payload);
    this.currentMessage.next(payload);
    })
    }
}

讓我們了解它的功能requestPermission() ：瀏覽器/設備將要求用戶允許接收通知。 用戶授予權限后，firebase 將返回一個令牌，可用作向瀏覽器發送通知的參考。receiveMessage browser.receiveMessage() ：當收到新消息時，將觸發此 function。