Skip to content
Edge Functions

发送推送通知

推送通知是任何移动应用的重要组成部分。它们允许你即使在用户没有使用你的应用时，也能向他们发送通知。本指南将向你展示如何从 Supabase edge 函数向不同的移动应用框架发送推送通知。

🌐 Push notifications are an important part of any mobile app. They allow you to send notifications to your users even when they are not using your app. This guide will show you how to send push notifications to different mobile app frameworks from your Supabase edge functions.

Expo makes implementing push notifications easy. All the hassle with device information and communicating with Firebase Cloud Messaging (FCM) or Apple Push Notification Service (APNs) is done behind the scenes. This allows you to treat Android and iOS notifications in the same way and save time both on the frontend and backend.

在 GitHub 上找到示例代码。

Supabase 设置#

Expo 设置#

要使用 Expo 的推送通知服务，你需要通过安装一系列库、实现处理通知的函数，并为 Android 和 iOS 设置凭证来配置你的应用。按照官方的 Expo 推送通知设置指南 获取 Android 和 iOS 的凭证。这个项目使用 Expo 的 EAS 构建 服务来简化这部分操作。

  1. 安装依赖：npm i
  2. 创建一个 新的 Expo 项目
  3. 把这个应用连接到你的项目：npm install --global eas-cli && eas init --id your-expo-project-id
  4. 为你的实体设备创建一个版本
  5. 启动你的项目开发服务器：npx expo start --dev-client
  6. 用你的实体设备扫描终端上显示的二维码。
  7. 注册/登录以在 Supabase Auth 创建用户。

推送通知的增强安全性

  1. 导航到你的 Expo 访问令牌设置。
  2. 为在 Supabase Edge Functions 中使用创建一个新令牌。
  3. 开启“推送通知增强安全”功能。
  4. 创建本地 .env 文件：cp .env.local.example .env.local
  5. 在新创建的 .env.local 文件中，设置你的 EXPO_ACCESS_TOKEN 值。

部署 Supabase Edge 函数#

用于发送推送通知的数据库 webhook 处理程序位于 supabase/functions/push/index.ts。将该函数部署到你的关联项目，并设置 EXPO_ACCESS_TOKEN 秘密。

  1. supabase functions deploy push
  2. supabase secrets set --env-file .env.local
1
import { withSupabase } from 'npm:@supabase/server@^1'
2
3
console.log('Hello from Functions!')
4
5
interface Notification {
6
  id: string
7
  user_id: string
8
  body: string
9
}
10
11
interface WebhookPayload {
12
  type: 'INSERT' | 'UPDATE' | 'DELETE'
13
  table: string
14
  record: Notification
15
  schema: 'public'
16
  old_record: null | Notification
17
}
18
19
// Triggered by a Database Webhook, which authenticates with a secret key.
20
// Deploy with `verify_jwt = false`.
21
export default {
22
  fetch: withSupabase({ auth: 'secret' }, async (req, ctx) => {
23
    const payload: WebhookPayload = await req.json()
24
    const { data } = await ctx.supabaseAdmin
25
      .from('profiles')
26
      .select('expo_push_token')
27
      .eq('id', payload.record.user_id)
28
      .single()
29
30
    const res = await fetch('https://exp.host/--/api/v2/push/send', {
31
      method: 'POST',
32
      headers: {
33
        'Content-Type': 'application/json',
34
        Authorization: `Bearer ${Deno.env.get('EXPO_ACCESS_TOKEN')}`,
35
      },
36
      body: JSON.stringify({
37
        to: data?.expo_push_token,
38
        sound: 'default',
39
        body: payload.record.body,
40
      }),
41
    }).then((res) => res.json())
42
43
    return Response.json(res)
44
  }),
45
}

创建数据库网络钩子

在你的 Supabase 控制面板中，前往 数据库 Webhooks 设置。

  1. 启用并创建一个新的钩子。
  2. 触发 webhook 的条件：选择 notifications 表并勾选 Insert 事件。
  3. Webhook 配置：Supabase Edge 功能。
  4. 边缘功能：选择 push 边缘功能，并将方法保持为 POST，超时保持为 1000。
  5. HTTP 头：点击“添加新头” > “使用服务密钥添加认证头”，然后保留 Content-type: application/json。
  6. 点击“创建 webhook”。

发送推送通知

  1. 在你的 Supabase 仪表板中，导航到 表格编辑器。
  2. 在你的 notifications 表中，插入一行新数据。
  3. 看魔法发生 🪄