android webview에서 SPA(react, nextjs) 화면이 보이지 않아요

안드로이드는 4.4버전부터 크롬엔진을 내장한 웹뷰를 사용하고 있습니다

 

그리고 각 버전별로 다음과 같은 크롬 버전을 사용하고 있습니다

4.4 (KitKat) -> 크롬 30.0.0.0
4.4.3 -> 크롬 33.0.0.0
5.0(LOLLIPOP) -> 크롬 36.0.0.0 부터~

android 5.0이상부터는 webview가 play service를 통해서 단독 업데이트가 가능해지면서 자동업데이트가 시행되고 있어

 

개별 기기마다 play service의 업데이트 여부에 따라 크롬 버전이 조금씩 차이가 있을수 있습니다

 

하지만 대부분 최신버전을 사용하는 쪽으로 업데이트가 되고 있습니다

 

문제는 4.4.x 대의 android인데요

 

크롬 3x.0.0.0에서는 es6 지원률이 낮습니다

 

 

그래서 es6로 빌드된 웹사이트를 4.x 버전대의 안드로이드 앱에서 웹뷰로 보여주고자 할때 다양한 문제를 만날수가 있습니다

 

눈으로 보이는 증상은 javascript를 읽으면서 도중에 에러를 발생시켜 화면에 아무것도 나타나지 않게됩니다

 

안드로이드 4.x 버전대의 웹뷰에서도 react 로 만든 웹사이트를 잘 보이게 지원하려고 하는경우에는 꽤 많은 수고를 들여야 합니다

 

babel의 폴리필도 계속해서 추가해서 넣어주면서 디버깅을 해야합니다

 

 

크롬 21-40버전까지는 strict 모드가 아닐때만 const 를 지원한다고 되어있는데

 

nextjs에서 typescript를 사용하고 있다면 기본적으로 strict mode가 on 되어있고,

 

그리고 아마도 stict mode를 on으로 사용하고 있는 부분들이 의외로 많아

 

가장 기본적인 것들부터 손봐야할곳이 많습니다

 

 

이제 andorid 4.x대는 포기하는게 가장 현명한 답인것 같기도 합니다