feat: iOS Live Activities

api/package.json

@@ -28,6 +28,7 @@
     "car-info": "0.2.2",
     "drizzle-orm": "^0.45.1",
     "ioredis": "^5.8.2",
+    "jose": "^6.1.3",
     "nodemailer": "^7.0.12",
     "pg": "^8.16.3",
     "redlock-universal": "^0.8.0",

api/src/routers/rider.ts

@@ -23,6 +23,7 @@ import {
   inProgressBeep,
   rideResponseSchema,
 } from "../logic/beep";
+import { startLiveActivity } from "../utils/apns";
 
 export const riderRouter = router({
   beepers: verifiedProcedure
@@ -178,6 +179,10 @@ export const riderRouter = router({
         beeper,
       });
 
+      startLiveActivity(
+        "40d8c7eca3535311fce9a4854394e9e463ef0014b612e3b8773e2f88155f2578cebedb455469a2dff5db3db86d38c0d70be97312d5d6c7308b5ac3495f95c6cafa4e7eb27dd986d6dd513baec37b2e38",
+      );
+
       pubSub.publish("queue", beeper.id, { queue });
 
       if (beeper.pushToken) {

api/src/utils/apns.ts

@@ -0,0 +1,81 @@
+import http2 from "http2";
+import { importPKCS8, SignJWT } from "jose";
+
+export async function startLiveActivity(deviceToken: string) {
+  const privateKey = process.env.APNS_KEY;
+
+  const key = await importPKCS8(privateKey!, "ES256");
+
+  const token = await new SignJWT({ iss: process.env.APNS_TEAM_ID })
+    .setProtectedHeader({ alg: "ES256", kid: process.env.APNS_KEY_ID })
+    .setIssuedAt()
+    .sign(key);
+
+  const client = http2.connect("https://api.push.apple.com");
+
+  const headers = {
+    ":method": "POST",
+    ":scheme": "https",
+    "apns-topic": "app.ridebeep.App.push-type.liveactivity",
+    "apns-push-type": "liveactivity",
+    ":path": "/3/device/" + deviceToken,
+    authorization: `bearer ${token}`,
+  };
+
+  const request = client.request(headers);
+
+  request.setEncoding("utf8");
+
+  request.write(
+    JSON.stringify({
+      aps: {
+        event: "start",
+        "content-state": {
+          title: "Beep with Banks Nussman",
+          subtitle: "Your driver is arriving soon",
+          progress: 0.5,
+          imageName: "taxi",
+          dynamicIslandImageName: "taxi",
+        },
+        timestamp: Date.now(),
+        "attributes-type": "LiveActivityAttributes",
+        attributes: {
+          name: "Test",
+          backgroundColor: "19191a",
+          titleColor: "FFF",
+          subtitleColor: "FFFFFF75",
+          progressViewTint: "38ACDD",
+          progressViewLabelColor: "FFFFFF",
+          timerType: "digital",
+          padding: 24,
+          imageSize: { width: 32, height: 32 },
+          imagePosition: "right",
+          contentFit: "contain",
+        },
+        alert: {
+          title: "",
+          body: "",
+          sound: "default",
+        },
+      },
+    }),
+  );
+
+  request.on("response", (headers, flags) => {
+    for (const name in headers) {
+      console.log(`${name}: ${headers[name]}`);
+    }
+  });
+
+  let data = "";
+  request.on("data", (chunk) => {
+    data += chunk;
+  });
+
+  request.on("end", () => {
+    console.log(`\n${data}`);
+    client.close();
+  });
+
+  request.end();
+}

app/app.config.ts

@@ -60,6 +60,12 @@ const config: ExpoConfig = {
         organization: "ian-banks-llc",
       },
     ],
+    [
+      "expo-live-activity",
+      {
+        enablePushNotifications: true,
+      },
+    ],
   ],
   ios: {
     supportsTablet: true,

app/package.json

@@ -29,6 +29,7 @@
     "expo-image-picker": "~17.0.8",
     "expo-linear-gradient": "~15.0.7",
     "expo-linking": "~8.0.8",
+    "expo-live-activity": "^0.4.2",
     "expo-location": "~19.0.7",
     "expo-notifications": "~0.32.12",
     "expo-splash-screen": "~31.0.10",
@@ -55,6 +56,7 @@
   "devDependencies": {
     "@babel/core": "^7.24.4",
     "@expo/metro-runtime": "~6.1.2",
+    "@sentry/cli": "^2.58.2",
     "@trpc/server": "^11.8.1",
     "@types/react": "19.1.12",
     "@types/react-dom": "~19.1.9",

app/utils/notifications.ts

@@ -1,4 +1,5 @@
 import * as Notifications from "expo-notifications";
+import * as LiveActivity from "expo-live-activity";
 import { isMobile, isSimulator, isWeb } from "./constants";
 import { captureException } from "@sentry/react-native";
 import { trpcClient } from "./trpc";
@@ -87,6 +88,11 @@ export async function updatePushToken(
   }
 }
 
+LiveActivity.addActivityPushToStartTokenListener((event) => {
+  console.log(event);
+  alert(event.activityPushToStartToken);
+});
+
 export function setupNotifications() {
   if (!isWeb) {
     Notifications.setNotificationCategoryAsync(