Firebase 實作瀏覽器推播

應用:

1. Firebase storage (Cloud storage)
2. Realtime Database
3. Cloud Message
4. Authentication

本篇將使用 Cloud Message For Web 以實作 web 推播

1. 創建 Firebase project

2. 進入 Firebase Console

3. 新增 Web 應用完至 project 後會得到類似以下的設定，該設定可以在專案設定中查看, 所以在該頁面沒有複製起來是沒有關係的

4. 產生 Web Credentials

4–1 點選雲端通訊 tab, 並且滑至最下方

4–2 新增網路推播憑證 (Web Credentials)

產生的 web credentials 就是文件所謂的 vapidKey

5. 本地會需要啟動 Firebase emulator(用於本地測試) ，所以需要使用 npm 安裝 firebase-tools package

npm install -g firebase-tools

6. 使用 firebase login 登入 firebase

firebase login

使用 firebase login 後會出現以下資訊

7. 啟動 firebase emulator

firebase emualtors:start

記得需初始化 firebase setting

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

firebase.initializeApp({
  apiKey: '{apiKey}',
  authDomain: '{authDomain}',
  databaseURL: '{databaseURL}',
  projectId: '{projectId}',
  storageBucket: '{storageBucket}',
  messagingSenderId: '{messagingSenderId}',
  appId: '{appId}',
  measurementId: '{measurementId}',
});

const messaging = firebase.messaging();

瀏覽器還需要請求權限(request permission)

Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');
    } else {
      console.log('Unable to get permission to notify.');
    }
});

使用 getToken 取得 registeration token

ps: 要記住 token 以利於後端之後發送推播

getToken(messaging, { vapidKey }).then((currentToken) => {
    if (currentToken) {
      // 發送 token 到後端，以利於後端之後可以使用此 token 推播訊息
    } else {
      // Show permission request.
      console.log('No registration token available. Request permission to generate one.');
    }
  }).catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
  });

8. 發送 web notification

所需套件

pip3 install request google-auth

python file

import json
import google.auth.transport.requests
import requests
from google.oauth2 import service_account

# 你的 JSON 文件路径
SERVICE_ACCOUNT_FILE = "{service_account}.json"

# 认证
credentials = service_account.Credentials.from_service_account_file(
    SERVICE_ACCOUNT_FILE, scopes=["https://www.googleapis.com/auth/firebase.messaging"]
)
request = google.auth.transport.requests.Request()
credentials.refresh(request)
access_token = credentials.token

# FCM v1 API 端点
url = f"https://fcm.googleapis.com/v1/projects/{credentials.project_id}/messages:send"

# 你的 FCM Token
device_token = "{device token}"

# 消息内容
headers = {
    "Authorization": f"Bearer {access_token}",
    "Content-Type": "application/json"
}
data = {
    "message": {
        "token": device_token,
        "notification": {
            "title": "🔥 FCM v1 API 测试",
            "body": "这是使用 FCM v1 API 发送的通知！"
        }
    }
}

# 发送请求
response = requests.post(url, headers=headers, json=data)
print(response.json())

執行完後右上角會出現 web notification

參考文件

Set up a JavaScript Firebase Cloud Messaging client app

使用 Firebase 快速建立網頁推播服務 Web Push Notifications Service

參考文件:

What is Firebase? The complete story, abridged.

google-auth

Understand Firebase for Web | Firebase for Web platforms