Google Firebase Cloud Messaging云消息推送——WEB

最近领导下达一个需求，使用谷歌的云消息推送，本文主要描述，web端集成FCM

准备：

创建一个project项目

• 添加WEB应用程序
  
  
• 按照提示的流程填写，注册
  

开始

• 将firebase js sdk 添加到 html/jsp中
  然后添加如下代码（引入firebase messaging所需要的js库）

 <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-messaging.js"></script>

<script>

    //拿到messaging对象
    var messaging = firebase.messaging();
    //为messaging指定Oauth2.0的token
    messaging.usePublicVapidKey("你自己的token（见控制台）");
    //刷新令牌token时的监听
    messaging.onTokenRefresh(function() {
        messaging.getToken()
            .then(function(refreshedToken) {
                console.log('Token refreshed.');
                console.log("Token******="+refreshedToken)
                //将token发送到服务器
                sendTokenToServer(refreshedToken);
            })
            .catch(function(err) {
                console.log('Unable to retrieve refreshed token ', err);
            });
    });
    //接收消息的监听
    messaging.onMessage(function(payload){
        console.log('Message received. ', payload);
    });
    //获取注册令牌
    function getNoticeToken() {
        //询问用户是否允许****网站弹出提示
        messaging.requestPermission()
            .then(function (value) {
                console.log("permiso concedido");
                messaging.getToken().then(function(currentToken){
                    if (currentToken) {
                        //发送到服务器
                        console.log("TOKEN====="+currentToken);
                        sendTokenToServer(currentToken);
                    } else {
                        console.log('No Instance ID token available. Request permission to generate one.');
                    }
                }).catch(function(err){
                    console.log('An error occurred while retrieving token. ', err);
                });
            }).catch(function (reason) {

            }
        )
    }
    function sendTokenToServer(noticeToken) {
      //发送到服务器的代码段
    }
</script>

• 创建名为firebase-messaging-sw.js的文件放到项目的根目录
  （http://域名:端口/firebase-messaging-sw.js 可以显示其内容）
• firebase-messaging-sw.js添加如下代码 （根据自己配置来）

//导入firebase messaging相关js库
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js');
//初始化信息（控制带有提供）
var firebaseConfig = {
    apiKey: "*******",
    authDomain: "*******",
    databaseURL: "********",
    projectId: "*******",
    storageBucket: "*******",
    messagingSenderId: "*******",
    appId: "*******",
    measurementId: "*******"
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

代码很简单，api里讲的很详细（本文不过多阐述）
参考: Firebase messaging api

测试

PostMan测试工具

• 请求地址

POST https://fcm.googleapis.com/fcm/send

• headers

Content-Type=application/json
Authorization=bearer AAAAJzz****-lINVaOx//根据自己的配置（api密钥）

• 请求体
  api是根据是否有 notification 判断是 通知消息 还是 数据信息（不会弹出通知）
  有 notification的是通知消息
  没有 notification的是数据信息

{ 
	"data": {
    "score": "5x1",
    "time": "15:10"
	},
	 "notification" : {
      "body" : "一个消息推送"
         },
	"to" : "目标token令牌"
}

• 如测试成功响应体如下

{
    "multicast_id": 726573******,
    "success": 1,
    "failure": 0,
    "canonical_ids": 0,
    "results": [
        {
            "message_id": "0:*********"
        }
    ]
}

• 浏览器控制台打印结果
  
• 在 messaging.onMessage函数中对数据进行相应的处理

结束

如有不妥，请评论区指出