js interface 적용을 통한 성과 관리

---

AS-IS

기존에는 앱 스킴 호출 방식을 사용하고 있었습니다. 이 방식은 동시에 여러 스킴을 호출하면 1개를 제외한 나머지가 미동작하는 문제가 있었습니다. 2개 이상의 스킴을 호출할 경우 호출 간 500ms delay를 필수적으로 넣어야 했고, vue와 jsp가 같이 구동되는 환경이기 때문에 앱스킴 호출부를 전역적으로 관리할 수 없었습니다.

emart.app.cmd('open_messagebox_webpage', 'name=window.getMessageBox');

메인 마수동 팝업

약 2.5초 소요

알림함

약 1.4초 소요

TO-BE

JavascriptInterface 호출 방식으로 전환했습니다. 이 방식은 동시 호출 시에도 미동작 없이 비동기적으로 구동됩니다.

// 선언부
export const useEapp = (scheme: string, callback: string) => {
    const { state } = useStore();
    const { isApp, isIOS, isAndroid } = state.appInfo;

    if (!isApp) {
        return;
    }

    const eventHandler = () => {
        if (isAndroid) {
            emartApp[scheme](callback);
        } else if (isIOS) {
            const message = {
                scheme,
                callback,
            };
            webkit.messageHandlers.emartApp.postMessage(message);
        }
        document.removeEventListener('DOMContentLoaded', eventHandler);
    };
    document.addEventListener('DOMContentLoaded', eventHandler);
};

// 호출부
useEapp('getPushList', 'window.getMessageBox');

메인 마수동 팝업

약 0.8초로 단축되어 기존 대비 1.7초가 감소했습니다.

알림함

약 0.5초로 단축되어 기존 대비 0.9초가 감소했습니다.

항목	비교	값 (초)
메인 마수동 팝업 (AS-IS)	2.5	2.5 초
메인 마수동 팝업 (TO-BE)	0.8	0.8 초
알림함 (AS-IS)	1.4	1.4 초
알림함 (TO-BE)	0.5	0.5 초