What's new in WKWebView
Description: Explore the latest updates to WKWebView, our framework for incorporating web content into your app’s interface. We’ll show you how to use the JavaScript fullscreen API, explore CSS viewport units, and learn more about find interactions. We’ll also take you through refinements to content blocking controls, embedding encrypted media, and using the Web Inspector.
Web content interaction
Three new ways to interact with the web content in iOS 16:
- Fullscreen API
- CSS viewport units
- Find Interactions
Fullscreen API
- JavaScript has been able to make HTML elements, like videos or canvas games, full screen in browsers, now they can do that in your apps too
webView.configuration.preferences.isElementFullscreenEnabled = true
webView.loadHTMLString("""
<script>
button.addEventListener('click', () => {
canvas.webkitRequestFullscreen()
}, false);
</script>
…
""", baseURL:nil)
// 👇🏻 use this if you want to customize the full screen transactions in your app
let observation = webView.observe(\.fullscreenState, options: [.new]) { object, change in
print("fullscreenState: \(object.fullscreenState)")
}
CSS viewport units
New viewport units support:
svw
,lvw
,dvw
- smallest/largest/dynamic view port widthsvh
,lvh
,dvh
- smallest/largest/dynamic view port heightsvb
,lvb
,dvb
- blocksvi
,lvi
,dvi
- inlinesvmin
,lvmin
,dvmin
svmax
,lvmax
,dvmax
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)
Find interaction
- Find/replace support
Using UIFindInteraction
with WKWebView
:
webView.findInteractionEnabled = true
if let interaction = webView.findInteraction {
interaction.presentFindNavigator(showingReplace: false)
}
Content blocking
- new capability to
WKContentRuleList
, the API used to implement content blockers in Safari - you can run regular expressions on the URL of the current frame
Example: rule to block images only from frames containing Wikipedia:
let json = """
[{
"action":{"type":"block"},
"trigger":{
"resource-type":["image"],
"url-filter":".*",
"if-frame-url":["https?://([^/]*\\\\.)wikipedia.org/"]
}
}]
"""
WKContentRuleListStore.default().compileContentRuleList(forIdentifier: "example_blocker",
encodedContentRuleList: json) { list, error in
guard let list = list else { return }
let configuration = WKWebViewConfiguration()
configuration.userContentController.add(list)
}
Encrypted media
- supported on iPadOS 16
Remote Web Inspector
- now supported