Angular 6 Web 应用程序中推送通知的 FCM 设置

Posted 2023-02-24

【中文标题】Angular 6 Web 应用程序中推送通知的 FCM 设置

【英文标题】：FCM setup for push notification in angular 6 web app

【发布时间】：2018-07-13 08:03:42

【问题描述】：

我正在尝试将 fcm 集成到我的 angular 6 中。

这是我所做的。

firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');

firebase.initializeApp(
  'messagingSenderId': '93480234033'
);

const messaging = firebase.messaging();

push-notification.js

import firebase from 'firebase';

export const askForPermissioToReceiveNotifications = async () => 

  try 
    const messaging = firebase.messaging();
    console.log('000ooppp', messaging)
    messaging.requestPermission()
      .then(function()
    console.log('I am in here');

    return messaging.getToken()
  .then(function(currentToken) 
    console.log(currentToken);
  )

    ).catch(function(err) 
      console.log('Unable to get permission to notify.', err);
    );
   catch (error) 
    console.error(error);
  

这两个文件在 src 文件夹中。

我已经在 firebase 控制台上创建了一个应用程序，并且我已经获得了配置对象

config: 
    apiKey: "*****",
    authDomain: "*****",
    databaseURL: "*****",
    projectId: "*****",
    storageBucket: "*****",
    messagingSenderId: "*****"
  

在我的 app.module.ts 文件中，我正在使用上述对象初始化 firebase

import  AngularFireModule  from 'angularfire2';
import  ServiceWorkerModule  from '@angular/service-worker';

然后在导入中

imports: [
    ...
    ... 
    AngularFireModule.initializeApp(environment.firebase),
    ServiceWorkerModule.register('/combined-worker.js',  enabled: environment.production )
    ...
    ...
]

在 app.component.ts 中

import  askForPermissioToReceiveNotifications  from './../push-notification';


ngOnInit () 
    console.log('pop')
    askForPermissioToReceiveNotifications();
  

我想要做的是当用户登陆页面并且他允许向他显示通知时，应该为该特定用户生成唯一的设备令牌 ID，当他点击显示时我如何生成设备令牌 ID通知？

在控制台中收到此错误

Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)

【问题讨论】：

不确定您是否在正确的位置调用了 initializeApp。请查看github.com/angular/angularfire2/blob/master/docs/…

【参考方案1】：

src/firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

var config = 
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
;
firebase.initializeApp(config);

const messaging = firebase.messaging();

现在在 app.module.ts

import BrowserModule from '@angular/platform-browser';
import NgModule from '@angular/core';
import AppComponent from './app.component';
import  AngularFireModule  from 'angularfire2';
import  AngularFireMessagingModule  from 'angularfire2/messaging';

const config = 
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: ''
;

@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    AngularFireModule.initializeApp(config),
    AngularFireMessagingModule
  ],
  bootstrap: [AppComponent]
)
export class AppModule 

在您希望获得发送通知权限的组件内部：

    import Component, OnInit from '@angular/core';
    import  AngularFireMessaging  from 'angularfire2/messaging';
    import  mergeMapTo  from 'rxjs/operators';

    export class HomeComponent implements OnInit 

        constructor(private _messaging: AngularFireMessaging) 

        

        ngOnInit() 
            /* request permission */
            this._messaging.requestPermission
            .pipe(mergeMapTo(this._messaging.tokenChanges))
            .subscribe(token => 
              console.log(token);
            , err => console.log(err));

            /* listen for messages */
            this._messaging.messages.subscribe((message: notification) =>  
               console.log(message.notification.title);
               console.log(message.notification.body);
             );
        
    

Remember that there 2 ways receiving push notifications
1) when the app is open:
    you'll have to handle it showing the message  
2) when the app is closed:
    the browser handle it for you

【参考方案2】：

你好@wazz 尝试在你的 app.module.ts 中设置你的 firebase 配置并导入 firebase

import * as firebase from 'firebase';
...
firebase.initializeApp(firebase_config);