Begära behörighet och hämta en push-token
Använd expo-notifications för att begära behörighet för notiser, hämta Expo-push-token och skicka token till backend-servern för lagring.
Begära behörighet och hämta en push-token är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad är pushnotiser?
Pushnotiser är meddelanden som skickas från servern till användarens enhet även när appen är stängd. De visas i enhetens notiscenter, på låsskärmen och kan utlösa en räknare på appikonen. På mobila enheter är de ett av de mest effektiva verktygen för att få användare att återvända.
Flödet för pushnotiser omfattar tre parter: appen (registrerar enheten), servern (avgör när meddelanden ska skickas) och en push-gateway (Apple APNs för iOS och Google FCM för Android). Expo samlar båda gateways i en enhetlig push-tjänst.
Installera expo-notifications
Paketet expo-notifications tillhandahåller ett enhetligt API för pushnotiser på både iOS och Android. Installera det med Expo CLI, som hanterar installationen av rätt inbyggda version för ditt Expo SDK.
Pushnotiser kräver ett utvecklingsbygge (inte Expo Go), eftersom APNs-behörigheter måste bäddas in i iOS-appens binärfil. Push fungerar i Expo Go på Android, men inte på iOS. För produktion hanterar EAS Build certifikatkonfigurationen automatiskt.
// Install:
// npx expo install expo-notifications
// In app.json, configure notification appearance:
{
'expo': {
'notification': {
'icon': './assets/notification-icon.png',
'color': '#ffffff',
'androidMode': 'default',
'androidCollapsedTitle': '#{unread_notifications} new updates'
}
}
}Begära behörighet för notiser
Innan du skickar eller tar emot notiser måste du be användaren om behörighet. På iOS visas systemets dialogruta för behörighet första gången. På Android 13+ (API 33+) måste du också uttryckligen begära behörighet; i äldre Android-versioner beviljas den automatiskt.
Använd Notifications.requestPermissionsAsync() och kontrollera den returnerade status. Statusen är 'granted', 'denied' eller 'undetermined'. Om användaren nekar måste hen aktivera behörigheten manuellt igen i Inställningar — du kan inte visa dialogrutan på nytt.
import * as Notifications from 'expo-notifications';
async function requestPushPermission() {
const { status: existingStatus } = await Notifications.getPermissionsAsync();
let finalStatus = existingStatus;
if (existingStatus !== 'granted') {
const { status } = await Notifications.requestPermissionsAsync();
finalStatus = status;
}
if (finalStatus !== 'granted') {
console.log('Push permission denied');
return false;
}
return true;
}Hämta Expo-push-token
En Expo-push-token är en unik identifierare för kombinationen app + enhet + användare. Den ser ut så här: ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]. Du skickar token till servern så att den senare kan skicka notiser till just den här enheten.
Använd Notifications.getExpoPushTokenAsync() för att hämta token. Detta måste anropas efter att behörigheten har beviljats. För produktionsbyggen (utanför Expo) måste du även ange projectId från Expo-projektet.
import * as Notifications from 'expo-notifications';
import Constants from 'expo-constants';
async function getExpoPushToken() {
const token = await Notifications.getExpoPushTokenAsync({
projectId: Constants.expoConfig.extra.eas.projectId,
});
console.log('Push token:', token.data);
// 'ExponentPushToken[AbCdEfGhIjKl...]'
return token.data;
}Lagra token på servern
Push-token är bara användbar om servern har den. När du har hämtat token ska du skicka den till backend via ett API-anrop och lagra den tillsammans med användarkontot. En användare kan använda flera enheter — lagra en token per enhet och användare.
Token kan ändras när en användare installerar om appen eller återställer enheten. Utforma servern så att tokenuppdateringar hanteras: skriv antingen över den gamla token för samma användare eller lagra flera token per användare och ta bort inaktuella token när push-gatewayen returnerar svar om ogiltig token.
async function registerForPushNotifications(userId) {
const hasPermission = await requestPushPermission();
if (!hasPermission) return;
const token = await getExpoPushToken();
// Send to your backend:
await fetch('https://api.myapp.com/users/' + userId + '/push-token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token }),
});
}Anropa registreringen vid rätt tidpunkt
Anropa registreringsfunktionen vid ett lämpligt tillfälle i användarresan — vanligtvis direkt efter att användaren har loggat in eller slutfört introduktionen. Om du begär pushbehörighet för tidigt (vid appens första start), innan användaren förstår appens värde, minskar andelen som godkänner.
Använd en useEffect i den autentiserade rotkomponenten för att utlösa registreringen en gång när användaren är autentiserad. Spara registreringsstatusen i AsyncStorage för att undvika att begära behörighet vid varje start.
import { useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
function usePostLoginPushRegistration(userId) {
useEffect(() => {
if (!userId) return;
AsyncStorage.getItem('pushRegistered').then((registered) => {
if (!registered) {
registerForPushNotifications(userId).then(() => {
AsyncStorage.setItem('pushRegistered', 'true');
});
}
});
}, [userId]);
}Android-specifikt: notiskategorier
Android 8+ kräver notiskategorier — logiska grupperingar som ger användarna detaljerad kontroll över vilka typer av notiser de tar emot. Skapa kategorier med Notifications.setNotificationChannelAsync() innan du skickar några notiser. Detta behövs inte på iOS.
Använd beskrivande kategori-ID:n och namn som är begripliga för användarna på sidan för notisinställningar i Inställningar. Exempel är messages, promotions och system. Tilldela lämpliga viktighetsnivåer — HIGH för brådskande notiser och DEFAULT för vanliga notiser.
import * as Notifications from 'expo-notifications';
import { Platform } from 'react-native';
async function setupNotificationChannels() {
if (Platform.OS === 'android') {
await Notifications.setNotificationChannelAsync('messages', {
name: 'Messages',
importance: Notifications.AndroidImportance.HIGH,
vibrationPattern: [0, 250, 250, 250],
lightColor: '#FF231F7C',
});
await Notifications.setNotificationChannelAsync('promotions', {
name: 'Promotions',
importance: Notifications.AndroidImportance.DEFAULT,
});
}
}Konfigurera visning av notiser
Som standard visar expo-notifications inte notiser när appen är i förgrunden. Konfigurera standardhanteraren för notiser med Notifications.setNotificationHandler för att styra detta beteende. Placera konfigurationen på appens toppnivå, innan några komponenter monteras.
Hanterarfunktionen tar emot varje notis och returnerar ett konfigurationsobjekt som anger om ett ljud ska spelas upp, om en avisering ska visas och om räknaren ska anges. Konfigurera hanteraren en gång i appens startfil (App.js eller index.js).
import * as Notifications from 'expo-notifications';
// At app root level (outside components):
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: true,
shouldSetBadge: true,
}),
});
export default function App() {
return <NavigationContainer>...</NavigationContainer>;
}Hämta en inbyggd enhetstoken
För produktionsappar som inte använder Expos push-tjänst (till exempel vid direktintegrering med APNs eller FCM) använder du Notifications.getDevicePushTokenAsync() i stället för Expo-push-token. Detta returnerar den råa APNs- eller FCM-enhetstoken som du kan skicka direkt till dessa tjänster.
Den inbyggda token är en hexadecimal sträng (iOS) eller en registreringstoken (Android). Hantera båda fallen på servern. När du använder inbyggda token måste du även hantera konfigurationen av certifikat och nycklar för APNs samt google-services.json för FCM separat.
// For direct APNs/FCM integration (not Expo push service):
const nativeToken = await Notifications.getDevicePushTokenAsync();
console.log('Native token type:', nativeToken.type); // 'ios' or 'android'
console.log('Native token data:', nativeToken.data); // raw APNs/FCM token
// Send to your server for direct gateway integration:Hantera uppdatering av token
Push-token kan ogiltigförklaras och förnyas av operativsystemet — till exempel när användaren återställer från en säkerhetskopia, installerar om appen eller återställer enheten. Lyssna efter tokenändringar med Notifications.addPushTokenListener och uppdatera servern med den nya token när detta inträffar.
Ett robust system för pushnotiser hanterar alltid förnyelse av token. Oregistrerade token leder till tysta leveransfel på servern. Rensa bort inaktuella token från databasen när push-gatewayen returnerar felet DeviceNotRegistered.
useEffect(() => {
const tokenSubscription = Notifications.addPushTokenListener(
async ({ data: newToken }) => {
console.log('Push token refreshed:', newToken);
// Update server with new token
await fetch('/api/push-token/refresh', {
method: 'PUT',
body: JSON.stringify({ token: newToken }),
});
}
);
return () => tokenSubscription.remove();
}, []);Sekretess och bästa praxis
Bästa praxis för hantering av push-token:
- Logga aldrig token i produktion — de är autentiseringsuppgifter som identifierar specifika enheter.
- Kryptera token vid lagring på servern — en läckt tokendatabas kan möjliggöra skräppost i form av notiser.
- Koppla token till användare — ta bort token när användare raderar sina konton eller tackar nej till notiser.
- Samla tokenuppdateringar i batchar — anropa inte servern vid varje appstart, utan endast när token ändras eller vid den första registreringen.
- Respektera användarnas inställningar — tillhandahåll notisinställningar i appen och följ dem på servern.
Snabbkontroll
Testa dina kunskaper om koncepten inom React Native Mobile Development från den här lektionen.
Sammanfattning av lektionen
I den här lektionen lärde du dig att Notifications.requestPermissionsAsync() begär behörighet från operativsystemet, och att den måste beviljas innan du hämtar en push-token, att Notifications.getExpoPushTokenAsync() returnerar en token som ExponentPushToken[...] som identifierar enheten för din backend samt att token måste lagras på servern och uppdateras när de ändras för att leveransen ska förbli tillförlitlig. Härnäst skickar vi pushnotiser till enheter med Expo Push API från en server.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Begära behörighet och hämta en push-token” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Begära behörighet och hämta en push-token”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Begära behörighet och hämta en push-token”?
Använd expo-notifications för att begära behörighet för notiser, hämta Expo-push-token och skicka token till backend-servern för lagring. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Begära behörighet och hämta en push-token”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Native Academy-lektionen?
Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Begära behörighet och hämta en push-token
- Skicka notiser via Expo Push API
- Hantera notiser i förgrunden och bakgrunden
- Notiskanaler och rikt innehåll