Damoa Webview Bridge

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

설치방법

yarn add @rapportlabs/damoa-webview-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/AppToWeb/backButtonPressed.ts 파일 추가

       import { BaseMessage } from "../shared/model/BaseMessage"
       import { WebviewBridge } from "./utils/WebviewBridge"
       
       export interface BackButtonPressedMessage extends BaseMessage {
           kind: 'backButtonPressed'
       }
       
       /**
        * Android에서 뒤로가기 버튼을 눌렀을 때 이벤트를 처리합니다.
       * [isBackButtonPressedMessage](/damoa-app-bridge/filter/functions/isBackButtonPressedMessage)로 필터링을 진행합니다.
       * @example
       * ```typescript
           useEffect(() => {
               const onPress = () => {
                   backButtonPressed()
                   return true
               }
       
               BackHandler.addEventListener('hardwareBackPress', onPress)
               return () => {
                   BackHandler.removeEventListener('hardwareBackPress', onPress)
               }
           }, [isFocused, isSuccess])
       *    ```
       */
       export const backButtonPressed = () => {
           return WebviewBridge.postAppToWebMessage({ kind: 'backButtonPressed' })
       }
       
       /**
        * [backButtonPressed](/damoa-webview-bridge/message/functions/backButtonPressed)이벤트를 필터링합니다.
        * @example
           ```typescript
               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' })
                   }
               })
        *  ```
        */
       export const isBackButtonPressedMessage = (message: BaseMessage): message is BackButtonPressedMessage => (
           message.kind === 'backButtonPressed'
       )
2. /packages/damoa-webview-bridge/src/message.ts 에 아래 코드 추가

   export { BackButtonPressedMessage, backButtonPressed } from '../../../message/AppToWeb/backButtonPressed'
3. /packages/damoa-app-bridge/src/filter.ts 에 hapticFeedback함수 추가

   export { isBackButtonPressedMessage } from '../../../message/AppToWeb/backButtonPressed'