序言

• 實時推送通知的重要性
• 介紹 Deno、Supabase 和 Firebase Cloud Messaging (FCM)

使用 Deno 和 Supabase 設定伺服器

• Deno 簡介及其特點
• 設定 Supabase 客戶端
• 通過環境變數安全地管理設定

實時偵測資料庫變更

• 介紹 Supabase 的實時功能
• 定義偵測資料庫變更的介面

使用 Firebase Cloud Messaging 發送推送通知

• FCM 的作用和重要性
• 使用 Google 服務帳戶獲取存取權杖
• Deno 伺服器中使用 FCM 發送推送通知的邏輯

結論

• 使用 Deno、Supabase 和 FCM 的系統優點
• 實時推送通知系統對使用者體驗的貢獻

1. 序言

在當今的數位時代，實時推送通知是提升使用者體驗的關鍵因素。本文將探討如何使用 Deno、Supabase 和 Firebase Cloud Messaging (FCM) 建立實時推送通知系統。本文面向對 Deno 和雲服務感興趣的開發人員。

2. 使用 Deno 和 Supabase 設定伺服器

Deno 是一個現代化的 JavaScript 和 TypeScript 執行時環境，旨在克服 Node.js 的限制。 Supabase 是一個基於 PostgreSQL 的開源後端服務，提供實時資料庫功能。結合這兩種技術，可以建立強大且靈活的後端系統。

程式碼範例：設定 Supabase 客戶端

import { createClient } from 'npm:@supabase/supabase-js@2'
const supabase = createClient(
Deno.env.get('SUPABASE_URL')!,
Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!

這段程式碼展示了如何初始化 Supabase 客戶端。這裡使用 Deno 的環境變數功能，安全地管理 Supabase 連線資訊。

3. 實時偵測資料庫變更

利用 Supabase 的 Web Hook 功能，可以立即偵測資料庫的變更並做出響應。這樣可以讓使用者快速收到最新資訊。

程式碼範例：定義 Webhook 載荷

interface Post {
id: string
title: string
content: string
}
interface WebhookPayload {
type: 'INSERT'
table: string
record: Post
schema: 'public'
}
// 當 posts 表格新增新文章時，向所有使用者發送推送通知的函數
Deno.serve(async (req) => {
// 從請求中提取 Webhook 載荷。
const payload: WebhookPayload = await req.json()
console.log("payload: ", payload);

這些介面用於處理 Supabase 中發生的資料變更事件。Post 介面定義了文章資料結構，WebhookPayload 定義了從 Webhook 接收到的資料結構。

4. 使用 Firebase Cloud Messaging 發送推送通知

FCM 是一個強大的服務，可以跨多個平台發送推送通知。從 Deno 伺服器使用 FCM 發送通知，使用者可以立即收到新文章或重要更新的通知。

程式碼範例：使用 FCM 發送推送通知

import serviceAccount from '../serviceAccountKey.json' with { type: 'json' }
// 從 Google 服務帳戶獲取存取權杖的函數
const getAccessToken = ({
clientEmail,
privateKey,
}: {
clientEmail: string
privateKey: string
}): Promise => {

這段程式碼展示了 Deno 伺服器使用 FCM 發送推送通知的過程。這裡使用 Google 服務帳戶獲取 FCM 所需的存取權杖。

5. 結論

使用 Deno、Supabase 和 FCM 建立實時推送通知系統，在現代網頁開發中非常有用。通過這個系統，開發人員可以向使用者提供即時資訊傳遞和更佳的互動體驗。本文介紹的技術和程式碼範例，將幫助開發人員獲得建立自己的實時通知系統所需的知識和工具。