角6 web应用程序中推送通知的FCM设置

Question

我正在尝试将fcm集成到我的角度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对象。

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

在我的app.module.ts文件中，我使用上面的对象初始化了防火墙

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 {
}

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

    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

Hello @wazz尝试在您的app.module.ts中设置您的防火墙配置并导入防火墙

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