End-to-End-Implementierung von iOS Live Activities mit Expo und APNs-Infrastruktur

Expo hat eine Architektur für die Entwicklung von iOS Live Activities vorgestellt, die auf TypeScript und React Native basiert, ohne dass ein separates Xcode-Projekt verwaltet werden muss. Der Ansatz übersetzt TSX-Code mithilfe von `@expo/ui/swift-ui` und `expo-widgets` in native SwiftUI-Ansichten. Dadurch können plattformübergreifende Anwendungen die Dynamic Island sowie Sperrbildschirm-Widgets von Apple für asynchrone Hintergrundprozesse nutzen.

Clientseitige Widget-Kompilierung und Token-Verwaltung

Auf der Clientseite wird die Benutzeroberfläche des Live-Activity-Widgets vollständig in React über eine deklarative Zustandsstruktur definiert. Der Compiler von Expo wandelt diese React-Komponenten in native SwiftUI-Ansichten um und übernimmt das Rendering für Sperrbildschirm-Banner sowie kompakte oder erweiterte Layouts der Dynamic Island. Um Aktivitäten aus der Ferne zu verfolgen, generieren Geräte ab iOS 17.2 spezifische Push-Tokens pro Aktivität anstelle der regulären APNs-Geräte-Tokens.

Da Remote-Aktivitäten über Push-to-Start gestartet werden können, während sich eine Anwendung im Hintergrund befindet, erfordert die Token-Registrierung sowohl aktive Komponenten-Listener als auch Handler auf Modulebene. Diese Struktur stellt sicher, dass Tokens von Aktivitäten, die im Hintergrund gestartet wurden, umgehend an das Backend übermittelt werden.

Backend-Event-Mapping und APNs-Payload-Anforderungen

Der Backend-Dienst verwaltet Datenbanktabellen, die aktive Benutzer und spezifische Aktivitäts-IDs mit den zugehörigen Push-to-Start- und Update-Tokens verknüpfen. Tritt ein Ereignis auf, wandelt eine Mapper-Funktion die Datenbankaktualisierungen in das genaue `ContentState`-JSON-Schema um, das vom nativen Widget erwartet wird.

Push-Anfragen werden über den Apple Push Notification service (APNs) unter Verwendung von ES256-JWT-Authentifizierung versendet. Der Server muss Anfragen an das dedizierte Topic mit dem Suffix `.push-type.liveactivity` senden und spezifische Header mitschicken. In APNs-Payloads müssen benutzerdefinierte Eigenschaften als String innerhalb eines `props`-Schlüssels im `content-state`-Objekt serialisiert werden, während anfängliche Push-to-Start-Ereignisse zwingend ein `alert`-Dictionary zusammen mit expliziten Attribut-Bezeichnern erfordern.

KI-generierte redaktionelle Illustration; kein Dokumentarfoto.

Quelle: Live Activities with Expo, End to End: Client and Backend