如何使用 NativeScript 和 Angular 接收推送通知？答案

【问题标题】：How to receive push notifications with NativeScript & Angular?如何使用 NativeScript 和 Angular 接收推送通知？
【发布时间】：2019-10-22 15:10:34
【问题描述】：

我正在努力让推送通知在我的项目中发挥作用。我正在使用 NativeScript 和 Angular 8 开发一个新项目。

我在 Firebase 创建了一个免费帐户：

https://console.firebase.google.com/

我将我的应用 ID 关联到 Firebase 项目并添加了 Android。我下载了“google-services.json”文件并将其放入 app/App_Resources/Android/google-services.json

我找到了一个用于使用 Firebase 的 NativeScript 插件：

https://github.com/EddyVerbruggen/nativescript-plugin-firebase

我按照 firebase 控制台和插件 github 页面上的步骤操作，但我的手机没有收到任何通知。

如何让我的应用接收推送通知？

这是我的 app.components.ts 文件：

import { Component, OnInit } from "@angular/core";
const firebase = require("nativescript-plugin-firebase");
//import * as firebase from "firebase";

@Component({
    selector: "ns-app",
    templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {

    ngOnInit() {
      firebase.init({

        showNotifications: true,
        showNotificationsWhenInForeground: true,

        // Optionally pass in properties for database, authentication and cloud messaging,
        // see their respective docs.

        onPushTokenReceivedCallback: (token) => {
          console.log('[Firebase] onPushTokenReceivedCallback:', { token });
        },

        onMessageReceivedCallback: (message) => {
          console.log('[Firebase] onMessageReceivedCallback:', { message });
        }

      }).then(
        () => { console.log("firebase.init done"); },
        error => {
          console.log(`firebase.init error: ${error}`);
        }
      );
    }

}

package.json:

{
  "nativescript": {
    "id": "org.nativescript.FireBaseTest2",
    "tns-android": {
      "version": "6.1.2"
    },
    "tns-ios": {
      "version": "6.1.0"
    }
  },
  ....

这是我的推送通知尝试：

【问题讨论】：

你看到来自onPushTokenReceivedCallback的日志了吗？
不，我没有从那里看到任何日志。
尝试在初始化后调用get current push token。
我该怎么做？如果您看到代码 sn-p，则没有调用任何函数，但调用了 firebase init。

标签： angular firebase nativescript

【解决方案1】：

你的代码看起来不错.....

只需在 firebase 初始化时从应用程序控制台日志中复制令牌，然后在将消息发送到目标设备时在 firebase 控制台中使用它。

【讨论】：

【解决方案2】：

在 Nativescript 应用端，您需要执行以下操作才能使用 FCM。

1)将 google-services.json 文件从 fcm 添加到路径

“App_Resources/Android”

2) 如果在 NS 7 以上使用以下版本，请根据您的 ns 版本添加 nativescript firebase 插件

tns 插件添加@nativescript/firebase

3)在“App_Resources/Android/app.gradle 文件中添加以下依赖项

dependencies {
 implementation 'com.google.firebase:firebase-iid'
}

4) 在 app.component.ts 中添加 firebase 初始化代码

    ngOnInit(): void {
       firebase.init({
          showNotifications: true,
          showNotificationsWhenInForeground: true,
    
          onPushTokenReceivedCallback: (token) => {
            console.log('[Firebase] onPushTokenReceivedCallback:', { token });
          },
    
          onMessageReceivedCallback: (message: firebase.Message) => {
            console.log('[Firebase] onMessageReceivedCallback:', { message });
          }
        })
          .then(() => {
            console.log('[Firebase] Initialized');
          })
          .catch(error => {
            console.log('[Firebase] Initialize', { error });
          });
}

【讨论】：