'ThemeableBrowser'에 해당되는 글 2건

  1. 2015.12.21 [ionic] Android 호환성
  2. 2015.12.19 [ionic] iOS 호환성 3

[ionic] Android 호환성

모바일 2015. 12. 21. 17:59

이번에는 Android와 관련된 내용입니다.


1. cross-walk, User-Agent 관련

이건 이전 글로 대체합니다.

http://resisa.tistory.com/170


2. 푸시 관련

여러가지 푸시 플러그인이 있는데 저는 아래 플러그인으로 최종 선택하였습니다.

아래 플러그인이 사용도 가장 심플하고 다른 플러그인에서 안되는 기능도 됩니다.

https://github.com/Code1Tech/phonegap-plugin-push


푸시에서 GCM토큰을 받아오는 초기화 코드의 경우 앱 실행 타이밍과 연관이 있습니다. 입이 실행 되자마자 해당 초기화 코드가 실행되면 토큰을 정상적으로 가져오지 못합니다. 그래서 setTimeout()를 사용하여 2.5초 정도의 딜레이를 주고 실행시키고 있습니다. 2초정도로 했을 경우 특정 디바이스에서 토큰을 받아오지 못하는 현상이 있어 해당 시간을 늘렸습니다.


요구사항 중 앱이 실행 중인 경우에도 푸시가 왔으면 좋겠다는 의견이 있었습니다. iOS 푸시에서는 앱이 실행 중일 때는 푸시가 올 수 없습니다. 그래서 일반적으로 iOS에서는 앱이 실행 중일 경우 푸시가 오는 것처럼 앱내에서 구현을 해주고 있습니다.

여튼 안드로이드에서 앱이 실행 중일 경우 푸시가 오도록 하려면 위의 플러그인을 사용하여야 하며 아래 코드를 추가해주어야 합니다.


- GCMIntentService.java

@Override  

 public void onMessageReceived(String from, Bundle extras) {

            // if we are in the foreground and forceShow is `false` only send data

            if (!forceShow && PushPlugin.isInForeground()) {

                Log.d(LOG_TAG, "foreground");

                extras.putBoolean(FOREGROUND, true);

                PushPlugin.sendExtras(extras);

            }

            // if we are in the foreground and forceShow is `true`, force show the notification if the data has at least a message or title

            else if (forceShow && PushPlugin.isInForeground()) {

                Log.d(LOG_TAG, "foreground force");

                extras.putBoolean(FOREGROUND, true);

                PushPlugin.sendExtras(extras);

                showNotificationIfPossible(getApplicationContext(), extras);

            }

            // if we are not in the foreground always send notification if the data has at least a message or title

            else {

                Log.d(LOG_TAG, "background");

                extras.putBoolean(FOREGROUND, false);


                showNotificationIfPossible(getApplicationContext(), extras);

            }

    }


3. ThemeableBrowser Plugin

iframe내에 링크가 걸려 있을 경우 인앱브라우저 화면에서 아무런 버튼도 보이지 않는 현상이 있습니다. 직접 해당 플러그인을 사용하는 코드에서는 상관없지만 iframe내의 링크의 경우에 해당하는 내용입니다. 아래처럼 자바 코드에 close관련된 부분만 변경하여 넣어줬습니다.

 public boolean execute(String action, CordovaArgs args, final CallbackContext callbackContext) throws JSONException {

            final Options features = parseFeature("{ closeButton: { image: 'close', imagePressed: 'close_pressed', align: 'right', event: 'closePressed'}}");

}


4. MenuButton 관련

Android에서는 메뉴 버튼과 뒤로 가기 버튼이 있어 해당 부분에 대해서도 신경을 써줘야 합니다. 아래 링크로 대신합니다. 메뉴 버튼의 경우 기기에 따라서 다르게 동작합니다.


- CordovaWebViewImpl.java

https://forum.ionicframework.com/t/android-hardware-menu-button-not-working-with-cordova-5-1-1-and-ionic-1-1-0/33128/3



Posted by resisa
,

[ionic] iOS 호환성

모바일 2015. 12. 19. 12:18

몇년 만인지 밤을 새면서 개발을 할 만큼 바쁜 한달이 지나가고 있습니다. ㅜㅜ 덕분에?! 생활이 엉망진창이 되었지만;; 이제 다시 여유가 조금 생겨 정리 차원에서 이렇게 글을 쓰고 있습니다.

이전 글에서 적었듯이 하이브리드로 개발을 하면서 웹을 iframe 넣어 세상에는 없는(있으면 안되는) 앱이 만들어졌습니다 

iOS와 관련된 부분들을 정리하고 Android로 정리해 볼 생각입니다.

1. iframe 관련

<ion-content scroll="false"> 

         <ion-content overflow-scroll="true" style="position:fixed;" on-scroll="getScrollPosition()">

              <iframe data-tap-disabled="true" header-shrink id="mobile_web" src="{{webUrl}}" style="left:0;top:0;height:100%;width:100%;background-color:#fff;" onLoad="uploadDone()" ></iframe>

          </ion-content>

      </ion-scroll>

    

    <div class="bar bar-footer">

    </div>

  </ion-content>

  • footer에 네비게이션을 넣기 위해서 <ion-content> 태그를 중복으로 사용하였습니다.
  • iframe내의 컨텐츠에 스크롤을 위해서 overflow-scroll=true로 지정하였으며 본문만 스크롤이 되어야 하므로 부모 <ion-content>에 scroll=false로 지정을 하였습니다.
  • iOS에서 iframe내의 스크롤이 내려갈 때 헤더부분에 백그라운드 색을 변경하는 해당 이벤트는 on-scroll 지시어를 통해서 가능합니다. iOS에서 스크롤 관련된 부분(현재 높이라던가)은 $ionicScrollDelegate를 활용하시면 됩니다.
  • iframe의 backgournd-color가 ionic의 스타일 때문인지 회색 계열로 보여 흰색으로 지정하였습니다.
  • css와 관련된 설정은 아래와 같습니다.
  • .overflow-scroll {

        overflow:auto;

      -webkit-overflow-scrolling: touch;

      top: 0;

      right: 0;

      bottom: 0;

      left: 0;

      position: absolute; }

      .overflow-scroll .scroll {

        position: static;

        height: 100%;

        width: 100%;

        -webkit-transform: translate3d(0, 0, 0); }

    색으로 표시한 부분이 ionic css에서 변경한 부분입니다. iframe내의 컨텐츠에 대한 사이즈와 연관된 부분으로 가로 스크롤이 가능하게 하려면 overflow:auto로 변경해줘야 하며 다음, 네이버 모바일 화면을 넣어봤는데 일부 화면에 대한 가로 사이즈를 맞춰주려면 width: 100%줘야합니다. 다음의 경우 기사를 클릭하면 사이즈 문제가 발생하며 네이버의 경우에는 일부 화면에서 가로 사이즈가 조금 짧게 표시되는거를 제외하고는 대부분 브라우저와 동일하게 표시됩니다.

  • data-tap-disabled=true 속성은 디바이스에서 터치와 네이티브, 자바스크립트 스크롤과 관련된 부분입니다. 자세한 내용은 해당 속성으로 검색하시면 ionic 사이트에 설명되어 있습니다.

2. ThemeableBrowser(InAppBrowser) Plugin
InAppBrowser를 확장시킨 플러그인으로 inAppBrowser 화면이 너무 올드해서 해당 플러그인을 사용하였는데 iOS에서는 url을 클릭하면 별도 화면이 아닌 해당 화면으로 이동, 대체가 되어 해당 내부 코드에서 아래 부분을 수정하였습니다.

- (void)open:(CDVInvokedUrlCommand*)command

{

//        if ([target isEqualToString:kThemeableBrowserTargetSelf]) {

//            [self openInCordovaWebView:absoluteUrl withOptions:options];

//        } else if ([target isEqualToString:kThemeableBrowserTargetSystem]) {

//            [self openInSystem:absoluteUrl];

//        } else { // _blank or anything else

            [self openInThemeableBrowser:absoluteUrl withOptions:options];

//        }

 }


3. NetworkInterface Plugin

ip주소를 가져오기 위한 플러그인 입니다. 해당 플러그인은 wi-fi일 경우에는 문제가 없지만 데이터로 ip를 가져오려고 하면 문제가 발생합니다. 플러그인이 Android용과 iOS용으로 나뉘어서 네이티브 코드들을 생성합니다. iOS에서 발생한 문제입니다.

 if([[NSString stringWithUTF8String:temp_addr->ifa_nameisEqualToString:@"en0"

|| [[NSString stringWithUTF8String:temp_addr->ifa_nameisEqualToString:@"pdp_ip0"]) {

         // Get NSString from C String

         address = [NSString stringWithUTF8String:inet_ntoa(((struct sockaddr_in *)temp_addr->ifa_addr)->sin_addr)];

 } 


4. iOS 버전 관련

Android에서는 height에 %가 아닌 vh로 지정을 했었는데 iOS에서는 vh로 지정을 하면 iOS 9.0이상에서는 정상이였지만 iOS 8.0에서 헤더 부분의 투명한 처리가 되지 않는 현상도 있었습니다.


5. StatusBar Plugin

해당 플러그인을 사용하여 전체 화면을 StatusBar부분 밑으로 내려오게 하였으면 ionic _variables.scss에서 아래 부분을 수정하였습니다.

 $ios-statusbar-height:           0px !default;


현재 iframe과 관련된 부분이 모두 해결된 것은 아닙니다. 특정 화면에서 모바일 키보드가 올라오고 입력을 하면 화면이 올라 간다던지 특정 액션을 취하면 화면이 올라 간다던지 브라우저에서 나오지 않던 이상한 동작들이 생각보다 많습니다 또한 iOS에서는 4인치 이하 디바이스에서만 이상한 동작을 하는 현상도 발견되었습니다.


2015-12-23 수정

위의 현상과 관련되어 iframe의 높이와 관련된 현상이였습니다. iframe의 높이를 컨텐츠의 높이와 맞춰주기 위해서 onload이벤트에 아래 글을 참고하여 수정하시면 됩니다. 포인트는 높이에 대한 리셋이 되어야 새로운 페이지 접근 시에 스크롤이 가장 위에서 부터 시작합니다.

http://www.dyn-web.com/tutorials/iframes/height/


이번 프로젝트를 하면서 구조에 대한 중요성과 iframe은 쓰면 안된다는 확신이 생겼습니다. +_+


참고적으로 cordova ios 버전이 4.0이 얼마전에 나왔습니다. iOS UIWebView에서 WKWebView를 사용할 수 있다는 것이 핵심입니다.

http://cordova.apache.org/announcements/2015/12/08/cordova-ios-4.0.0.html



Posted by resisa
,