Phát triển ngoài app

In a desktop browser there is no bridge: getSDK() returns null, isInApp() is false, the hooks return defaults, and whenNativeReady() rejects. Make your mini app usable in that state, or install a mock bridge in development before your app code runs:

// src/dev-bridge.ts — import it first in main.ts, in development builds only
import type { CatholicMiniAppSDK } from '@i-catholic/mini-app-sdk'

if (import.meta.env.DEV && !('CatholicMiniApp' in window)) {
  const store = new Map<string, string>()
  const mock: CatholicMiniAppSDK = {
    postMessage() {},
    close() {},
    setHeader() {},
    ready() {},
    getSDKVersion: async () => '2.0.0',
    getLocale: async () => 'vi',
    getTheme: async () => 'light',
    getDeviceInfo: async () => ({ platform: 'ios', appVersion: 'dev' }),
    getSafeArea: async () => ({ top: 47, bottom: 34, left: 0, right: 0 }),
    safeArea: { top: 47, bottom: 34, left: 0, right: 0 },
    getUser: async () => ({ name: 'Giuse Nguyễn Văn A', church: 'Giáo xứ Mẫu' }),
    storage: {
      get: async (k) => store.get(k) ?? null,
      set: async (k, v) => (store.set(k, v), true),
      remove: async (k) => (store.delete(k), true),
      clear: async () => (store.clear(), true),
    },
    getPoints: async () => 120,
    earnPoints: async () => ({ userQuest: null, totalPoints: 130 }),
    showToast: (o) => console.info('[toast]', o.title),
    setStatusBarStyle() {},
    setTextSelectable() {},
    setScrollbarVisible() {},
    showAlert: async () => 'ok',
    share: async () => ({ action: 'sharedAction' }),
    navigate: (r) => console.info('[navigate]', r),
    createShareLink: async ({ path }) => `https://i-catholic.org/app/m/dev/${path.replace(/^\//, '')}`,
    shareContent: async () => ({ action: 'sharedAction' }),
    scanQr: async () => ({ text: window.prompt('QR payload') ?? '' }),
  }
  ;(window as unknown as { CatholicMiniApp: CatholicMiniAppSDK }).CatholicMiniApp = mock
}

The same object works as a test double in Vitest or Jest. Assign it to window.CatholicMiniApp in a beforeEach. To simulate events, dispatch them yourself:

window.dispatchEvent(new CustomEvent('CatholicMiniApp:themeChange', { detail: { theme: 'dark' } }))

Always test on a real phone before submitting, on both iOS and Android. Safe areas, the share sheet and the camera only behave for real there.