React Native Academy · 课时

通过 Expo Push API 发送通知

从服务器或 curl 命令向 Expo Push API 发送通知负载，指定目标设备令牌，并在 Expo 控制台中验证送达情况。

通过 Expo Push API 发送通知 是 CoddyKit 上的免费 React Native Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Native Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Native Academy 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

The Expo Push Notification Service

The Expo Push Notification Service (EPNS) is a relay that sits between your server and the platform-specific push gateways (Apple APNs and Google FCM). Instead of integrating with two separate services, you send one HTTP request to Expo's API and it handles the platform differences for you.

EPNS is free for apps using Expo's managed workflow and handles certificate management, token routing, batching, and error reporting. For production apps with high volume you can switch to direct APNs/FCM integration, but EPNS is an excellent starting point for most apps.

The Expo Push API Endpoint

Send a POST request to https://exp.host/--/api/v2/push/send with a JSON body containing one or more notification messages. Each message targets a specific Expo push token and includes the notification content.

The API accepts up to 100 messages per request for efficient batching. Always send from your server, never from the client — the client doesn't know other users' tokens and sending from the client exposes your server logic.

// From your backend server (Node.js example):
const response = await fetch('https://exp.host/--/api/v2/push/send', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    to: 'ExponentPushToken[AbCdEfGhIjKl...]',
    title: 'New message',
    body: 'Alice sent you a message!',
  }),
});
const result = await response.json();
console.log(result);

Notification Message Fields

The notification message object supports several fields:

to (required) — the Expo push token or array of tokens
title — the bold notification title
body — the notification message text
data — a JSON object with custom payload for the app to read when tapped
sound — 'default' to play the device sound
badge — integer to set the iOS app icon badge count
channelId — Android notification channel ID

const message = {
  to: 'ExponentPushToken[AbCdEfGhIjKl...]',
  sound: 'default',
  title: 'Order Shipped',
  body: 'Your order #1234 is on its way!',
  badge: 1,
  channelId: 'orders',
  data: {
    type: 'order_update',
    orderId: '1234',
    screen: 'OrderDetail',
  },
};

Sending to Multiple Devices

To send the same notification to multiple devices (e.g., a broadcast or a notification to all of a user's devices), pass an array of tokens to the to field. Each token will receive the notification.

For large audiences, chunk your token list into batches of 100 and send a separate API request per batch. The Expo Push API enforces rate limits and batch size limits, so batching is required for scale.

// Send to multiple devices:
const messages = tokens.map((token) => ({
  to: token,
  title: 'New feature available!',
  body: 'Check out what we built for you.',
  data: { screen: 'WhatsNew' },
}));

// Chunk into batches of 100:
const chunks = [];
for (let i = 0; i < messages.length; i += 100) {
  chunks.push(messages.slice(i, i + 100));
}

for (const chunk of chunks) {
  await fetch('https://exp.host/--/api/v2/push/send', {
    method: 'POST',
    body: JSON.stringify(chunk),
  });
}

Using the Expo Server SDK

Instead of making raw HTTP requests, use the official expo-server-sdk npm package in your Node.js backend. It provides chunking, error handling, and receipt checking out of the box. Install it with npm install expo-server-sdk.

The SDK's sendPushNotificationsAsync method handles batching automatically and returns ticket objects you can use to check delivery receipts later. It also validates tokens before sending to avoid wasting API calls on malformed tokens.

// Backend (Node.js):
const { Expo } = require('expo-server-sdk');
const expo = new Expo();

const messages = tokens
  .filter(token => Expo.isExpoPushToken(token))
  .map(token => ({
    to: token,
    title: 'Hello!',
    body: 'This is a push notification',
    data: { type: 'greeting' },
  }));

const chunks = expo.chunkPushNotifications(messages);
const tickets = [];
for (const chunk of chunks) {
  const ticketChunk = await expo.sendPushNotificationsAsync(chunk);
  tickets.push(...ticketChunk);
}

Push Receipts: Confirming Delivery

Sending to the Expo API gives you tickets immediately — they confirm the message was accepted, not that it was delivered. A few minutes later, check receipts to verify actual delivery to APNs/FCM. Use the ticket IDs from the send step to fetch receipts from https://exp.host/--/api/v2/push/getReceipts.

Receipts with status 'error' and code DeviceNotRegistered mean the token is no longer valid — remove it from your database to keep your token list clean and avoid wasting API calls.

// After sending, check receipts (wait ~5 minutes):
const receiptIds = tickets
  .filter(t => t.status === 'ok')
  .map(t => t.id);

const receiptChunks = expo.chunkPushNotificationReceiptIds(receiptIds);
for (const chunk of receiptChunks) {
  const receipts = await expo.getPushNotificationReceiptsAsync(chunk);
  for (const [id, receipt] of Object.entries(receipts)) {
    if (receipt.status === 'error') {
      if (receipt.details.error === 'DeviceNotRegistered') {
        await removeTokenFromDB(id); // clean up
      }
    }
  }
}

Testing Push Notifications

Expo provides a push notification testing tool at https://expo.dev/notifications. Enter your Expo push token and send test notifications directly from the dashboard — no server code required. This is invaluable for testing notification appearance and delivery on a real device.

You can also use a curl command from the terminal to send test notifications. This is faster during development and lets you test arbitrary payloads and data objects without writing server code first.

# Test push from terminal:
curl -H 'Content-Type: application/json' \
  -X POST 'https://exp.host/--/api/v2/push/send' \
  -d '{
    "to": "ExponentPushToken[YOUR_TOKEN_HERE]",
    "title": "Test Notification",
    "body": "Hello from curl!",
    "data": { "test": true }
  }'

# Or use Expo dashboard:
# https://expo.dev/notifications

Scheduling Notifications from the App

Beyond push notifications from a server, you can schedule local notifications from the app itself — they work offline and don't require a server. Use Notifications.scheduleNotificationAsync with a trigger that defines when the notification fires.

Common trigger types: seconds — fire after a delay; date — fire at a specific time; weekly — fire on a specific weekday and time. Local notifications are perfect for reminders, alarms, and scheduled check-ins.

// Schedule a local notification 10 seconds from now:
await Notifications.scheduleNotificationAsync({
  content: {
    title: 'Reminder',
    body: 'Time to review your daily goals!',
    data: { screen: 'Goals' },
  },
  trigger: {
    seconds: 10, // fires after 10 seconds
  },
});

// Schedule for a specific date:
await Notifications.scheduleNotificationAsync({
  content: { title: 'Meeting in 5 minutes', body: 'Team standup' },
  trigger: new Date(Date.now() + 5 * 60 * 1000),
});

Notification Priority and Delivery

Notification priority affects how aggressively the OS delivers a notification. High priority notifications wake up the device screen immediately (used for urgent alerts like messages). Normal priority are batched and delivered when convenient (used for promotional content).

In the Expo Push API, set priority: 'high' for time-sensitive notifications. Be conservative — sending too many high-priority notifications trains users to ignore them, and Apple may deprioritize your app's notifications if abused.

// High priority (message, call, alert):
{
  to: token,
  title: 'Incoming call',
  body: 'Bob is calling you',
  priority: 'high',
  channelId: 'calls',
  data: { screen: 'IncomingCall', callId: 'abc' },
}

// Normal priority (digest, update):
{
  to: token,
  title: 'Weekly summary ready',
  body: 'See how you did this week!',
  priority: 'normal',
  channelId: 'digest',
}

Handling Notification Tap on App Launch

When a user taps a notification and the app is completely closed, the app launches. To navigate to the correct screen based on the notification, read the last notification response on launch using Notifications.getLastNotificationResponseAsync().

Read this early in your app's boot sequence (in App.js or your root navigator) and navigate when the response contains a data.screen payload. This bridges push notifications with deep navigation into your app.

useEffect(() => {
  Notifications.getLastNotificationResponseAsync().then((response) => {
    if (response) {
      const { screen, id } = response.notification.request.content.data;
      if (screen && navigationRef.isReady()) {
        navigationRef.navigate(screen, { id });
      }
    }
  });
}, []);

Canceling and Managing Scheduled Notifications

Cancel a specific scheduled notification with Notifications.cancelScheduledNotificationAsync(identifier), where the identifier is the string returned from scheduleNotificationAsync. Cancel all scheduled notifications with Notifications.cancelAllScheduledNotificationsAsync().

Store notification identifiers in AsyncStorage if you need to cancel them after an app restart — for example, canceling a reminder when the user marks a task as complete.

// Schedule and save identifier:
const id = await Notifications.scheduleNotificationAsync({
  content: { title: 'Take your medicine' },
  trigger: { hour: 9, minute: 0, repeats: true },
});
await AsyncStorage.setItem('medicineReminderNotifId', id);

// Later, cancel it:
const notifId = await AsyncStorage.getItem('medicineReminderNotifId');
if (notifId) {
  await Notifications.cancelScheduledNotificationAsync(notifId);
  await AsyncStorage.removeItem('medicineReminderNotifId');
}

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: the Expo Push API accepts POST requests to exp.host with token, title, body, and data fields to send notifications via APNs/FCM, push receipts confirm actual delivery and DeviceNotRegistered errors signal tokens to delete, and local notifications can be scheduled from the app itself using Notifications.scheduleNotificationAsync with time-based triggers. Next up we handle foreground and background notification events inside the app.

常见问题解答

「通过 Expo Push API 发送通知」课时是免费的吗？

是的 — 「通过 Expo Push API 发送通知」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Native Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Native Academy 课程共包含 4 节课。

「通过 Expo Push API 发送通知」这节课中我会学到什么？

从服务器或 curl 命令向 Expo Push API 发送通知负载，指定目标设备令牌，并在 Expo 控制台中验证送达情况。你通过在浏览器中直接运行的动手代码来练习 React Native Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Native Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Native Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「通过 Expo Push API 发送通知」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Native Academy 课中编写并运行代码吗？

能。每节 React Native Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Native Academy