[iOS - swift] 1. WKWebView 개념 (UIWebView, AJAX, XHR, 캐시, 쿠키)

1. WKWebView 개념 (UIWebView, AJAX, XHR, 캐시, 쿠키)

2. WKWebView 사용 방법 (쿠키, WKScriptMessageHandler, WKNavigationDelegate, WKUIDelegate)

WKWebView가 나온 배경

• iOS 8 아래 버전에서는 UIWebView를 사용했지만 deprecated되었고 WKWebView를 사용하게끔 애플에서 정의
  • UIWebView는 iOS 2부터 도입, WKWebView는 iOS 8부터 도입

• WKWebView가 개발된 이유는 HTML의 컨텐츠를 표출하기 위해서 탄생

WKWebView와 UIWebView의 차이점

	UIWebView	WKWebView
프레임워크 의존성	UIKit프레임워크의 일부	WebKit이라는 프레임워크의 일부
웹 페이즈 로드 시 메모리 오버헤드	높음	적음
iOS지원 버전	iOS 8 미만	iOS 8+
IndexedDB	존재 x	존재 o * IndexedDB: key-value쌍으로 데이터 관리에 이용
개체 렌더링 수	약 3,500개	약 8,500개 (성능 우수)
1개체 렌더링 당 CPU 효율	90% 사용	25% 사용
로컬 파일 로드 가능 여부	가능	불가능
쿠기 저장	HTTPCookieStorage에 쿠기가 저장되어 공통으로 관리 (다음 로드 시간은 이전 시간보다 짧은 장점)	웹뷰에서 독립적으로 쿠키 관리 (HTTPCookieStorage에서 WKWebView로 쿠키가 전달되지 않는점 주의)
메모리 사용 방식	webView를 앱 사용공간의 일부로 보고 동작 -> 오버헤드 시 OS는 해당 앱을 종료하려 동작 (리로드 요청을 보내기도 하지만 앱 중단 발생)	webView를 앱 별도의 메모리 공간으로 사용 -> 오버헤드 시 OS는 해당 앱에 알림 전송 (페이지 리로드 요청)
자바 스크립트 엔진	-	Nitro (우수, safari에서 사용하는 것과 동일)
처리 방식	-	비동기적 처리 (UIWebView보다 더 빠른 속도)
auth token 인증 방식	지원 x	지원 o
보안 인증서 처리	x	계속 / 호출 팝업 존재하여 보안 인증서 오류 프로세스 건너뛰기 가능

WKWebView를 이해하는데 필요한 기본 지식

• AJAX(Asynchronous Javascript And XML): Javascript를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
  • 비동기 방식: AJAX로 호출한 동안 웹 페이지가 멈추어 있지 않게 하기 위함
• 브라우저가 가지고 있는 XHR 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 형식 
  • XHR (XMLHttpRequest): AJAX요청을 생성하는 Javascript API, XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있는 request 형식 
• 캐시(cache) vs 쿠키(cookie)

	Cache	Cookie
사용	웹 사이트 콘텐츠 저장 (그림 파일, 문서 파일 큰 파일 저장)	사용자 선택 저장 (웹 서버에서 PC로 보내는 작은 파일 저장)
저장 범위	브라우저에만 저장	서버와 브라우저에 모두 저장
만료	수동으로 만료	자동으로 만료
용량	많은 공간 차지	적은 공간 차지
유형	브라우저 캐시, 프록시 캐시	일시적 및 영구 쿠키
콘텐츠	html 페이지, 이미지, javascript, css	브라우징 세션, 임시 추적 데이터
사용자에 요청	요청 x	요청 o

WKWebView의 단점

• 앱이 종료될 경우, HTML5 로컬 저장소가 삭제
• UIWebView는 쿠키가 HTTPCookieStorage에 저장되어 공통으로 관리되지만, WKWebView는 웹뷰에서 독립적으로 쿠키가 관리되므로 쿠키를 직접 전달해야 하는 단점 존재

/// HTTPCookie 객체 생성
guard let authCookie = HTTPCookie(properties: [
    .domain: sampleWebBaseDomain,
    .path: sampleWebCookiePath,
    .name: authTokenCookieName,
    .value: accessToken,
    .secure: "TRUE",
]) else { return }

/// 웹뷰에 쿠키 저장
webView.configuration.websiteDataStore.httpCookieStore.setCookie(cookie)

* 출처

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

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

- UIWebView vs WKWebView1: https://medium.com/@kevin.baldha/difference-between-uiwebview-and-wkwebviewapple-6f8b75819a18

- UIWebView vs WKWebView2: https://support.kioskgroup.com/article/840-wkwebview-supported-features-known-issues#local-ajax-requests

- UIWebView vs WKWebView3: https://stackoverflow.com/questions/31625522/uiwebview-or-wkwebkit-for-javascript

- AJAX: https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

- XHR: https://developer.mozilla.org/ko/docs/Glossary/XHR_(XMLHttpRequest)

- 캐시와 쿠키의 차이: https://www.geeksforgeeks.org/difference-between-cache-and-cookies/