others-Firebase推送CloudMessaging之Web
others-Firebase推送CloudMessaging之Web
前篇
- 官方
- 将 Firebase 添加到您的 JavaScript 项目 - https://firebase.google.com/docs/web/setup?hl=zh-cn#add-sdk-and-initialize
- 设置 Firebase Cloud Messaging 客户端应用 (JavaScript) - https://firebase.google.com/docs/cloud-messaging/js/client
使用流程
firebase 控制台创建 APP, https://console.firebase.google.com/, 拿到 配置信息 和 公钥
配置信息
1
2
3
4
5
6
7
8const firebaseConfig = {
apiKey: "AIzaSyCaaaaaaaaaaa",
authDomain: "webtest-001-d3b93.firebaseapp.com",
projectId: "webtest-001-d3b93",
storageBucket: "webtest-001-d3b93.appspot.com",
messagingSenderId: "657111111111",
appId: "1:111111:web:7ca6e4b11111111"
};公钥
1
const publicKey = "BApICE8fijLZVvK5OvgAUwYTWw7VVyC3haaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
项目内 npm 安装依赖库
1
npm install firebase
运行时获取到 推送 token, 需要上报给服务器推送使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";
const firebaseConfig = {
apiKey: "AIzaSyCaaaaaaaaaaa",
authDomain: "webtest-001-d3b93.firebaseapp.com",
projectId: "webtest-001-d3b93",
storageBucket: "webtest-001-d3b93.appspot.com",
messagingSenderId: "657111111111",
appId: "1:111111:web:7ca6e4b11111111"
};
const publicKey = "BApICE8fijLZVvK5OvgAUwYTWw7VVyC3haaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
public static getToken() {
console.log('--- getToken begin')
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
getToken(messaging, { vapidKey: publicKey }).then((currentToken) => {
if (currentToken) {
console.log('--- currentToken:', currentToken) // 推送时需要用的 token
} else {
console.log('--- No registration token available. Request permission to generate one.');
}
}).catch((err) => {
console.log('--- An error occurred while retrieving token. ', err);
});
}测试
firebase 后台可以直接测试
表现
- 收到通知都需要依赖进程存在, 比如 chrome 打开网页的话就需要 chrome 进程是存在的
window pc 浏览器
需要允许通知
通知会在右下角弹出来, 但没有具体内容
Android
获取 token 时需要授权
会在顶栏多一个 chrome 的小图标, 没有其他任何提示
下拉下来能看到通知, 但是没有具体内容
踩坑
未授权报错
报错
1
FirebaseError: Messaging: The notification permission was not granted and blocked instead. (messaging/permission-blocked).
原因有可能是以下两个原因
该网站禁止了通知, 打开通知即可
使用了 http, 换成 https 就没这个错了
无法注册服务
报错
1
FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('https://www.aaa.com/firebase-cloud-messaging-push-scope') with script ('https://www.aaa.com/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration).
原因是在 web 目录中缺少
firebase-messaging-sw.js
文件, 这个文档中也要求创建个空文件