Inappbrowser
- cordova가 제공하는 플러그인
- 기본적으로 cordova는 HTML,CSS,JS 를 활용한 client-side 플랫폼이다
- php와 같은 server-side는 내부적으로 작동시켜줄 engine및 parser가 없기때문에 구동시키려면 다른 방법이 필요
- Inappbrowser 플러그인 활용시 웹뷰 형태로 web resources들을 불러올 수 있다.
설치과정
https://www.youtube.com/watch?v=snwV_8KeDjE 를 참고해서 설치를 진행한다.
좀더 세부적인 옵션은 cordova 공식문서를 참고한다.
위 동영상대로 정상적으로 설치를 마치고 cordova emulate로 앱을 띄워 보면, 기대와는 달리 회색창만 덩그러니 뜬다. 어디서 잘못됐는지 debug를 해보자!
Chrome inspect
에뮬레이터를 띄운 뒤 크롬창을 띄우고 chrome://inspect/#devices로 접속해보면 위와 같이 현재 작동중인 에뮬레이터가 검색된다. 하단에 inspect를 누르면 console창을 확인할 수 있다.
에러1
검색해보니 content-security-policy정책에서 이상이 생긴것 같다.
해결법
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">index.html파일의 meta 태그에 unsafe-inline 속성을 추가해줘서 인라인 js및 css를 허용하도록 설정해준다.
[참고] : Content-Security-Policy란?
이제 되겠지..? 부푼 마음을 안고 다시 cordova emulate를 실행해보자
에러2
??? 새로운 에러가 뜬다. 당황하지말고 검색해보자.
[참고1] : clearText에러
[참고2] : clearTextHTTP
원인은 안드로이드에서 기본적으로 Http접근을 허용하지 않는다고 한다. 안드로이드 API레벨 28이상부터 cleartext HTTP의 default값이 disabled란다. 이것을 활성화 시켜주도록 하자.
AndroidManifest.xml 파일로 들어가서
<application android:hardwareAccelerated="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:usesCleartextTraffic="true">usesCleartextTrafffic을 true로 바꿔줬다.
저장하고 다시 cordova emulate!
최종결과화면
깔끔히 원하던 naver사이트가 웹뷰 형태로 들어왔다 :)
