JavascriptInterface 사용해 동시 호출 씹힙 현상 방지하기

Issue

1. 2개 이상의 앱 스킴을 동시에 호출할 경우, 1개를 제외한 나머지는 씹히는 현상이 있었습니다.

emart.app.cmd('페이지 이동');
emart.app.cmd('페이스 아이디 열기'); // 동작하지 않음.

1. 앱을 거쳐서 데이터를 받을 때, 데이터 자체를 받지 못하고 데이터를 포함한 콜백함수를 호출해 값을 사용하도록 구현할 수 밖에 없었습니다.
2. 네이티브에서 함수를 실행할 때 window에 전역적으로 선언된 함수만 실행할 수 있었습니다.
3. 앱스킴 관련 로직이 실행되었는지 알 수 없습니다. 콜백함수가 실행되는 타이밍으로 짐작할 수 있습니다.

// 앱 스킴 호출
emart.app.cmd('get_message_count', window.getMessageCount);

// 앱 스킴 콜백 함수
window.getMessageCount = (messageCount) {
// 알림 개수 사용한 로직
}

// 앱스킴 수신
// 알림 개수 받아오는 로직 실행
count = 10;
runJavascript('window.getMessageCount(count)');

Trouble Shooting

emart.app.cmd('페이지 이동');
emart.app.cmd('페이스 아이디 열기'); // 동작하지 않음

// 콜백함수로만 값 수신 가능
window.getMessageCount = (messageCount) => { /* ... */ }
emart.app.cmd('get_message_count', window.getMessageCount);

// 동시 호출 가능 + 값 직접 반환
const messageCount = Android.getMessageCount();

// 비동기 필요 시 customEvent 활용
Android.getMessageCount();
window.addEventListener('get_message_count', (e) => {
    console.log(e.messageCount);
});

동시 호출 앱 스킴 씹힘 현상

• javascriptInterface를 사용하게 되면, js에서 직접 네이티브 로직을 담당하는 함수를 호출하기 때문에, 호출이 씹히지 않도록 구현할 수 있습니다.

window.getMessageCount = (messageCount) => {
	// 알림 개수 사용한 로직
}
Android.getMessageCount();

class Android {
	@javascriptInterface
	public void getMessageCount() {
		// 알림 개수 받아오는 로직 실행
		count = 10;
		runJavascript('window.getMessageCount(count)');
	}
}

콜백함수 대신 값을 받아 사용

• 데이터 값을 사용하기 위해 콜백함수를 불러왔던 주객이 전도된 지금과는 달리, 값 자체를 받아 사용할 수 있습니다.

const messageCount = Android.getMessageCount(); // count 변수에 10이 들어감.

class Android {
	@javascriptInterface
	public void getMessageCount() {
		// 알림 개수 받아오는 로직 실행
		count = 10;
		return count;
	}
}

동기적 실행으로 네이티브 로직이 종료된 시점을 알 수 있음

• javascriptInterface에 선언된 함수는 동기적으로 동작하기 때문에, 네이티브 로직의 종료 시점을 알 수 있습니다.
• 비동기 처리가 불가능하므로, 사용 시 사용자의 UX점인 관점에서 주의가 필요합니다.

customEvent를 통해 비동기 실행을 할 수 있음(테스트 필요)

onMounted(() => {
	// 네이티브 로직 호출
	Android.getMessageCount();

  // 로직 응답 값 수신(비동기)
	window.addEventListener('get_message_count', async(e) => {
		console.log(e.messageCount); // 응답 값을 통해 로직 실행
	})
})

class Android {
	@javascriptInterface
	public void getMessageCount() {
		// 알림 개수 받아오는 로직 실행
		count = 10;
		
		// event 생성 및 event 호출
	}
}