[WKWebView] WKWebViewConfiguration 정리

들어가며 🧐

비디오 태그가 있는 웹페이지를 웹뷰로 띄워보자. Safari 브라우저, 크롬 브라우저, 안드로이드 기기에서는 동영상이 잘 보였지만 딱 내 아이폰에서만 화면이 보이지 않았다. iOS 버전이 문제일까? 기기가 문제일까? WebRTC 문제일까? 여러 방면으로 의심해보았지만 웹뷰 설정을 바꿔야한다는 선택지를 생각하지 못했다. iOS의 웹뷰에서는 인라인 플레이백 설정을 true로 허용하지 않으면 웹페이지 안에서 전체 화면이 아닌 동영상을 보여줄 수 없다. 차라리 잘 되었다. 무심하게 복붙하여 사용해 왔던 WKWebview Configuration 를 살펴보려 한다.

본문

1. 무엇을 할 수 있을까?

A WKWebViewConfiguration object provides information about how to configure a WKWebView object. Use your configuration object to specify:

공식 문서에 따르면 Config 설정을 통해 Webview의 기능과 동작을 네이티브 단에서 통제할 수 있다.

1. The initial cookies to make available to your web content - 데이터 저장을 위해 웹에서 쓰이는 쿠키를 웹뷰에서도 동일하게 사용할 수 있다. authentication을 위해 jwt token을 cookie에 써야한다던가setCookie가 필요한 상황에서 httpCookieStore 를 사용할 수 있다.

2. Handlers for any custom URL schemes your web content uses - 미리 약속된 url 형식으로 요청이 들어올 경우 (ex. assets://test.jpg) 사전에 등록된 핸들러를 통하여 로컬의 asset을 반환하는 등 처리를 할 수 있다.

custom url로 들어오는 요청에 대한 handler 붙이기
https://dev.to/gualtierofr/custom-url-schemes-in-a-wkwebview-oak

3. Settings for how to handle media content - 웹뷰에 오디오, 비디오 등 미디어 컨텐츠가 존재할 경우 풀스크린 여부, 에어 플레이 허용 여부, 유저의 gesture에 따른 재생 여부 등을 설정할 수 있다.

4. Information about how to manage selections within the web view - 유저가 웹뷰 화면과 상호 작용할 때 그 행위의 granuality(민감도, 세분성)을 정할 수 있다.

5. Custom scripts to inject into the webpage - 이 부분이 내게는 재미있게 느껴지는데 네이티브 단에서 웹뷰에 script를 주입하거나 핸들러를 추가할 수 있다. 하이브리드 앱을 만드는 입장에서는 중요한 기능이라고 느껴진다.

6. Custom rules that determine how to render content

참고자료

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

2. 주의! 웹뷰 설정 set의 시점 📌

You create a WKWebViewConfiguration object in your code,configure its properties, 
and pass it to the initializer of your WKWebView object. 
The web view incorporates your configuration settings only at creation time; 
you cannot change those settings dynamically later.

• 분명 웹뷰 설정을 했는데 그 설정이 적용되지 않았다고 느낄 경우
• 웹뷰 생성 이전에 설정을 set하였는지 의심해볼 것
• webview config는 동적으로 수정될 수 없다.
• 웹뷰가 생성될 때 생성자에 넘긴 config 객체가 유지된다.

3.자세히 보기 [추가중]

Setting Media Playback Preferences

오디오, 비디오와 같은 멀티미디어를 재생할 수 있는 프로그램을 미디어 플레이어라고 한다. 아래의 속성들을 통해 웹뷰에서 재생되는 멀티미디어 관련 preference를 정할 수 있다.

1) allowsInlineMediaPlayback

var allowsInlineMediaPlayback: Bool { get set }

• true : HTML5 가 지원하는 비디오 플레이백을 사용 (웹페이지의 일부분에 동영상을 포함시킨다.)
• false: 네이티브가 지원하는 풀스크린 컨트롤러 사용
• 웹페이지에 동영상 컨텐츠가 존재할 경우 반드시 포함되어야 하는 속성이다.
• iphone의 기본값은 false이고 iPad 의 기본값은 true이다.

2) allowsAirPlayForMediaPlayback

var allowsAirPlayForMediaPlayback: Bool { get set }

• 애플 티비, 맥, 호환 스마트 티비 등에 스트리밍하는 것은 AirPlay라고 하고 이를 허용할 지 선택한다.
• 기본값은 true이다.

3) allowsPictureInPictureMediaPlayback

var allowsPictureInPictureMediaPlayback: Bool { get set }

• Picture in Picture 모드란 비디오 화면을 floating 시켜서 따로 동동 떠있게 만드는 것이다.
• 넷플릭스 시청 시 넷플릭스 화면을 작게 띄우고 웹 화면을 따로 띄울 수 있는 것은 picture in picture를 허용하기 때문이다.
• 유튜브 프리미엄을 결제하면 동영상 재생을 하면서 웹 화면 따로 띄울 수 있는게 해주는데 사실 이러한 설정 하나로 가능한 것이었다니 헛웃음이 나온다. 다른 대단한 기술을 접목한 것일 수도 있겠지만 모를 일이다.

4) mediaTypesRequiringUserActionForPlayback

var mediaTypesRequiringUserActionForPlayback: WKAudiovisualMediaTypes { get set }

• 미디어를 재생할 때 유저 액션이 필요한 미디어 타입을 지정한다.
• WKAudiovisualMediaTypeNone = 0 로 지정하면 유저 액션 없이 재생된다.
• WKAudiovisualMediaTypeAudio = 1 << 0 : 1을 왼쪽으로 0비트 이동, 0
• WKAudiovisualMediaTypeVideo = 1 << 1 : 1을 왼쪽으로 1비트 이동, 2
• WKAudiovisualMediaTypeAll = NSUIntegerMax : 모든 미디어 타입이 유저 액션을 필요로 한다.