WebView Bridge 통신 - Part 2: 실전 구현#

1
Vue 컴포넌트 / 미들웨어
2
  └─ composable (useBridge)
3
       └─ Feature Bridge — Refined Abstraction
4
            ├─ NavigationBridge  goBack() / switchTab()
5
            ├─ HapticBridge      impact() / selection() / notification()
6
            └─ AuthBridge        requestToken() / onTokenReceived()
7
                  │
8
                  └─ BridgeAbstraction — Abstraction 베이스
9
                        └─ impl: IBridgeImpl
10
                              ├─ NativeBridge  (RN / iOS / Android)
11
                              └─ MockBridge    (브라우저 개발 환경)

1
bridge/
2
  core/
3
    IBridgeImpl.ts          # Implementation 인터페이스 (계약)
4
    BridgeAbstraction.ts    # Abstraction 베이스 클래스
5
  features/
6
    NavigationBridge.ts     # Refined Abstraction: 네비게이션
7
    HapticBridge.ts         # Refined Abstraction: 햅틱
8
    AuthBridge.ts           # Refined Abstraction: 인증
9
  impl/
10
    NativeBridge.ts         # Concrete Implementation: 실제 네이티브
11
    MockBridge.ts           # Concrete Implementation: 브라우저 시뮬레이터
12
  index.ts                  # 환경 감지 + 싱글턴 export
13

14
types/
15
  bridge.ts                 # 메시지 타입 중앙 관리
16

17
composables/
18
  useBridge.ts              # Vue 컴포넌트용 composable
19

20
plugins/
21
  bridge.client.ts          # Nuxt client-only 플러그인 (SSR 격리)

1
// enum 대신 const object + as const 사용
2
// 이유: enum은 런타임에 실제 객체를 생성하지만, const object는 트리셰이킹에 유리
3
export const BridgeMessageType = {
4
  NAVIGATE_BACK: 'NAVIGATE_BACK',
5
  NAVIGATE_TAB: 'NAVIGATE_TAB',
6
  HAPTIC_IMPACT: 'HAPTIC_IMPACT',
7
  HAPTIC_SELECTION: 'HAPTIC_SELECTION',
8
  HAPTIC_NOTIFICATION: 'HAPTIC_NOTIFICATION',
9
  AUTH_TOKEN_REQUEST: 'AUTH_TOKEN_REQUEST',
10
  AUTH_TOKEN_RECEIVE: 'AUTH_TOKEN_RECEIVE',
11
  AUTH_USER_RECEIVE: 'AUTH_USER_RECEIVE',
12
} as const
13

14
// `typeof X[keyof typeof X]` 패턴으로 value union type 추출
15
export type BridgeMessageTypeValue = (typeof BridgeMessageType)[keyof typeof BridgeMessageType]
16
// → 'NAVIGATE_BACK' | 'NAVIGATE_TAB' | 'HAPTIC_IMPACT' | ...

1
// 웹 → 네이티브 (Outbound)
2
export type OutboundBridgeMessage =
3
  | NavigateBackMessage
4
  | NavigateTabMessage
5
  | HapticImpactMessage
6
  | HapticSelectionMessage
7
  | HapticNotificationMessage
8
  | AuthTokenRequestMessage
9

10
// 네이티브 → 웹 (Inbound)
11
export type InboundBridgeMessage =
12
  | AuthTokenReceiveMessage
13
  | AuthUserReceiveMessage
14

15
// 전체 (방향 무관)
16
export type BridgeMessage = OutboundBridgeMessage | InboundBridgeMessage

1
// 네비게이션
2
export type TabName = 'home' | 'products' | 'wishlist' | 'mypage'
3

4
export interface NavigateTabMessage {
5
  type: typeof BridgeMessageType.NAVIGATE_TAB
6
  payload: { tab: TabName }
7
}
8

9
// 햅틱 — iOS UIFeedbackGenerator 스펙 기준
10
export type HapticStyle = 'light' | 'medium' | 'heavy'
11
export type HapticNotificationType = 'success' | 'warning' | 'error'
12

13
export interface HapticImpactMessage {
14
  type: typeof BridgeMessageType.HAPTIC_IMPACT
15
  payload: { style: HapticStyle }
16
}
17

18
export interface HapticNotificationMessage {
19
  type: typeof BridgeMessageType.HAPTIC_NOTIFICATION
20
  payload: { notificationType: HapticNotificationType }
21
}
22

23
// 인증
24
export interface AuthTokenReceiveMessage {
25
  type: typeof BridgeMessageType.AUTH_TOKEN_RECEIVE
26
  payload: {
27
    token: string
28
    expiresAt: number  // Unix timestamp (ms)
29
  }
30
}
31

32
export interface AuthUser {
33
  id: string
34
  email: string
35
  name: string
36
  avatarUrl?: string
37
}

1
// 네이티브가 처리 결과를 돌려줄 때의 공통 형식
2
export interface BridgeResponse<T = unknown> {
3
  success: boolean
4
  data?: T
5
  error?: string
6
}
7

8
// receive()에 등록하는 콜백 타입
9
export type BridgeMessageHandler<T extends BridgeMessage = BridgeMessage> = (
10
  message: T,
11
) => void

1
// DevTools 콘솔에서
2
import { authBridge } from '/bridge/index.ts'
3
authBridge.impl.emit({
4
  type: 'AUTH_TOKEN_RECEIVE',
5
  payload: { token: 'test-token', expiresAt: Date.now() + 3600000 }
6
})

1
1. window.ReactNativeWebView  →  'react-native'
2
2. window.webkit.messageHandlers.bridge  →  'ios'
3
3. window.Android  →  'android'
4
4. (없으면)  →  'mock'

1
// 팩토리: 환경에 따라 구현체 결정
2
export function createBridgeImpl(env?: BridgeEnvironment): IBridgeImpl {
3
  const resolvedEnv = env ?? detectEnvironment()
4
  // RN / iOS / Android 세 환경은 모두 NativeBridge로 통합
5
  // 각 채널의 차이는 NativeBridge.send() 내부에서 처리
6
  if (resolvedEnv === 'mock') return new MockBridge()
7
  return new NativeBridge()
8
}
9

10
// 모듈 레벨 싱글턴 — 앱 전체에서 동일 인스턴스 + 핸들러 상태 공유
11
const impl = createBridgeImpl()
12

13
export const navigationBridge = new NavigationBridge(impl)
14
export const hapticBridge = new HapticBridge(impl)
15
export const authBridge = new AuthBridge(impl)

1
// middleware/auth.ts (개념 코드)
2
import { authBridge } from '@/bridge'
3

4
export default defineNuxtRouteMiddleware(() => {
5
  // 1. 수신 핸들러 먼저 등록
6
  authBridge.onTokenReceived((token) => {
7
    // 토큰을 받으면 Pinia store나 cookie에 저장
8
    useAuthStore().setToken(token)
9
  })
10

11
  // 2. 토큰 요청 전송
12
  authBridge.requestToken()
13
})

1
// ❌ 서버에서 import하면 즉시 오류
2
import { navigationBridge } from '@/bridge'  // window 접근 발생

1
plugins/
2
  bridge.client.ts  ← 서버에서 절대 실행되지 않음

1
export function detectEnvironment(): BridgeEnvironment {
2
  if (typeof window === 'undefined') return 'mock'  // SSR → 즉시 mock 반환
3
  // ...
4
}

1
// ✅ onMounted 또는 import.meta.client 가드 사용
2
onMounted(() => {
3
  const { authBridge } = await import('@/bridge')
4
  authBridge.requestToken()
5
})

1
[사용자 찜하기 클릭]
2
        │
3
        ▼
4
ProductCard.vue — handleWishlist()
5
  hapticBridge.selection()
6
        │
7
        ▼
8
HapticBridge.selection()         Refined Abstraction
9
  this.send({ type: 'HAPTIC_SELECTION' })
10
        │
11
        ▼
12
BridgeAbstraction.send()         Abstraction
13
  this.impl.send(message)
14
        │
15
        ├── [네이티브 환경] ──▶ NativeBridge.send()
16
        │                         ├─ RN:  ReactNativeWebView.postMessage(JSON)
17
        │                         ├─ iOS: webkit.messageHandlers.bridge.postMessage(obj)
18
        │                         └─ AOS: Android.postMessage(JSON)
19
        │
20
        └── [브라우저 환경] ──▶ MockBridge.send()
21
                                  console.log('[MockBridge] → send: HAPTIC_SELECTION')

1
[네이티브 앱이 토큰 전송]
2
        │
3
        ▼
4
window.bridgeCallback('{"type":"AUTH_TOKEN_RECEIVE","payload":{"token":"..."}}')
5
        │
6
        ▼
7
NativeBridge.dispatch(json)
8
  JSON.parse(json) → message
9
  handlers.get('AUTH_TOKEN_RECEIVE') → [wrappedHandler]
10
  wrappedHandler(message)
11
        │
12
        ▼
13
AuthBridge.onTokenReceived 내부 래퍼
14
  const { payload } = message as AuthTokenReceiveMessage
15
  handler(payload.token)           payload에서 token만 추출
16
        │
17
        ▼
18
컴포넌트/미들웨어의 콜백
19
  (token: string) => { ... }       깔끔한 인터페이스로 수신

1
┌────────────────────────────────────────────────────────────┐
2
│               Vue 컴포넌트 / Nuxt 미들웨어                  │
3
│  hapticBridge.selection()  |  authBridge.requestToken()    │
4
└──────────────────────────┬─────────────────────────────────┘
5
                           │ composable (useBridge)
6
┌──────────────────────────▼─────────────────────────────────┐
7
│              Feature Bridge  (Refined Abstraction)          │
8
│    NavigationBridge | HapticBridge | AuthBridge            │
9
│    도메인 특화 메서드, send()/receive() 호출                 │
10
└──────────────────────────┬─────────────────────────────────┘
11
                           │ extends
12
┌──────────────────────────▼─────────────────────────────────┐
13
│              BridgeAbstraction  (Abstraction)               │
14
│    impl.send() / impl.receive() 위임                        │
15
└──────────────────────────┬─────────────────────────────────┘
16
                           │ IBridgeImpl (의존성 주입)
17
┌─────────────────┬────────▼────────────────────────────────┐
18
│   NativeBridge  │              MockBridge                  │
19
│  (실제 네이티브) │           (브라우저/테스트)               │
20
│  RN/iOS/Android │        console.log + emit()             │
21
│  postMessage    │                                         │
22
└─────────────────┴─────────────────────────────────────────┘