웹뷰 액티비티간 데이터 동기화하기

카카오스타일 프론트엔드 챕터가 지그재그 에픽 서비스에서 웹뷰 액티비티 간 데이터를 동기화한 방법을 공유한다. 앱 안에서 페이지 이동마다 새 웹뷰 액티비티를 띄우는 구조라, 상세에서 좋아요를 누르고 닫으면 이전 화면에도 반영돼야 했다. 해법은 Broadcast Channel API 와 pubkey/broadcast-channel 라이브러리다.

핵심 포인트

상황은 네이티브 앱 같은 경험을 주려고 페이지 이동 시 앱 인터페이스로 새 웹뷰 액티비티를 여는 구조에서 생겼다.
Broadcast Channel API 는 동일한 출처의 서로 다른 브라우징 컨텍스트, 즉 탭이나 윈도우, iframe 이 채널을 열거나 참여해 양방향으로 메시지를 주고받게 해준다.
사용법은 간단하다. 채널 이름을 인자로 인터페이스를 생성하면 채널을 만들거나 이미 열려 있으면 그 채널에 참여한다.
네이티브 API 는 지원 범위가 제한적이라, 환경에 따라 localStorage 나 IndexedDB 같은 다른 방식으로도 제공하는 pubkey/broadcast-channel 라이브러리를 썼다.
라이브러리는 채널 생성 시 옵션으로 native, idb, localstorage 중 사용 방식을 지정할 수 있고, 메시지 전달과 채널 종료는 네이티브와 동일하다.

상세 정리

비슷한 예로 페이스북이나 인스타그램에서 상세 페이지의 좋아요가 타임라인으로 돌아왔을 때 반영되는 경우를 든다.
예제는 리액트 Counter 앱이다. 라이브러리를 훅으로 감싼 useBroadcastChannel 을 만들어 리액트에서 쓰기 편하게 했다.
상태를 바꿀 때 postMessage 를 호출해 다른 윈도우나 탭에 알리는 방식으로 탭 간 카운터가 동기화된다.
대안도 함께 제시한다. react-query 로 데이터를 관리하고 있다면 직접 주고받는 대신 실험 버전 브로드캐스트 플러그인으로 동기화할 수 있다.
또 다른 대안은 클라이언트끼리 맞추는 대신 웹뷰 전환 시점의 visibilitychange 이벤트에서 서버 데이터를 새로 받아오는 것이다.
저자는 해결 방법이 여럿이니 상황에 맞게 고르라고 정리한다.

왜 읽나앱 안 웹뷰나 여러 탭을 오가며 상태가 어긋나는 문제를 만난 프론트엔드 개발자에게, 브라우저 표준 API 하나로 푸는 방법과 그 대안들을 짧게 정리해주는 글.

카카오 스타일 (지그재그) 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청