Firebase 服务工作者和 Angular

编程问答 2022-04-24

问题描述

我想显示带有操作按钮的通知。
这只能通过 serviceWorker.showNotification API 实现。

我有一个带有 firebase-messaging-sw.js 服务工作者的 Angular 9 应用程序，如 Firebase 消息传递文档中所述。

当页面在后台时使用Service Worker。
在 firebase-messaging-sw.js 中，我发送通知：

self.registration.showNotification(notificationTitle,notificationoptions);

如果应用程序在前台，我需要使用操作按钮显示相同的通知。 所以我需要在 Angular Service TypeScript 文件中访问同一个 firebase service worker，但 self.registration 当然不起作用。

如何访问已注册的 Firebase Service Worker 以在我的 Angular TypeScript 文件中显示带有操作按钮的通知？

解决方法

创建 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 将返回一个令牌，该令牌可用作向 browser.receiveMessage() 发送通知的参考：收到新消息时将触发此函数。

angularfirebasefirebaseservice-worker