What's new in WKWebView

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.

Resources

Related Videos

WWDC22

What's new in Safari and WebKit

Download

♪ instrumental hip hop music ♪ ♪ Hello, and welcome to "What's new in WKWebView" I'm Alex Christensen, an engineer on the WebKit team. We've been busy, and we've added a lot of new web technology for you to use in your apps this year. Before we start, though, let's make sure you are using the right technology for your application. If you want a browser-like experience inside your app, and don't need deep customization, you'll definitely want to use SFSafariViewController. If your app still uses the deprecated UIWebView, now is the time to migrate to the faster and more responsive WKWebView. UIWebView will be removed in a future release. WKWebView is the API to use to write an application that interacts with web content. You could be using it for CSS-based UI or writing some of your app in JavaScript. You might be interacting with your own web content using app-bound domains. You may also be developing your own browser. Whatever your application is, we are constantly adding new capabilities to allow you to make richer web applications. The new features available to WKWebView this year come in four categories: new ways to interact with web content, new capabilities for content blockers, encrypted media, and use of Remote Web Inspector. First, we're going to cover new APIs for interacting with web content. There are three new ways your app can interact with web content in iOS 16: using the full-screen API, using new CSS viewport units, and using find interactions. Let's get started with full screen. For many years now, JavaScript has been able to make HTML elements, like videos or canvas games, full screen in browsers, and now they can do that in your apps too. Here's what a simple example looks like on a phone. JavaScript can request full screen, then the user or JavaScript can exit full screen. All you need to do in your app is set WKPreferences .isElementFullscreenEnabled to true and load web content that uses full-screen APIs like webkitRequestFullscreen. It works pretty well out of the box, but if you'd like to customize the transitions in your app, you can observe the value of WKWebView.fullscreenState, which will let your app know when the web content is becoming full screen or returning. And that's all there is to using WebKit's full-screen APIs in your app.

We also have new CSS units to allow web content to lay out according to dynamic viewport sizes. These new CSS units include svh, lvh, dvh, and many others. They allow web developers to modify layout based on the smallest, largest, and dynamic viewport sizes. Let's take a look at what Safari does to get an idea of how this can be used in your app. When you first open a page in Safari, you see the webpage host and some buttons at the bottom. As you scroll, the viewport increases in size when the buttons slide out of the way. Svh, lvh, and dvh provide useful units to measure these different sizes of the viewport. If your app changes the viewport of your WKWebView, then you should inform WebKit up front what the viewport size ranges are. In Swift, one function call informs WebKit of the maximum and minimum edge insets to allow this web content to lay out correctly in your app. We are also introducing support for Find interactions in WKWebView in iOS 16. Many WKWebView applications load lots of text, and users want to search this text. If you set WKWebView .findInteractionEnabled to true, then your users will be able to use familiar UI and shortcuts like Command-F to search the text on the open page. That one line of code is all you need to turn on the feature, but you can also access the UIFindInteraction object through WKWebView .findInteraction to do things like present and dismiss the Find panel, or move to the next or previous results programmatically. Try it out and see what it can do in your app. For content blocking, we added a new capability to WKContentRuleList, the API used to implement content blockers in Safari. Here, we have Wikipedia embedded in an iframe on an example site. Previously, you could run regular expressions on the URL being requested and the top-frame URL, to decide whether to block a load or perform other actions. Sometimes, though, what you really wanted was for a certain rule to apply only to loads inside certain iframes. Now you can run regular expressions on the URL of the current frame. We are going to write a rule to block images but only from frames containing Wikipedia. To do this, we add if-frame-url to the JSON like this. You then compile the JSON as you have before and apply it to a WKWebViewConfiguration. The regular expression then runs on the URL of the frame that is making the request. This blocking rule will now only apply to requests from frames that match the if-frame-url regular expression. Here we see that it has blocked the image loads inside the Wikipedia iframe. If you're serious about implementing content blockers, you should check out the WWDC session about Safari Extensions which includes some new possibilities in declarativeNetRequest. Another new capability in WKWebView in iPadOS 16 is encrypted media. If you have content that uses the Encrypted Media Extensions and Media Source Extensions APIs, you can now use it in your apps on iPadOS. This means that if you have premium content like AppleTV+, it will work on iPadOS like it has in macOS. If your app has the web-browser entitlement, then Remote Web Inspector will just work with your production app like it has on Safari on iOS; no need to add or change any code. To enable Web Inspector in third-party browsers, the process is the same as with Safari. You'll first need to turn on Web Inspector in Safari settings on the iOS device, then enable the Develop menu in Advanced Settings in Safari on your Mac. Attach your phone to the Mac and look for your device in Safari's Develop menu on macOS. Web Inspector has many tools for debugging web content. You can explore the DOM, run and debug JavaScript execution, view timelines of your page-loading, and more. If you have a website, you can now inspect and debug it yourself in third-party browsers on iOS, using Remote Web Inspector. Those are the main new API additions to WKWebView this year. Try them out and see what they can do in your apps. Remember to use the best APIs for your application, and if there's something you're unable to do with WKWebView, please file a feature request using Feedback Assistant. We read the feature requests we get and prioritize our development based on your input. Don't forget to check out "What's new in Safari Web Extensions”, and for more additions to the web platform, remember to check out "What's new in Safari and WebKit”. Thanks for watching, and enjoy the rest of WWDC. ♪ ♪

2:26 - Fullscreen API support

webView.configuration.preferences.isElementFullscreenEnabled = true

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

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

3:50 - 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)

4:17 - Using UIFindInteraction with WKWebView

webView.findInteractionEnabled = true

if let interaction = webView.findInteraction {
  interaction.presentFindNavigator(showingReplace:false)
}

5:46 - WKContentRuleList if-frame-url

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)
}

Looking for something specific? Enter a topic above and jump straight to the good stuff.