最近领导下达一个需求,使用谷歌的云消息推送,本文主要描述,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函数中对数据进行相应的处理
结束
如有不妥,请评论区指出