ionic 에서 crosswalk 를 사용해야 하는 이유
ionic 은 Android의 경우 4.1 부터 지원한다. 하지만 4.1에서 하이브리드 앱에는 커다란 문제가 있다. 바로 브라우징 속도이다.
Android 의 경우 2.x~4.3 까지는 Webkit 기반의 Webview를 사용해왔다. 이 때문에 속도에 문제가 많이 발생한다.
하이브리드 앱이 여전히 속도가 별로라는 느낌이 없지않은데 Webkit 까지 더해지면 느리다는 느낌이 든다.
이걸 해결해주는게 바로 crosswalk 이다.
좀 더 자세한 내용을 알고 싶다면 다음 링크를 참고하자.
http://blog.ionic.io/crosswalk-comes-to-ionic/
https://crosswalk-project.org/documentation/cordova.html
설치법은 별거 없다. 그냥 프로젝트가 있는 디렉토에서
ionic browser add crosswalk
를 입력해주면 설치가 된다.
이 crosswalk 를 추가하고 빌드하는 순간 완성되는 앱의 사이즈가 갑자기 apk 파일 사이즈가 30MB까지 커져버린다.
문서를 보면 10~15mb 정도가 커진다고 되어있다.
속도를 위해 추가적인 라이브러리가 추가된 것이다.
이유인즉 4.1~4.3 의 안드로이드에서도 크롬웹뷰를 사용하게 해주는것이다. 크롬웹뷰를 내장하기 위한 희생이라고 보면된다.
하이브리드앱의 관심사는 속도이므로 이까짓 용량은 조금 추가해주고 속도를 얻도록 하자.
'IT > ionic' 카테고리의 다른 글
| 크롬 cross domain 무시하기 (3) | 2016.09.05 |
|---|---|
| 아이오닉 에서 되는것과 안되는 것들 (0) | 2016.09.04 |
| ionic 에서 쿠키 다루기 ( ionic에서 쿠키에 대한 잘못된 인식 ) (0) | 2016.09.04 |
| ionic 에서 crosswalk 를 사용해야 하는 이유 (17) | 2016.08.29 |
| ionic 2 버전말고 기존 1 버전 사용하는 방법 (0) | 2016.08.29 |
| Ionic Windows에서 설치하기 (0) | 2016.07.07 |
지금은 ionic browser add crosswalk 이 명령어가 폐기됐다고 하네요.
다음과 같이 설치해야 한다고 합니다.
cordova plugin add cordova-plugin-crosswalk-webview
저는 속도 때문이 아니라 특정 안드로이드에서 css가 깨져서 설치했습니다.
설치한 후에 css 깨지는 안드로이드폰에서 실행해보니까 잘 되더군요.
아마도 그 안드로이드폰 기본브라우저가 크롬설정이 안되어 있었나 봅니다.
아이오닉에서는 기본 브라우저를 기본으로 웹뷰를 띄우나 봐요;;
요즘 아이오닉 개발하고 있는데.. 개발자님 블로그에 유용한 정보가 정말 많이 있네요.
글도 잘 쓰시고 설명도 잘 해주시는거 같고 댓글도 잘 달아주시는거 같네요 ㅎ
댓글 알람을 위해서 티스토리에 로그인해야 하는데... 오래전에 써서 아이디가 사라진듯 합니다 ㅠㅠ;;
초대장도 없구요...ㅠㅠ
혹시 여유가 되신다면 neoamuro@naver.com 으로 초대장 좀 보내주시면 안될까요 ㅎ;;
아이오닉 전문가이신 개발자님께 여러가지 도움을 좀 얻고 싶습니다~
빠른 답변 감사합니다~~
iframe 이나 링크로 이동시키면 crosswalk가 자동적용되는건가요??
이 웹앱이란건 안드로이드 앱내부에서 웹뷰라고 하는 웹브라우저를 통해서 html 환경을 구현해 주는것이구요. 앱 자체가 웹브라우징되는걸 보여주는 앱이라는 거죠.
그런데 안드로이드 자체에서 제공하는 웹뷰는 버전마다 호환성에 차이가 있고 다르게 표현되곤 합니다.
이를 하나의 호환성으로 통일해 주는것이 이 크로스워크라는 녀석입니다.
애초에 link던 iframe 과 같은 녀석들이랑 별로 관련없는 거에요.
혹시라도 그래도 이해가 안가신다면 웹앱의 구동방식에 대해서 좀 더 찾아보시고 이해하실 필요가 있겠네요^^
네이티브로 해당 페이지를 호출해도 빠르다고 하기는 힘든데 ionic이나 cordova 와 같은 것들이 들어가기 시작하면 앱 자체가 무거워질 뿐만 아니라 crosswalk 같은게 들어가면 용량까지 커져버립니다.
게다가 어차피 주소가 있는 웹페이지를 로딩하시는거라면 css호환성은 당연히 신경써서 만들어야 하니 crosswalk 를 쓸 이유도 없구요.
차라리 네이티브 앱으로 웹뷰를 만드시기를 추천드립니다.
cordova push기능같은걸 쓰려해도 애초에 링크된 웹페이지에서 구동하는 방식이 아닙니다. 내부파일로 구성된 html 파일에서 호출하는거죠.
https://github.com/slymax/webview
같은 네이티브를 사용하시거나 외부 링크가 아닌 아이오닉 프레임워크용으로 만드셔야 합니다.
ionic 은 angular 를 기본으로 가져가는 프레임워크인데...
어차피 링크식이면 angular 로 인한 모듈이 가볍지는 않기에 차라리 cordova 를 쓰시는게 나을거라고 보구요...
만약 꼭 ionic으로 껍데기로 만들라고 한다면 저라면 첫페이지정도는 ionic으로 개발하고 링크된 부분만 inappbrowser를 사용하는 식이겠네요...
ionic push 등을 활용하려면 웹페이지에서 앱 내부에 위치한 필수 js 라이브러리를 호출할 수 있어야하는데 뭐...잘 찾아서 수정하고 하면 될수야 있겠지만...외부로 노출된 부분이 아니라면 찾아서 쓰는것도 쉬운 작업이 아닐거라고 봅니다..
안드로이드와 아이폰용 개발을 아예 하실 수 없는 상황이라면 뭐 어쩔수 없을수는 있지만...별로 추천드리고 싶진않네요...
아무튼 어차피 웹페이지를 랩핑하시려는 거라서 crosswalk 는 굳이 안사용하시는게 좋을거라고 생각됩니다.
앱의 사이즈가 커지니까요..