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

Question

我正在尝试将 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)

Answer 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

Answer 2

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

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