others-Firebase推送CloudMessaging之Web

分类于

others-Firebase推送CloudMessaging之Web

前篇

使用流程

  1. firebase 控制台创建 APP, https://console.firebase.google.com/, 拿到 配置信息 和 公钥

    • 配置信息

      1
      2
      3
      4
      5
      6
      7
      8
      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"
      };

    • 公钥

      1
      const publicKey = "BApICE8fijLZVvK5OvgAUwYTWw7VVyC3haaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

  2. 项目内 npm 安装依赖库

    1
    npm install firebase

  3. 运行时获取到 推送 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);
        });
    }

  4. 测试

    1. firebase 后台可以直接测试

      image-20231222144835552

表现

  • 收到通知都需要依赖进程存在, 比如 chrome 打开网页的话就需要 chrome 进程是存在的

window pc 浏览器

  1. 需要允许通知

    image-20231222145116231

  2. 通知会在右下角弹出来, 但没有具体内容

    image-20231222145240894

Android

  1. 获取 token 时需要授权

    image-20231222145420615

  2. 会在顶栏多一个 chrome 的小图标, 没有其他任何提示

    image-20231222145608375

    下拉下来能看到通知, 但是没有具体内容

    image-20231222145716168

踩坑

未授权报错

  • 报错

    1
    FirebaseError: Messaging: The notification permission was not granted and blocked instead. (messaging/permission-blocked).

  • 原因有可能是以下两个原因

    • 该网站禁止了通知, 打开通知即可

      image-20231222111916675

    • 使用了 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 文件, 这个文档中也要求创建个空文件