IOS - UIWebView와 WKWebView

IOS에서 사용하는 웹뷰인 UIWebView와 WKWebView에 대해서 정리해봅니다.

 

IOS - UIWebView와 WKWebView

 

당연히 정리하는 이유는 최근 애플에서 관련 메일을 받아서라고 할까요? 아마 저와 같은 메일을 받아보신 분들이 꽤 될수도 있으리라 생각되고, 아니면 그냥 UIWebView와 WKWebview에 대해 궁금하신 분들이 있을수도 있을것 같습니다. 

 

Dear Developer,

We identified one or more issues with a recent delivery for your app, **************

Your delivery was successful, but you may wish to correct the following issues in your next delivery:ITMS-90809: Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs . See https://developer.apple.com/documentation/uikit/uiwebview for more information.After you’ve corrected the issues, you can use Xcode or Application Loader to upload a new binary to App Store Connect.

Best regards,
The App Store Team

 

사실 이 메세지를 받기 전에는 그냥 WKWebview는 비교적 최근( IOS 8 )에 나온 웹뷰라 속도가 빠르지만 몇가지 제약이 있다는 것 정도를 기억하고 있는데 다 였습니다.

 

하지만 이렇게 WKWebview로 전환을 필수적으로 해야 하므로 먼저 UIWebview와 WKWebview에 대해 하나씩 정리해보고 차이점에 대해서도 정리해보겠습니다. 

 

---

목차

---

1. UIWebView

 

UIWebview는 IOS 2 버전부터 생긴 UIKit의 웹뷰 클래스입니다. 

 

Note

In apps that run in iOS 8 and later, use the WKWebView class instead of using UIWebView. Additionally, consider setting the WKPreferences property javaScriptEnabled to false if you render files that are not supposed to run JavaScript.

애플에서는 ios 8 미만의 버전에서는 WKWebView를 사용할수 없으니 그때는 UIWebView를 사용하라고 명시하고 있습니다. 

 

---

2. WKWebView

 

IOS 8버전때부터 도입된 WebKit 프레임워크에 속한 웹뷰입니다. 비교적 최신(?) 나온 웹뷰이며 속도가 빠르지만 몇가지 제약이 발생합니다. 

 

2.1 장점

 

2.1.1 앱 별도 프로세스로 실행

  앱 주 메인 프로세스에서 실행하지 않고 WKWebView에 별도 메모리를 할당하여 쓰레드를 분리하므로 WKWebView가 중단되더라도 앱이 중단되지는 않습니다.

 

2.2.2 빠른 자바스크립트 엔진 Nitro 사용

  모바일 사파리에서도 사용하는 자바스크립트 Nitro를 사용해서 이전 버전인 UIWebView보다 성능이 크게 빠릅니다. ( 2배 ? )

 

2.2.3 자바스크립트 비동기 실행

  - 자바스크립트와 네이티브 코드간의 통신을 비동기로 처리하므로 더 빨리 실행되며 웹뷰의 쓰레드 차단도 일어나지 않습니다. 

 

var filenameID;
function getFilenameID() {
	window.kp_requestKioskId("kp_requestKioskId_callback");
}
function kp_requestKioskId_callback(kioskId) {
	filenameID = kioskId.split(" ").join("");
	kp_FileAPI_writeToFile(filenameID + ".xls", data, "writeFile_callback");
}
function saveData(fileName, data) {
	getFilenameID();
}

 

 

2.2.4 특정 터치 지연 제거

  UIWebView는 싱글 클릭인지 더블 클릭인지 파악하기 위해서 최초 터치 이벤트 후 300ms의 지연을 추가한다고 합니다. 반면에 WKWebView는 125ms 의 지연만을 추가하면서 처리한다고 합니다. 

 

2.2.5 서버 인증 문제 지원

 WKWebView를 사용할 때 암호로 보호 된 웹 사이트의 사이트 자격 증명을 입력 할 수 있습니다

 

2.2.6 사설 인증서 및 오류 인증 지원

  WKWebView를 사용하면 '계속'/ '취소'팝업을 통해 보안 인증서 (예 : 자체 서명 인증서 또는 만료 된 인증서를 사용하는 경우)의 오류를 무시할 수 있습니다.

 

2.2.7 고효율, 고성능 WKWebView

 

WKWebView는 약 8500 개의 개체를 렌더링하지만 UIWebView는 약 3500 개의 개체를 렌더링하며 WKWebView의 성능은 UIWebView와 비교하여 두 배이다. WKWebView는 25% CPU를 사용하여 같은 수의 입자(particles)를 렌더링하지만 UIWebView는 동일한 작업에 대해 90% CPU를 사용합니다.

 

2.2.8 IndexedDB, ObjectStore ,ArrayBuffer추가기능

 

WKWebView에는 IndexedDB 및 ObjectStore ArrayBuffer와 같은 UIWebView보다 몇 가지 추가 지원 기능

---

2.2 이슈

2.2.1 IOS 9 이상 필요

IOS8에 도입되긴 했지만 로컬 파일에 접근할수 없는 이슈가 있고, 이전 버전과 호환되지 않는 이슈를 해결할수 없어서 IOS8 이하는 UIWebView를 이용해야 합니다. 

 

2.2.2 로컬 파일에 ajax를 요청할 수 없음

로컬 파일을 통해 서비스를 구현한 경우 로컬 파일에 ajax를 날릴수가 있는데 WKWebView는 XHR 요청이 file:// URI에 대한 URL을 허용하지 않습니다. 이는 URL이 브라우저 엔진의 교차 출처 자원 공유 규칙을 위반 (CORS) 하기 때문입니다. 이 유형의 요청을 사용하는 프로젝트는 서버에서 원격으로 호스팅되거나 기존 UIWebView 브라우징 엔진을 사용해야합니다.

 

2.2.3 쿠키 수락 설정 불가

  WKWebView는 쿠키 사용을 지원하지만 소스에서 어떤 쿠키를 허용할지 선택하는 기능은 노출하지 않습니다. 이는 WKWebView 브라우징 엔진을 사용할 때 '쿠키 허용'설정이 적용되지 않음을 의미합니다.

WKWebView를 사용하면 생성 / 만료 날짜 또는 경로와 같은 추가 정보가 아닌 쿠키 이름에만 액세스 할 수 있으므로 쿠키 문제가 발생하면이를 해결하기가 더 어려워집니다.

 

2.2.4 고급 캐시 설정 사용 불가

WKWebView 브라우징 엔진을 사용할 때는 '캐시 소스'및 '서버 리디렉션 이벤트의 브라우저에만 알림 브라우저'가 적용되지 않습니다.

 

2.2.5 앱을 종료하면 HTML5 LocalStorage 가 삭제됨

---

2.3 아파치 코르도바 ios 웹뷰의 미래

 

코르도바 UIWebview에서 WKWebview로 이전하는 경우 아래 제한 사항들을 해결해야 합니다. 별도의 플러그인 사용과 테스트, 확인해야 하는 문제가 있기도 하고, 아예 지원이 되지 않는 부분이 있으므로 충분히 검토해야할 듯 보입니다. 

 

1. 쿠키가 지속되지 않습니다. 이것은 WebKit 버그이지만 누군가가 해결책을위한 플러그인을 만들었습니다. CB-12074 참조
2. 쿠키를 삭제할 수 없습니다. 이것은 WebKit 버그 (2015)이므로 iOS 11/12를 테스트해야합니다. CB-11297 참조
3. 백그라운드에서 JavaScript 코드를 실행할 수 없습니다. 이와 관련된 몇 가지 문제가 있습니다. CB-12815 참조
4. CORS (Cross-Origin Resource Sharing) 문제로 인해 XmlHttpRequests가 작동하지 않습니다. Oracle (UPL 라이센스, Apache-2.0 호환)에서 생성 한 임시 해결책 플러그인이 있습니다. CB-10143 참조
5. UIWebView에서 localStorage의 마이그레이션. 사용 가능한 마이그레이션 플러그인이 있습니다. CB-11974 참조
6. iframe은 더 이상 지원되지 않으며 (WKWebView에서 CORS가 제한됨) 부분적으로 또는 완전히 손상 될 수 있습니다. 이로 인해 다른 Cordova 플랫폼에서 동일한 코드와 호환되지 않을 수 있습니다.
7. iOS 11 이전의 WKWebView 관련 알려진 문제로 향후 Cordova 릴리스에서 더 이상 사용되지 않고 제거 될 예정입니다.

 

---

3. UIWebView와 WKWebView 구분 코드

 

웹뷰에서 판단을 해서 분기를 쳐야 한다면 navigator.userAgent에 safari가 있는지 여부로 UIWebView인지 WKWebView인지 판단할 수 있습니다. 

 

function inAppCheckUiwebview(){
    var isInApp = navigator.userAgent.match(/ipod|iphone|ipad/i) && navigator.userAgent.indexOf('Safari') === -1,
        inAppUiwebview = false;
    if(isInApp){
        try {
            inAppUiwebview = window.webkit.messageHandlers===undefined?true:false;
        } catch(err) {
            inAppUiwebview = true;
        }
    }
    return inAppUiwebview;
}

 

---

4. 참고자료

 

 

https://zeddios.tistory.com/332

iOS ) UIWebView와 WKWebView의 차이

https://developer.apple.com/documentation/webkit/wkwebview

WKWebView - WebKit | Apple Developer Documentation

https://developer.apple.com/documentation/uikit/uiwebview

UIWebView - UIKit | Apple Developer Documentation

https://cordova.apache.org/news/2018/08/01/future-cordova-ios-webview.html

Breaking changes coming to the iOS WebView in Apache Cordova - Apache Cordova

https://issues.apache.org/jira/issues/?jql=project%20%3D%20CB%20AND%20resolution%20%3D%20Unresolved%20AND%20component%20%3D%20cordova-plugin-wkwebview-engine%20ORDER%20BY%20updated%20DESC%2C%20priority%20DESC

Issue Navigator - ASF JIRA

---

IOS 개발자가 아니더라도 여러가지 앱 운영을 하는 입장에서 이런 이슈가 발생할때 최소한의 정보를 찾아보고 리스크에 대응할 수 있도록 준비해야겠습니다. - 이상.