Få Push Notifikationer til at Virke på iOS

Push-notifikationer er en essentiel del af moderne mobilapps, der holder brugerne engagerede og informerede. For Ionic-udviklere, der arbejder med Capacitor på iOS, kan opsætningen virke lidt kompleks, men med den rette vejledning er det absolut overkommeligt. Denne artikel guider dig gennem hele processen, fra de grundlæggende forudsætninger til at sende dine allerførste test-push-notifikationer.

Forudsætninger for Push Notifikationer

Inden vi dykker ned i selve opsætningen, er der et par ting, du skal have på plads:

• Apple Developer Account: Dette er et absolut krav for at kunne sende push-notifikationer til iOS-enheder. Du skal have et aktivt medlemskab i Apple Developer Program.
• Xcode: Apples integrerede udviklingsmiljø (IDE) er nødvendigt for at konfigurere og bygge dine iOS-apps. Sørg for, at du har den seneste version installeret på din macOS-maskine.
• Ionic og Capacitor: Din projektstruktur skal være sat op med Ionic og Capacitor. Hvis du starter et nyt projekt, kan du gøre det med kommandoen: ionic start minApp blank --type=angular --capacitor.

Trin 1: Registrer din App hos Apple Developer

Det første skridt er at registrere din applikation hos Apple. Dette gøres via din Apple Developer Account portal.

1. Log ind på din Apple Developer Account.
2. Naviger til sektionen "Certificates, Identifiers & Profiles".
3. Under "Identifiers", klik på "App IDs" og opret et nyt App ID. Sørg for, at "Push Notifications" er aktiveret for dette App ID.
4. Når du har oprettet App ID'et, skal du også generere et "Provisioning Profile", der inkluderer Push Notifications. Dette profil forbinder dit App ID med dine udviklingscertifikater.

Trin 2: Konfigurer Capacitor for Push Notifikationer

Capacitor tilbyder en plugin til håndtering af push-notifikationer. Først skal du installere den:

npm install @capacitor/push-notifications npx cap sync 

Derefter skal du aktivere "Push Notifications" capability i dit Xcode-projekt. Åbn dit iOS-projekt med npx cap open ios og i Xcode:

1. Vælg dit projekt i navigationspanelet.
2. Gå til "Signing & Capabilities".
3. Klik på "+ Capability" og tilføj "Push Notifications".

Tilføj følgende kode til din AppDelegate.swift fil for at håndtere registrering og fejl:

import UIKit import Capacitor @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { // Override point for customization after application launch. return true } func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) { NotificationCenter.default.post(name: .capacitorDidRegisterForRemoteNotifications, object: deviceToken) } func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) { NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error) } // ... resten af din AppDelegate kode } 

Trin 3: Opsætning af Firebase Cloud Messaging (FCM)

Capacitor's Push Notifications plugin bruger FCM til at håndtere notifikationer. Selvom du ikke direkte behøver at integrere FCM SDK'en, skal du stadig have et Firebase-projekt sat op.

1. Gå til Firebase Console (console.firebase.google.com).
2. Opret et nyt Firebase-projekt eller brug et eksisterende.
3. Registrer din iOS-app i Firebase-projektet. Du skal bruge dit App ID fra Apple Developer Account her.
4. Download GoogleService-Info.plist filen fra Firebase-projektet.
5. Placer denne fil i din Capacitor iOS-projektmappe (normalt ios/App/App/). Capacitor vil automatisk integrere den.

Trin 4: Konfigurer Notifikationsindstillinger i Capacitor

Du kan definere, hvordan push-notifikationer skal vises, når appen er aktiv. Dette gøres i din capacitor.config.ts (eller .json) fil:

import { CapacitorConfig } from '@capacitor/cli'; const config: CapacitorConfig = { plugins: { PushNotifications: { presentationOptions: ["badge", "sound", "alert"] } } }; export default config; 

Her kan du vælge mellem:

• badge: Opdaterer antallet på app-ikonet.
• sound: Afspiller en lyd eller vibrerer.
• alert: Viser en indfødt dialog.

Bemærk:badge er kun tilgængelig for iOS.

Trin 5: Implementer Push Notifikationer i din App-kode

Nu skal vi tilføje logik i din Ionic-app for at registrere enheden og håndtere indkommende notifikationer.

Opret funktioner til at håndtere registrering og lyttere:

import { Component } from '@angular/core'; import { PushNotifications, Token, PushNotificationSchema, Capacitor } from '@capacitor/push-notifications'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor() {} async ngOnInit() { await this.registerPushNotifications(); await this.addPushNotificationListeners(); } async registerPushNotifications() { let permStatus = await PushNotifications.checkPermissions(); if (permStatus.receive === 'prompt') { permStatus = await PushNotifications.requestPermissions(); } if (permStatus.receive !== 'granted') { console.error('Brugeren har afvist push-notifikationsrettigheder!'); return; } try { await PushNotifications.register(); console.log('App registreret til push-notifikationer'); } catch (e) { console.error('Registreringsfejl:', e); } } async addPushNotificationListeners() { await PushNotifications.addListener('registration', (token: Token) => { console.log('Registreringstoken:', token.value); // Her kan du gemme token'en på din server eller Ionic.io // For eksempel: push.saveToken(token); }); await PushNotifications.addListener('registrationError', (error) => { console.error('Registreringsfejl:', error.error); }); await PushNotifications.addListener('pushNotificationReceived', async (notification: PushNotificationSchema) => { console.log('Push notifikation modtaget:', notification); // Håndter modtagne notifikationer, mens appen er åben // Du kan vise en indfødt dialog eller opdatere UI'en const alertContent = { header: notification.title, subHeader: notification.data?.subTitle, message: notification.body, buttons: ['OK'] }; if (Capacitor.getPlatform() === 'ios') { // Vis en native alert på iOS // await PushNotifications.presentAlert(alertContent); } }); await PushNotifications.addListener('pushNotificationActionPerformed', (notificationAction) => { console.log('Push notifikation handling udført:', notificationAction.actionId, notificationAction.inputValue); // Håndter brugerinteraktion med notifikationen (f.eks. klik på notifikationen) }); } } 

Test af Push Notifikationer

Udviklings-Push (Dev Push)

Ionic.io (nu en del af Ionic Appflow) tilbød tidligere en "Dev Push" service, som gjorde det nemmere at teste. Selvom den direkte Dev Push-funktionalitet er blevet ændret, kan du stadig teste ved at sende direkte POST-anmodninger til Ionic's Push API.

For at sende en dev push skal du bruge din enhedstoken, som du får fra din app under registreringen (se console.log('Registreringstoken:', token.value); ovenfor). Du skal også bruge en API-nøgle og et sikkerhedsprofilnavn fra din Ionic.io-konto.

Du kan bruge curl eller et værktøj som Postman til at sende en POST-anmodning til:

https://api.ionic.io/push/notifications

Eksempel på curl-kommando:

curl -X POST \ -H "Authorization: Bearer DIN_API_TOKEN" \ -H "Content-Type: application/json" \ -d '{ "tokens": ["DIN_ENHEDSTOKEN"], "profile": "DIT_PROFILNAVN", "notification": { "message": "Dette er en test push!" } }' \ "https://api.ionic.io/push/notifications"

Hvor finder du disse oplysninger?

• API Token: I din Ionic.io dashboard under "API Keys".
• Profilnavn: Opret et "Security Profile" i Ionic.io dashboard under "Certificates" og navngiv det.
• Enhedstoken: Logges i din app's konsol, når den registreres.

Virksomhedspush (Real Push)

For at sende virkelige push-notifikationer skal du deaktivere "Dev Push" og teste på en rigtig enhed.

I din capacitor.config.ts eller via CLI:

ionic config set dev_push false

Test på en rigtig enhed:

1. Byg og kør din app på en fysisk iOS-enhed (kræver Apple Developer Program-medlemskab).
2. Åbn din app, og find din enhedstoken i konsollen (via Xcode eller Capacitor DevTools).
3. Brug den samme curl-kommando som før, men med din rigtige enhedstoken og dit korrekte sikkerhedsprofil.

Vigtigt: Når appen er lukket, vil notifikationen typisk vises som et banner øverst på skærmen. Når appen er åben, håndteres notifikationen af din pushNotificationReceived-lytter.

Fejlfinding og Ofte Stillede Spørgsmål

Hvordan får jeg fat i min enhedstoken?

Enhedstoken'en logges i konsollen, når din app registrerer sig med push-tjenesterne. Du kan se dette via Xcode's konsol, når du kører appen derfra, eller via Capacitor's live reload-værktøjer.

Hvad hvis jeg får "Registration Error"?

Dette skyldes ofte fejl i opsætningen af Apple Developer-portalen (App ID, Provisioning Profile) eller i Firebase-projektet (GoogleService-Info.plist). Dobbelttjek alle trin i forhold til Apple's og Firebase's dokumentation.

Kan jeg sende "Silent Push"?

Capacitor's Push Notifications plugin understøtter ikke "Silent Push" (datamodtagelse i baggrunden uden brugerinteraktion). For dette skal du bruge native Swift-kode.

Hvad med Android?

Processen for Android involverer også Firebase Cloud Messaging, men kræver en google-services.json fil og korrekte ikoner og kanal-ID'er i AndroidManifest.xml. Android 13 (SDK 33) kræver også eksplicit tilladelse til notifikationer.

Hvordan håndteres notifikationer, når appen er lukket?

Når appen er lukket, vil systemet vise en standard notifikation. Når brugeren klikker på notifikationen, vil appen starte, og du kan potentielt håndtere, hvad der sker via pushNotificationActionPerformed-lytteren.

Konklusion

At få push-notifikationer til at virke på iOS med Ionic og Capacitor kræver omhyggelig opsætning af både Apple's udviklerportal, Firebase og din app-kode. Ved at følge disse trin og være opmærksom på detaljerne, kan du succesfuldt implementere en kraftfuld kommunikationskanal med dine brugere.