ANGULAR Firebase FCM 发送成功但不可见

Posted 2023-02-24

【中文标题】ANGULAR Firebase FCM 发送成功但不可见

【英文标题】：ANGULAR Firebase FCM send are success but not visible

【发布时间】：2018-02-22 16:42:30

【问题描述】：

我已经设置了我的 angular 5 (jhipster) 网络应用程序来接收 FCM 消息。当我发送 FCM 消息时，我在 POST 中获得了成功，但在我的浏览器或 receiveMessage() 函数中没有出现任何内容。

这是我的设置：

我的项目：

消息服务

@Injectable()
export class MessagingService 

  messaging = firebase.messaging()

  constructor()  

  updateToken(token) 
    console.log("to update : ", token)
  

  getPermission() 
      this.messaging.requestPermission()
      .then(() => 
        console.log('Notification permission granted.');
        return this.messaging.getToken()
      )
      .then(token => 
        console.log(token)
        this.updateToken(token)
      )
      .catch((err) => 
        console.log('Unable to get permission to notify.', err);
      );
    

    receiveMessage() 
       this.messaging.onMessage((payload) => 
        console.log("Message received. ", payload);
      );

    

MessageService 在 main.component.ts 中初始化：

ma​​in.component.ts

@Component(
    selector: 'jhi-main',
    templateUrl: './main.component.html'
)
export class JhiMainComponent implements OnInit 
    constructor(
        private msgService: MessagingService
    ) 
        this.msgService.getPermission()
        this.msgService.receiveMessage()
    

这是我的 app.module.ts

app.module.ts

import  AngularFireModule  from 'angularfire2';
import  environment  from './environment';
import * as firebase from 'firebase';
firebase.initializeApp(environment.firebase);
@NgModule(
    imports: [
        BrowserModule,
        AngularFireModule.initializeApp(environment.firebase),
        ...
     ],
     ...
     bootstrap: [JhiMainComponent]
)

我还有一个网络工作者：

firebase-messaging-sw.js

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

firebase.initializeApp(
    apiKey: <apiKey>,
    authDomain: <authDomain>,
    databaseURL: <databaseURL>,
    projectId: <projectId>,
    storageBucket: <storageBucket>,
    messagingSenderId: <messagingSenderId>
);

const messaging = firebase.messaging();

最后，我的 manifest.webapp 和 .angular-cli.json

ma​​nifest.webapp

  "name": "project",
  "short_name": "project",
  "gcm_sender_id": "103953800507",
   ...

.angular-cli.json

    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": 
        "name": "project"
    ,
    "apps": [
        "root": "src/main/webapp",
        "outDir": "build/www/app",
        "assets": [
            "content",
            "favicon.ico",
            "firebase-messaging-sw.js",
            "manifest.webapp"
            ]
            ....

我如何发送通知：

邮递员：

    "to" : "enxeahE8....ETux", // token from console.log of MessageService.getPermission() 
    "data" : 
        "body" : "First Notification",
        "title": "ALT App Testing"
    

然后我得到了这样的成功：

    "multicast_id": <multicast_id>,
    "success": 1,
    "failure": 0,
    "canonical_ids": 0,
    "results": [
        
            "message_id": <message_id>
        
    ]

但是MessageService的receiveMessage()中没有任何输入或出现在屏幕上。

请帮忙:(

【问题讨论】：

在 https 而不是 http 中工作，这就是为什么它不起作用 => ***.com/a/46546288/5193930

【参考方案1】：

您似乎不在活动标签上。只有当您在活动选项卡上时，才会调用 receiveMessage() 函数。否则将调用后台消息。 希望对你有帮助