WebView Bridge 통신 — Part 1: 개요 및 이론#

1
웹 ──[NAVIGATE_BACK]──→ 네이티브

1
window.webkit.messageHandlers.bridge.postMessage({ type: 'NAVIGATE_BACK' })

1
웹 ──[AUTH_TOKEN_REQUEST]──→ 네이티브
2
웹 ←──[AUTH_TOKEN_RECEIVE]── 네이티브

1
// 1. 수신 핸들러 등록
2
window.bridgeCallback = function(json) {
3
  const message = JSON.parse(json)
4
  if (message.type === 'AUTH_TOKEN_RECEIVE') {
5
    useToken(message.payload.token)
6
  }
7
}
8

9
// 2. 요청 전송
10
window.ReactNativeWebView.postMessage(JSON.stringify({
11
  type: 'AUTH_TOKEN_REQUEST'
12
}))

1
웹 ←──[AUTH_USER_RECEIVE]── 네이티브 (앱 초기화 시 자동 push)
2
웹 ←──[DEEP_LINK_RECEIVED]── 네이티브 (외부 딥링크 수신 시)

1
function callBridge(requestType, responseType, timeout = 5000) {
2
  return new Promise((resolve, reject) => {
3
    const timer = setTimeout(() => reject(new Error('Bridge timeout')), timeout)
4

5
    window.bridgeCallback = (json) => {
6
      const message = JSON.parse(json)
7
      if (message.type === responseType) {
8
        clearTimeout(timer)
9
        resolve(message.payload)
10
      }
11
    }
12

13
    window.ReactNativeWebView.postMessage(JSON.stringify({ type: requestType }))
14
  })
15
}
16

17
// 사용
18
const { token } = await callBridge('AUTH_TOKEN_REQUEST', 'AUTH_TOKEN_RECEIVE')

1
const messageQueue = []
2
let isReady = false
3

4
// 네이티브 메시지 수신 창구 (앱 초기화 즉시 설치)
5
window.bridgeCallback = function(json) {
6
  if (!isReady) {
7
    messageQueue.push(json)  // 준비 전 메시지는 큐에 보관
8
    return
9
  }
10
  processMessage(JSON.parse(json))
11
}
12

13
// 웹앱 초기화 완료 후 호출
14
function onAppReady() {
15
  isReady = true
16
  messageQueue.forEach(json => processMessage(JSON.parse(json)))  // 밀린 메시지 처리
17
  messageQueue.length = 0
18
}

1
Abstraction
2
  └─ impl: Implementor  ← 합성(composition)으로 주입
3
        ├─ ConcreteImplementorA
4
        └─ ConcreteImplementorB
5

6
RefinedAbstraction extends Abstraction
7
  └─ 도메인 특화 메서드 추가

1
"햅틱 피드백을 보내라"는 명령이 있을 때...
2
  → 실제 앱(RN):   window.ReactNativeWebView.postMessage(JSON)
3
  → 실제 앱(iOS):  window.webkit.messageHandlers.bridge.postMessage(obj)
4
  → 실제 앱(AOS):  window.Android.postMessage(JSON)
5
  → 브라우저(개발): console.log로 시뮬레이션

1
// ❌ Bridge Pattern 없이 — 조건 분기가 기능마다 중복
2
function goBack() {
3
  if (window.ReactNativeWebView) {
4
    window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'NAVIGATE_BACK' }))
5
  } else if (window.webkit?.messageHandlers?.bridge) {
6
    window.webkit.messageHandlers.bridge.postMessage({ type: 'NAVIGATE_BACK' })
7
  } else if (window.Android) {
8
    window.Android.postMessage(JSON.stringify({ type: 'NAVIGATE_BACK' }))
9
  } else {
10
    console.log('[Dev] NAVIGATE_BACK')
11
  }
12
}
13

14
function hapticSelection() {
15
  // 위와 동일한 분기 코드가 또 반복...
16
}

1
// ✅ Bridge Pattern 적용 후
2
class HapticBridge extends BridgeAbstraction {
3
  selection(): void {
4
    this.send({ type: 'HAPTIC_SELECTION' })  // 플랫폼을 전혀 모름
5
  }
6
}
7

8
// 플랫폼 분기는 NativeBridge.send() 한 곳에만 존재
9
class NativeBridge implements IBridgeImpl {
10
  send(message): void {
11
    if (window.ReactNativeWebView) { ... }
12
    else if (window.webkit?.messageHandlers?.bridge) { ... }
13
    else if (window.Android) { ... }
14
  }
15
}