01/10/2026 · VietTechies · Biên tập
Expo đã chia sẻ thiết kế kiến trúc để xây dựng tính năng iOS Live Activities toàn diện bằng TypeScript và React Native mà không cần quản lý một dự án Xcode riêng biệt. Giải pháp này biên dịch mã TSX thành các view SwiftUI nguyên bản thông qua `@expo/ui/swift-ui` và `expo-widgets`, giúp các ứng dụng đa nền tảng tận dụng Dynamic Island và các tiện ích trên Màn hình khóa của Apple cho các tác vụ bất đồng bộ kéo dài.
Biên dịch Widget phía Client và Quản lý Token
Ở phía client, giao diện widget của Live Activity được định nghĩa hoàn toàn bằng React, sử dụng một cấu trúc trạng thái khai báo duy nhất. Trình biên dịch của Expo chuyển đổi các component React thành view SwiftUI nguyên bản, đảm bảo khả năng hiển thị linh hoạt trên banner Màn hình khóa cũng như các bố cục thu gọn hoặc mở rộng của Dynamic Island. Để theo dõi các hoạt động từ xa, các thiết bị chạy iOS 17.2 trở lên sẽ tạo ra các push token độc lập cho từng hoạt động thay vì dùng chung token thiết bị APNs tiêu chuẩn.
Do các hoạt động từ xa có thể kích hoạt bằng cơ chế push-to-start ngay cả khi ứng dụng đang chạy nền, việc đăng ký token đòi hỏi phải kết hợp giữa bộ lắng nghe trong component và bộ xử lý ở cấp mô-đun. Cấu trúc này giúp đảm bảo token của các hoạt động khởi chạy từ nền được truyền về hệ thống backend ngay lập tức.
Ánh xạ Sự kiện Backend và Yêu cầu Payload của APNs
Dịch vụ backend duy trì các bảng cơ sở dữ liệu để liên kết người dùng đang hoạt động và các ID hoạt động cụ thể với token push-to-start và token cập nhật tương ứng. Khi sự kiện miền xảy ra, một hàm ánh xạ sẽ chuyển đổi dữ liệu cập nhật từ cơ sở dữ liệu thành cấu trúc JSON `ContentState` nghiêm ngặt theo đúng yêu cầu của widget nguyên bản.
Các yêu cầu push được gửi qua dịch vụ Apple Push Notification (APNs) sử dụng phương thức xác thực ES256 JWT. Máy chủ phải gửi yêu cầu đến chủ đề `.push-type.liveactivity` chuyên dụng cùng với các header cụ thể. Trong payload APNs, các thuộc tính tùy chỉnh cần được chuyển thành chuỗi bên trong khóa `props` thuộc đối tượng `content-state`, trong khi các sự kiện push-to-start ban đầu bắt buộc phải chứa một dictionary `alert` đi kèm với định danh thuộc tính rõ ràng.
Ảnh minh họa do AI tạo, không phải ảnh tư liệu.
Nguồn: Live Activities with Expo, End to End: Client and Backend