Ionic (Capacitor) Integration

npm install @capacitor/push-notifications @capacitor/preferences @capacitor/app @capacitor/device
npx cap sync

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)
}

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'Example',
  webDir: 'dist',
  plugins: {
    PushNotifications: { presentationOptions: ['badge', 'sound', 'alert'] },
  },
};

import { Capacitor } from '@capacitor/core';
import { PushNotifications, type Token, type ActionPerformed } from '@capacitor/push-notifications';
import { Preferences } from '@capacitor/preferences';
import { App } from '@capacitor/app';
import { Device } from '@capacitor/device';

const NOTIPILOT_BASE_URL = 'https://app.notipilot.com/api/v1';
const APP_ID = 'YOUR-EXPO-PROJECT-ID'; // "Expo Project ID" from the dashboard
const UID_KEY = 'notipilot_device_uid';

type Attributes = Record<string, string | number | boolean | null>;

async function deviceUid(): Promise<string> {
  const { value } = await Preferences.get({ key: UID_KEY });
  if (value) return value;
  const uid = crypto.randomUUID();
  await Preferences.set({ key: UID_KEY, value: uid });
  return uid;
}

async function post(path: string, body: object, attempt = 0): Promise<any> {
  const res = await fetch(`${NOTIPILOT_BASE_URL}${path}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify(body),
  });
  const json = await res.json().catch(() => ({}));
  if ((res.status === 429 || res.status >= 500) && attempt < 3) {
    await new Promise((r) => setTimeout(r, (Number(json.retry_after) || 2 ** attempt) * 1000));
    return post(path, body, attempt + 1);
  }
  if (!res.ok) console.warn('[NotiPilot]', res.status, json.error, json.errors ?? json.message);
  return json;
}

async function toExpoPushToken(nativeToken: string, uid: string): Promise<string> {
  const isIOS = Capacitor.getPlatform() === 'ios';
  const { id: bundleId } = await App.getInfo();

  const res = await fetch('https://exp.host/--/api/v2/push/getExpoPushToken', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      type: isIOS ? 'apns' : 'fcm',
      deviceId: uid.toLowerCase(),
      development: isIOS && import.meta.env.DEV, // iOS debug builds use the APNs sandbox
      appId: bundleId,
      deviceToken: nativeToken,
      projectId: APP_ID,
    }),
  });
  if (!res.ok) throw new Error(`Expo token exchange failed: ${res.status}`);
  return (await res.json()).data.expoPushToken;
}

/** Call on app launch. */
export async function initNotiPilot(extraAttributes: Attributes = {}) {
  if (!Capacitor.isNativePlatform()) return;

  await PushNotifications.addListener('registration', async (token: Token) => {
    try {
      const uid = await deviceUid();
      const expoToken = await toExpoPushToken(token.value, uid);
      const { languageCode } = await Device.getLanguageCode();
      const { version } = await App.getInfo();
      const region = new Intl.Locale(navigator.language).region ?? null;

      await post('/register-device', {
        app_id: APP_ID,
        device_uid: uid,
        token: expoToken,
        platform: Capacitor.getPlatform(), // 'ios' | 'android'
        provider: 'expo',
        attributes: {
          locale: languageCode.slice(0, 2),  // "tr"
          country: region,                   // "TR"
          app_version: version,
          ...extraAttributes,                // e.g. { city: 'Istanbul' }
        },
      });
    } catch (e) {
      console.warn('[NotiPilot] register failed', e);
    }
  });

  await PushNotifications.addListener('registrationError', (err) =>
    console.warn('[NotiPilot] native registration error', err),
  );

  // Notification tapped — custom data sent from the dashboard
  await PushNotifications.addListener('pushNotificationActionPerformed', (action: ActionPerformed) => {
    const raw = action.notification.data?.body;
    const data = typeof raw === 'string' ? safeJson(raw) : raw ?? action.notification.data;
    // e.g. data.screen === 'product' → router.navigate(...)
  });

  if (Capacitor.getPlatform() === 'android') {
    await PushNotifications.createChannel({ id: 'default', name: 'General', importance: 5 });
  }

  let perm = await PushNotifications.checkPermissions();
  if (perm.receive === 'prompt') perm = await PushNotifications.requestPermissions();
  if (perm.receive === 'granted') await PushNotifications.register();
}

/** Call when the user signs in. */
export async function identify(externalId: string, attributes?: Attributes) {
  return post('/identify-device', {
    app_id: APP_ID,
    device_uid: await deviceUid(),
    external_id: externalId,
    ...(attributes ? { attributes } : {}),
  });
}

function safeJson(s: string) {
  try { return JSON.parse(s); } catch { return {}; }
}

constructor() { initNotiPilot({ city: 'Istanbul' }); }

useEffect(() => { initNotiPilot({ city: 'Istanbul' }); }, []);

onMounted(() => initNotiPilot({ city: 'Istanbul' }));