AppHybrid

Hybrid App 로컬 환경 셋팅

[KSOP App] 하이브리드 앱 셋팅

네이티브 앱 개발

  • Ios: Swift 웹뷰
  • Android: Kotlin 웹뷰
  • SSL
  • 네이티브 <-> 자바스크립트 연동
  • 커스텀 유저 에이전트

테스트 구현은 네이티브 웹뷰가 아닌 다른 언어의 크로스 플랫폼 프레임워크의 flutter 웹뷰와 연동하여 목업 테스트한 결과를 바탕으로 작성되었기에 네이티브단에서 제공하는 웹뷰와 다소 차이가 있을 수 있음.

![ 로컬환경 ] 개발 시 네이티브 개발 요청 체크 리스트

  1. 로컬서버 환경 셋팅 접속 가능한 아이폰, 안드로이드 환경 필요
  • 플랫폼팀에서 url 입력 가능하게 입력 컨트롤 UI 노출 (입력 컨트롤 값으로 웹뷰 url 로드) 해서 전달해준다고 협의
  • 아이폰/안드로이드 디바이스 시뮬레이터에서 host 셋팅한 도메인 접근 확인 필요 (웹뷰 url 접근 시 hosts 정의한 도메인 붙을 수 있는지…)
아이폰 시뮬레이터 안드로이드 시뮬레이터
로컬 host 접근 가능 로컬 host 접근 불가
  • 아이폰 시뮬레이터: 별도의 hosts 셋팅이 필요 없이 접근 가능.
  • 안드로이드 시뮬레이터: 아래와 같이 별도의 hosts 셋팅 필요함.
    • 참고: How to edit android emulator hosts file (안드로이드 에뮬레이터 호스트 파일 수정)
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      1. AndroidSDK 내에 tools 폴더로 이동 후 아래 커맨드 입력 (KSOP는 Avd 설정의 Adv Name)
         a. ./emulator -avd KSOP -writable-system
      2. platform-tools 폴더로 이동 후 ./adb devices 커맨드 입력 해 emulator 이름 확인 후
         예)
         List of devices attached
         emulator-5554 offline
         emulator-5556 device
      3. ./adb -s emulator-5556 remount
      4. ./adb -s emulator-5556 pull ./system/etc/hosts pull 받을폴더위치 받은 hosts 수정
         예)
         127.0.0.1 localhost
         10.0.2.2 tapp.ksop.net // 추가 (아이피 변경 x)
      5. ./adb -s emulator-5556 push C:\Android\hosts ./system/etc/hosts // 호스트 파일 push
  1. 네이티브단 제스처 활성화 시 웹뷰에서 띄어질 웹사이트 body 스크롤 인식 할 수 있는 별도 옵션이 별도로 있다면 해제
  2. 네이티브단 웹뷰 설정에 SSL 해제 옵션이 별도로 있는 경우 옵션 해제 (SSL 인증 무효화)
    • 네이티브 웹뷰안에 띄어질 웹사이트는 보안 프로토콜 + 도메인 기반으로 셋팅 되어 있음.
  3. [ios] 경우 xcode > 빌드 시 info.plist 옵션 활성화
    1
    2
    3
    4
    5
    6
    7
    8
    <dict>
       ...
       <key>NSAppTransportSecurity</key>
       <dict>
          <key>NSAllowsArbitraryLoads</key>
          <true/>
       </dict>
    </dict>
  4. [ios] Swift 네이티브인 경우
    • SafeArea 설정 활성화 필요
    • UIDelegate 연동 활성화 필요
  5. 휴대폰 본인인증 페이지 경우 도메인이 PG4쪽 이기 때문에 이전페이지로 이동할 수 있는 기능이 없는 이슈
    • 안드로이드는 물리 백버튼이 있어서 가능하나 아이폰은 물리 버튼이 없어 이동 불가
    • 플랫폼팀에서 네이티브 제스처 기능으로 대체하기로 협의
    • 단, 웹뷰 안에 웹사이트에서 스와이프 기능이 있을 시 네이티브단 제스처 기능과 충돌하는지 확인 필요.
      • i. 1 번째 방안:
        • 네이티브 웹뷰와 웹사이트에서 자바스크립트 연동 기능으로 네이티브단 제스처 충돌 방지 처리
      • ii. 2 번째 방안:
        • 네이티브 제스처가 헤더 UI 노출
        • 웹뷰 안에 웹사이트 백버튼 ui는 삭제 검토
      • iii. 3 번째 방안: (권장)
        • 네이티브 헤더 UI 를 동적으로 PG4 도메인일 경우에만 판단해서 노출
    • 확인결과 : 이슈없음 (네이티브단 제스처 기능 충돌 안함)
      1
      2
      3
      4
      5
      6
      // 웹뷰안에 웹사이트 페이지 이동 후 로드 완료 시점 이벤트 판단 후...
      if (url.toString().startsWith('https://auth.mobilians.co.kr/')) {
        // 네이티브 헤더 UI 노출
      } else {
        // 네이티브 헤더 UI 숨김
      }
  6. 네이티브쪽과 웹뷰안에 웹 사이트 페이지 자바스크립트 연동 API 가이드 문서 필요
    • 유니티 웹뷰가 아니라 스위프트/코틀린 네이티브 웹뷰라 제공받을 API 가 다름.
    • 프론트단에서 디바이스 구분해서 분기처리 호출 해야함. (Adapter Layer 에서 처리)
    • API 문서:
      • 네이티브 앱 <-> 자바스크립트 연동 가이드
      • FCM 토큰 가져오기 API (아이폰의 경우 시뮬레이터환경에서는 확인 불가능)
        • 프론트개발 시 실제 디바이스에서 웹뷰 진입 시점인 create 에서 바로 FCM 토큰 가져오기를 호출하면 값을 인식 못하는 이슈가 존재하므로 요청 시점을 mounted 시점에서 사용해야 한다.
  7. 네이티브쪽에서 웹뷰쪽에 유저에이전트 특정 커스텀 값 전달 필요
    • (모바일웹으로 들어온 유저인지 인앱 으로 들어온 유저인지 판별 및 기타 사용)
    • 유저에이전트 커스텀 문자
  8. 안드로이드의 경우 웹뷰 개발 시 쿠키 동기화 셋팅 필수
  9. 웹뷰에서 링크 target=”_blank”, 자바스크립트 window.open 새창 열림 기능 사용하려면 네이티브단 활성화 필요
  • Swift 네이티브: Delegate 연동 활성화 필요
  • Kotlin 네이티브: 연동 활성화 필요

[FCM 토큰 갱신 케이스]

  • 앱이 Instance ID 를 삭제할때
  • 앱이 새 기기에서 복구될때
  • 유저가 앱을 지우거나/다시 설치할때
  • 유저가 앱 데이터를 초기화할때

FCM 푸시는 아이폰, 안드로이드 둘 다 백그라운드 상태에서만 동작한다고 함.

공유하기