边缘函数

发送推送通知

推送通知是任何移动应用的重要组成部分。它们允许您在用户未使用应用时向其发送通知。本指南将展示如何从Supabase边缘函数向不同移动应用框架发送推送通知。

Expo让推送通知的实现变得简单。所有关于设备信息以及与Firebase云消息(FCM)或苹果推送通知服务(APNs)通信的复杂操作都在后台处理。这使得您可以统一处理Android和iOS通知，节省前后端开发时间。

示例代码可在GitHub找到。

Supabase设置

  • 创建新Supabase项目
  • 链接项目：supabase link --project-ref your-supabase-project-ref
  • 本地启动Supabase：supabase start
  • 推送数据库模式：supabase db push（模式定义在supabase/migrations）

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边缘函数创建新令牌
  3. 启用"推送通知增强安全性"
  4. 创建本地.env文件：cp .env.local.example .env.local
  5. 在新创建的.env.local文件中设置EXPO_ACCESS_TOKEN值

部署Supabase边缘函数

发送推送通知的数据库webhook处理程序位于supabase/functions/push/index.ts。将函数部署到链接的项目并设置EXPO_ACCESS_TOKEN密钥。

  1. supabase functions deploy push
  2. supabase secrets set --env-file .env.local
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { createClient } from 'jsr:@supabase/supabase-js@2'console.log('Hello from Functions!')interface Notification {  id: string  user_id: string  body: string}interface WebhookPayload {  type: 'INSERT' | 'UPDATE' | 'DELETE'  table: string  record: Notification  schema: 'public'  old_record: null | Notification}const supabase = createClient(  Deno.env.get('SUPABASE_URL')!,  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!)Deno.serve(async (req) => {  const payload: WebhookPayload = await req.json()  const { data } = await supabase    .from('profiles')    .select('expo_push_token')    .eq('id', payload.record.user_id)    .single()  const res = await fetch('https://exp.host/--/api/v2/push/send', {    method: 'POST',    headers: {      'Content-Type': 'application/json',      Authorization: `Bearer ${Deno.env.get('EXPO_ACCESS_TOKEN')}`,    },    body: JSON.stringify({      to: data?.expo_push_token,      sound: 'default',      body: payload.record.body,    }),  }).then((res) => res.json())  return new Response(JSON.stringify(res), {    headers: { 'Content-Type': 'application/json' },  })})

创建数据库webhook

访问Supabase仪表板的数据库Webhook设置。

  1. 启用并创建新hook
  2. 触发条件：选择notifications表并勾选Insert事件
  3. Webhook配置：选择Supabase边缘函数
  4. 边缘函数：选择push函数，方法保持POST，超时设为1000
  5. HTTP头：点击"添加新头">"添加服务密钥认证头"，保持内容类型为application/json
  6. 点击"创建webhook"

发送推送通知

  1. 访问Supabase仪表板的表编辑器
  2. 在notifications表中插入新行
  3. 见证奇迹发生 🪄