What's new in WKWebView

1. Web을 띄울 수 있는 방법

SFSafariViewController

  • 앱에서 브라우저와 똑같은 사용경험을 누리고 싶을 때 사용한다.

  • 다만, 깊은 커스텀이 필요하지 않을 때! (단순 브라우저의 출력이 필요한 상황)

UIWebView

  • deprecated 될 예정으로, 앞으로는 WKWebView로 사용해야한다.

WKWebView

  • UIWebView보다 빠르고, 반응성이 좋다.

  • 웹 컨텐츠와 인터렉션해야하는 앱에서 사용하는 API

    • CSS 기반 UI 작성 가능

    • JavaScript 작성 가능

    • App bound domain을 사용해서 웹 컨텐츠와 상호작용이 가능하다.

2. WKWebView의 4가지 변화

Web content interaction

  1. Full screen의 지원

    • 브라우저에서 Java script를 이용하면, 플래시 게임이나 영상을 전체화면으로 볼 수 있다.

    • 이제는 앱으로도 해당 구현이 가능하다.

      **webView.configuration.preferences.isElementFullscreenEnabled = true**

webView.loadingHTMLString("""
<script>
		button.addEventListener('click', () => {
			canvas.webkitRequestFullscreen()
		}, false);
</script>
""", baseURL: nil)

let observation = webView.observe(\.fullscreenstate.options:[.new]) {object, change in
	print("fullscreenState: \(object.fullscreenState)")

  2. CSS viewport unit

    • css는 동적 viewport의 크기에 따라 웹 컨텐츠의 레이아웃을 조절해준다.

    • css unit 종류

      • svh, lvh, dvh, svw, lvw, dvw, vi, svi, lvi, dvi, vb, svb, dvb, svmin, lvmin, dvmin, svmax, lvmax, dvmax

      웹 개발자들은 해당 unit을 이용해서 최소, 최대 동적 viewport의 크기를 기초로, 레이아웃을 조절할 수 있다.

      • svg, lvh, dvh는 viewport의 다양한 크기를 측정하는 유용한 유닛을 제공한다.

      사파리에서 페이지를 열면, 웹 페이지 호스트와 하단 버튼이 보인다. 화면을 스크롤하면, 버튼이 밑으로 사라지면서 view port의 크기가 커진다.

    • Swift에서 적용 방법

      // CSS viewport unit range inputs

let minimum = UIEdgeInsets(top: 0, left: 0, bottom: 30, right: 0)
let maximum = UIEdgeInsets(top: 0, left: 0, bottom: 200, right: 0)
webView.setMinimumViewportInset(minimum, maximumViewportInset: maximum)

  3. Find interactions

    • 상호작용 검색기능의 도입

    • WKWebView는 텍스트 출력창이 많기 때문에, 사용자는 주로 특정 텍스트를 검색하는 행위를 수행한다.

      (find Interection의 UIFindInterection 객체에 액세스하여 검색 패널을 표시하거나 숨기고 이전 혹은 다음 결과로 이동할 수도 있다. )

      // 검색 기능을 사용 여부
webView.findInteractionEnabled = true

// text 검색 UI 및 Command+F 등의 단축키 사용을 위한 코드
if let interaction = webView.findInteraction {
	interaction.presentFindNavigator(showingReplace: false)
}

Content blocking

  • WKContentRuleList에 Content blocking이라는 기능이 추가되었다. (Safari 컨텐츠 차단기를 위해 사용하는 API)

  • 상황 (ifame에 위키피디아가 포함된 상황) → 위키디피아의 이미지만 block 시킬 수 있음

    let json = """
[{
		"action": {"type": "block"},
		"trigger": {
				"resource-type": ["image"],
				"url-filter": ".*",
				"if-frame-url": ["https?://([^/]*\\\\.)wikidepia.org/"]
		}
}]
"""

// 정규식과 일치하는 프레임의 요청에만 적용된다.
WKContentRuleListStore.default().compileContentRuleList(forIdentifier: "example_blocker", encodedContentRulList: json) {list, error in
	guard let list = list else { return }
	let configuration = WKWebViewConfiguration()
	configuration.userContentControllerdelegate

Encrypted media

  • iPad OS 16.0에서의 새로운 기능

  • 암호화 미디어 확장 프로그램, 미디어 소스 확장 프로그램 APi를 사용하는 컨텐츠가 있을 때 사용할 수 있다.

    • Apple TV+와 같은 프리미엄 컨텐츠도, 기존 MacOS처럼 잘 구동된다.

  • 타사 브라우저 WebInspector 활성화 절차도 Safari 활성화 단계와 동일하다.

Remote WebInspector

  • Web inspector에는 웹 컨텐츠 디버깅을 위한 다양한 도구가 존재한다.

    • Dom 확인

    • Java script 실행 디버깅

    • 페이징 로딩 타임라인 확인

  • 웹 사이트의 소유자라면, iOS 상 타사 브라우저에서 원격 Web inspector를 실행시켜 직접 감시 및 디버깅도 진행 가능하다.

PreviousSafari & WebNextSwift

Last updated