캐시를 활용한 웹뷰간 상태 공유

---

Issue

현재 이마트앱은 네이티브 인텐트에 vue 웹뷰가 올라가는 형태입니다.

사용자가 복수개의 웹뷰를 띄운 상황에서 로그인 또는 로그아웃을 진행할 경우, 최상위 웹뷰가 아닌 다른 웹뷰는 로그인 여부가 업데이트되지 않습니다.

따라서 현재 정책은 로그인 여부가 변경될 시, 모든 웹뷰를 제거하고 있습니다.

웹뷰를 종료하고 다시 띄우게 되면 앱 메모리도 많이 잡아먹을 뿐더러, 사용자가 이전에 열어놓은 페이지가 모두 날아가 다시 돌아갈 수 없는 불편함이 있습니다.

이에 로그인 여부가 변경될 때, 모든 웹뷰에서 로그인 여부를 업데이트하는 방향에 대해 고민해보았습니다.

Trouble Shooting

모든 동작은 vue/common.js에 전역적으로 선언한 콜백함수와 네이티브 앱스킴의 실행으로 이루어지는 경우입니다.

모든 웹뷰를 지웠다가 복수개의 웹뷰를 다시 띄우기

현재 open_main_webpage 스킴을 통해 웹뷰를 한개 띄우고 있는데, 복수개의 페이지를 넘겨주어서 앱스킴을 복수개 실행하는 방법입니다.

사용자가 로그인 여부가 업데이트된 이전 페이지들을 볼 수 있다는 장점이 있지만, 순간적으로 웹뷰가 여러개 뜨면서 데이터가 낭비되고 속도가 느려질 수 있습니다.

또한, 현재 앱 구조상 앱스킴을 사용하게 되면 0.5초의 딜레이를 주어야 씹히는 앱스킴없이 실행가능하기 때문에 js interface를 만들고, 앱 버전 분기를 진행해야합니다.

네이티브에서 최상단 웹뷰의 로그인 여부 변경 확인 후 모든 웹뷰 새로고침

사용자가 보는 페이지에서는 웹뷰가 여러개 새로 뜨는 애니메이션을 보여줄 필요가 없어 UX적으로는 문제가 없지만, 사용자도 모르는 새에 백단에서 떠있는 웹뷰들이 전부 새로고침되기 때문에 위 방법과 마찬가지로 데이터가 낭비되고 속도가 느려질 수 있습니다.

캐시를 통해 로그인 여부 새로 그리기

vue 웹뷰는 다행히도 spa로 구현되어있기 때문에, isLogin state만 변경해주면 새로고침 없이 로그인 상태를 페이지에 다시 그릴 수 있습니다.

캐시는 도메인 기준으로 저장되기 때문에, 탭 간 캐시가 공유됩니다.(웹뷰 간 캐시가 공유됨)

최상단 웹뷰에서 로그인 변경 여부가 파악되면 현재 존재하는 모든 웹뷰에서 콜백함수를 호출하고, 해당 콜백함수는 같은 도메인에 존재하는 APP_CID라는 이름의 캐시가 존재하는지 확인 후 isLogin state를 업데이트합니다.

모든 웹뷰에 같은 콜백함수를 호출해야한다는 단점이 있지만 데이터가 낭비되지도, 속도가 느려지지도 않습니다.

3번째 방법을 고안했지만, 브라우저의 탭과 다르게 웹뷰 간 캐시는 불규칙하게 유지가 되는 현상이 있어 위방법을 적용하지 못했습니다. 하지만 탭 간 캐시데이터가 유지된다는 사실은 jsp 단에 올라가 있는 현재 프로젝트 구성의 단점을 보완할 수 있는 아이템임은 분명합니다.