Rork × CallKit + PushKit で VoIP 通話アプリを実装する — Native 着信 UI と専用 Push の本番運用

// src/voip-push.ts — Cloudflare Workers での VoIP Push 送信
// 期待動作: APNs が voip-push を受け取ると、対象端末の PushKit が
// すぐに着信ペイロードを受信する。レスポンスが 200 でなければ詳細をログに残す。
 
interface VoipPayload {
  callId: string;        // CallKit の UUID（全端末で一意）
  callerName: string;    // ロック画面に表示する発信者名
  callerHandle: string;  // 連絡先解決のための識別子（電話番号やメール）
  hasVideo: boolean;     // ビデオ通話かどうか
}
 
export async function sendVoipPush(
  apnsToken: string,
  payload: VoipPayload,
  env: { APNS_KEY: string; APNS_KEY_ID: string; APNS_TEAM_ID: string; APNS_TOPIC: string }
) {
  // JWT を作る部分は別関数に切り出している前提
  const jwt = await buildApnsJwt(env);
 
  const url = `https://api.push.apple.com/3/device/${apnsToken}`;
  const body = JSON.stringify({
    aps: { 'content-available': 1 },
    ...payload,
  });
 
  const res = await fetch(url, {
    method: 'POST',
    headers: {
      authorization: `bearer ${jwt}`,
      'apns-topic': `${env.APNS_TOPIC}.voip`, // ⚠️ topic は bundle-id + ".voip"
      'apns-push-type': 'voip',
      'apns-priority': '10',
      'apns-expiration': '0',                  // 即時配信、保留しない
    },
    body,
  });
 
  if (!res.ok) {
    // 410 はトークン失効、400 系はペイロード不正の可能性が高い
    const detail = await res.text();
    console.error('[voip-push] failed', res.status, detail);
    throw new Error(`APNs ${res.status}: ${detail}`);
  }
  return { status: res.status };
}

// ios/AppDelegate.swift — PushKit と CallKit を最短経路で繋ぐ
// 期待動作: アプリが kill されている状態でも VoIP Push 受信時に
// 全画面の着信 UI が表示され、応答ボタンで delegate コールバックが届く。
 
import PushKit
import CallKit
import UIKit
 
final class VoipManager: NSObject, PKPushRegistryDelegate, CXProviderDelegate {
  static let shared = VoipManager()
  private let registry = PKPushRegistry(queue: .main)
  let provider: CXProvider
 
  override init() {
    let config = CXProviderConfiguration(localizedName: "Rork Talk")
    config.supportsVideo = true
    config.maximumCallsPerCallGroup = 1
    config.supportedHandleTypes = [.generic]
    self.provider = CXProvider(configuration: config)
    super.init()
    self.provider.setDelegate(self, queue: .main)
    registry.delegate = self
    registry.desiredPushTypes = [.voIP]
  }
 
  // 1. トークン取得 — サーバへ送る
  func pushRegistry(_ registry: PKPushRegistry, didUpdate pushCredentials: PKPushCredentials, for type: PKPushType) {
    guard type == .voIP else { return }
    let token = pushCredentials.token.map { String(format: "%02x", $0) }.joined()
    print("[PushKit] token=\(token)")
    Task { try? await ApiClient.shared.registerVoipToken(token) }
  }
 
  // 2. トークン失効 — サーバ側でも消す
  func pushRegistry(_ registry: PKPushRegistry, didInvalidatePushTokenFor type: PKPushType) {
    Task { try? await ApiClient.shared.invalidateVoipToken() }
  }
 
  // 3. Push 受信 — 30 秒以内に必ず reportNewIncomingCall する
  func pushRegistry(
    _ registry: PKPushRegistry,
    didReceiveIncomingPushWith payload: PKPushPayload,
    for type: PKPushType,
    completion: @escaping () -> Void
  ) {
    let dict = payload.dictionaryPayload
    guard
      let callIdString = dict["callId"] as? String,
      let callId = UUID(uuidString: callIdString),
      let name = dict["callerName"] as? String
    else {
      // payload 異常時もダミー着信を出さないと iOS に kill される
      let fallbackId = UUID()
      let update = CXCallUpdate()
      update.localizedCallerName = "通話"
      provider.reportNewIncomingCall(with: fallbackId, update: update) { _ in completion() }
      return
    }
 
    let update = CXCallUpdate()
    update.remoteHandle = CXHandle(type: .generic, value: dict["callerHandle"] as? String ?? "unknown")
    update.localizedCallerName = name
    update.hasVideo = (dict["hasVideo"] as? Bool) ?? false
 
    provider.reportNewIncomingCall(with: callId, update: update) { error in
      if let error = error {
        print("[CallKit] reportNewIncomingCall failed: \(error.localizedDescription)")
      } else {
        // ここでシグナリングと WebRTC を準備する
        WebRtcController.shared.prepareIncoming(callId: callId)
      }
      completion() // ⚠️ どんな分岐でも必ず完了する
    }
  }
 
  // 4. 応答ボタン押下
  func provider(_ provider: CXProvider, perform action: CXAnswerCallAction) {
    WebRtcController.shared.answer(callId: action.callUUID) { success in
      success ? action.fulfill() : action.fail()
    }
  }
 
  // 5. 終了ボタン押下
  func provider(_ provider: CXProvider, perform action: CXEndCallAction) {
    WebRtcController.shared.hangUp(callId: action.callUUID)
    action.fulfill()
  }
 
  func providerDidReset(_ provider: CXProvider) {
    WebRtcController.shared.tearDownAll()
  }
}

// app/voip/voipBootstrap.ts — Rork（RN）から CallKit/PushKit を起動する
// 期待動作: アプリ起動時に setup を一度だけ呼ぶ。Push 受信から 1 秒以内に
// displayIncomingCall が走り、ロック画面着信 UI が表示される。
 
import RNCallKeep from 'react-native-callkeep';
import VoipPushNotification from 'react-native-voip-push-notification';
import { Platform } from 'react-native';
import { useCallStore } from './callStore';
 
export async function setupVoip() {
  if (Platform.OS !== 'ios') return; // Android 側は ConnectionService で別実装
 
  await RNCallKeep.setup({
    ios: {
      appName: 'Rork Talk',
      supportsVideo: true,
      maximumCallGroups: '1',
      maximumCallsPerCallGroup: '1',
      includesCallsInRecents: false, // 履歴に残したくない場合は false
    },
    android: { alertTitle: '', alertDescription: '', cancelButton: '', okButton: '' },
  });
 
  // 1. PushKit トークン取得
  VoipPushNotification.addEventListener('register', async (token: string) => {
    try {
      await fetch('https://api.example.com/voip/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token }),
      });
    } catch (e) {
      console.error('[VoIP] failed to register token', e);
    }
  });
 
  // 2. VoIP Push 受信時 → CallKit に着信を渡す
  VoipPushNotification.addEventListener('notification', (notification: any) => {
    const callId: string = notification.callId ?? generateUuid();
    const callerName: string = notification.callerName ?? '通話';
    const hasVideo: boolean = !!notification.hasVideo;
 
    RNCallKeep.displayIncomingCall(callId, callerName, callerName, 'generic', hasVideo);
 
    // ストアに着信状態を保持しておくと、応答後の UI 遷移が書きやすい
    useCallStore.getState().setIncoming({ callId, callerName, hasVideo });
 
    // 必須: complete を呼ぶ
    VoipPushNotification.onVoipNotificationCompleted(callId);
  });
 
  // 3. 応答・終了の延長線
  RNCallKeep.addEventListener('answerCall', async ({ callUUID }: { callUUID: string }) => {
    try {
      await connectWebRtc(callUUID);
    } catch (e) {
      console.error('[VoIP] answer failed', e);
      RNCallKeep.endCall(callUUID);
    }
  });
  RNCallKeep.addEventListener('endCall', ({ callUUID }: { callUUID: string }) => {
    teardownWebRtc(callUUID);
    useCallStore.getState().clear();
  });
 
  // 4. 起動時に既存トークンを取得
  VoipPushNotification.registerVoipToken();
}
 
function generateUuid(): string {
  // crypto.randomUUID は React Native 0.74+ で利用可能
  return (globalThis.crypto?.randomUUID?.() ?? 'fallback-' + Date.now().toString(36)).toUpperCase();
}

// ios/WebRtcController.swift — CallKit と audio session の協調
// 期待動作: provider(_:didActivate:) のタイミングで初めて peerConnection の audio を有効化する。
import CallKit
import WebRTC
 
final class WebRtcController: NSObject, CXProviderDelegate {
  static let shared = WebRtcController()
  private let factory = RTCPeerConnectionFactory()
  private var pendingActivation: (() -> Void)?
 
  func prepareIncoming(callId: UUID) {
    // この時点ではまだ audio を流さない（CallKit が活性化通知を出すまで待つ）
    pendingActivation = { [weak self] in self?.startAudio(for: callId) }
  }
 
  func provider(_ provider: CXProvider, didActivate audioSession: AVAudioSession) {
    do {
      try audioSession.setCategory(.playAndRecord, mode: .voiceChat, options: [.allowBluetooth, .duckOthers])
      try audioSession.setActive(true, options: [])
      pendingActivation?()
      pendingActivation = nil
    } catch {
      print("[Audio] activate failed: \(error)")
    }
  }
 
  func provider(_ provider: CXProvider, didDeactivate audioSession: AVAudioSession) {
    // 通話終了時の停止処理は CallKit に任せる
  }
 
  private func startAudio(for callId: UUID) {
    // peerConnection.add(localAudioTrack, ...) など
  }
}