Damoa App Bridge

퀸잇 웹뷰(damoa-customer-web)에서 퀸잇앱(damoa-react-native)에 메시지를 전달, 퀸잇앱에서 오는 메세지를 필터링하는 기능을 제공합니다.
메시지 리스트 보러가기
필터링 리스트 보러가기

설치방법

yarn add @rapportlabs/damoa-app-bridge@${version}

제공기능

Message

원하는 메시지를 퀸잇앱에 전달합니다.

    // 앱에 진동을 발생시킵니다.
    hapticFeedback('impactLight')
    // 앱에서 하나의 navigation stack을 제거하는 기능을합니다.
    navigate({
        type: 'pop'
        count: 1
    })

Filter

퀸잇앱에서 전달된 메시지를 필터링하여 웹뷰에서 원하는 액션을 취할 때 사용합니다.

    // native에서 발생한 뒤로가기 액션을 필터링하여 웹뷰에서 원하는 액션을 취합니다.
    const subscription = AppBridge.message$.pipe(
       filter(isBackButtonPressedMessage),
       filter(() => isFocused),
    ).subscribe(() => {
       if (backButtonHandlerManager.activeHandler !== undefined) {
           backButtonHandlerManager.activeHandler()
       } else if (canGoBack()) {
           router.back()
       } else {
           navigate({ type: 'pop' })
       }
    })

웹뷰에서 앱으로 보내는 메세지 추가

1. /message/WebToApp/HapticFeedbackMessage.ts 파일 추가

   import { BaseMessage } from "../shared/model/BaseMessage"
   import { WebToAppMessageBuilder } from "./utils/WebToAppMessageBuilder"
   import { postWebToAppMessage } from "./utils/WebviewPostMessage"
   
   export interface HapticFeedbackMessage extends BaseMessage {
       kind: 'hapticFeedback'
       data: {
           type: 'impactLight' | 'impactMedium' | 'impactHeavy'
       }
   }
   
   /**
    * 앱에 진동을 발생시킵니다. param의 type에 따라 진동의 세기가 조절됩니다.
    * [isHapticFeedbackMessage](/damoa-webview-bridge/filter/functions/isHapticFeedbackMessage)로 필터링을 진행합니다.
    * @example
     ```typescript
       const onHaptic = useCallback(() => {
           hapticFeedback('impactMedium')
       }, [])
    * ```
    */
   export const hapticFeedback = WebToAppMessageBuilder.build(
       (type: HapticFeedbackMessage['data']['type']) => (
           postWebToAppMessage({ kind: 'hapticFeedback', data: { type }})
       ),
       '1.81.0-0'
   )
   
   /**
    * [hapticFeedback](/damoa-app-bridge/message/functions/hapticFeedback)이벤트를 필터링합니다.
    * @example
     ```typescript
       const hapticFeedbackSubscription = WebviewBridge.message$.pipe(
           filter(isHapticFeedbackMessage),
       ).subscribe((message) => {
           HapticFeedback.trigger(message.data.type)
       })
    * ```
    */
   export const isHapticFeedbackMessage = (message: BaseMessage): message is HapticFeedbackMessage => (
       message.kind === 'hapticFeedback'
   )

2. /packages/damoa-app-bridge/src/message.ts 에 hapticFeedback함수 추가

   export { HapticFeedbackMessage, hapticFeedback } from '../../../message/WebToApp/hapticFeedback'

3. /packages/damoa-webview-bridge/src/filter.ts 에 hapticFeedback함수 추가

   export { isHapticFeedbackMessage } from '../../../message/WebToApp/hapticFeedback'