What's new in WKWebView

Highlight

WKWebView adds full-screen elements, dynamic viewport ranges, page lookups, iframe-level content blocking, iPad encrypted media playback, and remote inspection capabilities for production environments with web-browser entitlement in iOS 16 and iPadOS 16.

---

Core Content

Many apps use web pages as part of their interface. It may be a UI written in CSS, a business page written in JavaScript, or a complete browser. WKWebView is the bridge between such apps and web content.

This session first gives the boundary: if you just want to put a page in the App that is close to the browser, and do not need deep customization, you should give priority to it.SFSafariViewController. If the project is still using the abandonedUIWebView, now migrating to a faster, more responsiveWKWebView,becauseUIWebViewWill be removed in future versions.

The changes in iOS 16 and iPadOS 16 focus on six things. The first three things improve the interaction between apps and pages: JavaScript can make HTML elements full screen, web pages can be typed according to minimum, maximum, and dynamic viewport sizes, and users can search page text using a familiar search UI. The fourth piece allows content blocking rules to see the URL of the current iframe. The last two pieces cover media and debugging: WKWebView for iPadOS supports Encrypted Media Extensions and Media Source Extensions, withweb-browserEntitlement apps can use Safari Remote Web Inspector to debug production environment web pages.

These capabilities all serve the same scenario: Apps are no longer just “embedded in web pages”, but also allow web pages to participate in full-screen, layout, search, filtering, playback and debugging processes like native interfaces.

Detailed Content

Let the web element enter full screen

(02:26) The common full-screen API in browsers comes to WKWebView. HTML elements such as videos or canvas games can be requested to go full screen by JavaScript. The App side needs to be opened firstWKPreferences.isElementFullscreenEnabled。

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

Key points:

• isElementFullscreenEnabled = true: Allow elements in the page to use the full-screen API. -button.addEventListener('click', ...): Example of binding a full-screen request to a user click event. -canvas.webkitRequestFullscreen(): The canvas element in the page requests to enter full screen. -webView.observe(\.fullscreenState, ...): App observes the full-screen status change of WKWebView. -print("fullscreenState: ..."): State changes can drive custom transition animations or interface synchronization.

If your app has a video player, WebGL canvas, remote desktop, or game interface, this switch can reduce the handwriting bridge between the native layer and the web layer.

Tell WebKit the dynamic viewport range in advance

(03:50) iOS 16 supportsvh、lvh、dvhetc. CSS viewport units. They correspond to smaller, larger, and dynamically changing viewport heights respectively. These units are prepared for this layout when the Safari bottom toolbar is displayed and collapsed, and the available height of the page changes.

In the WKWebView scenario, if the App itself will change the visible range of WebView, it must tell WebKit the upper and lower limits of this range in advance.

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)

Key points:

• minimum: Declares the smallest viewport inset that the page can encounter. -maximum: Declare the maximum viewport inset that the page can encounter. -bottom: 30andbottom: 200: The example uses bottom inset to express the height difference when the bottom control is collapsed and expanded. -setMinimumViewportInset: Pass the range to WebKit so that the dynamic viewport units in the page have correct input.

Scenarios suitable for this API include: readers with collapsed bottom toolbars, custom browsers, and Web App containers with draggable control panels.

Add system search UI to WKWebView

(04:17) Many WKWebView Apps load long text. Users will naturally press Command-F or look for the in-page search entry. WKWebView in iOS 16 supports Find interactions, and the App only needs to open a property.

webView.findInteractionEnabled = true

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

Key points:

• findInteractionEnabled = true: Enable WKWebView’s lookup interaction. -webView.findInteraction: Get the bottom layerUIFindInteractionobject. -presentFindNavigator(showingReplace:false): The app automatically displays the search panel. -showingReplace:false: The example only opens the search and does not display the replacement interface.

Once open, users can search the current page using the familiar UI and Command-F shortcut. App can also passUIFindInteractionDisplay and close the search panel, or programmatically control the result jump.

Only block requests in specific iframes

（05:46）WKContentRuleListIt turns out that matching can be done based on the request URL and the top-frame URL. The problem arises with embedded content: there may be multiple iframes on the same page, and developers sometimes only want the rules to apply within a certain iframe.

New in iOS 16if-frame-url. Rules can match the current frame URL from which the request was made. The example in the video is to embed a Wikipedia iframe in the sample page, and then block only the images in the Wikipedia frame.

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

Key points:

• "action":{"type":"block"}: Prevent resource loading after the rule is hit. -"resource-type":["image"]: The rule only applies to image resources. -"url-filter":".*": The request URL itself matches all. -"if-frame-url": Add a new condition to restrict the rule to only take effect in the matching frame. -wikipedia.orgRegex: The example limits the rule to the Wikipedia iframe. -compileContentRuleList: Compile JSON toWKContentRuleList。
• configuration.userContentController.add(list): Install the rules to the WKWebView configuration.

This capability is suitable for more fine-grained enterprise content filtering, embedded document security policies, and resource control for third-party iframes.

Encrypted media and production environment checks for iPadOS

(06:33) iPadOS 16’s WKWebView supports Encrypted Media Extensions (EME) and Media Source Extensions (MSE). If your content already relies on these Web APIs, WKWebView in the iPadOS App can play this type of protected media with the same effect as on macOS. The example given by session is premium content such as Apple TV+.

(06:57) Remote Web Inspectorweb-browserThe entitlement App takes effect and no new code is required. The startup process is the same as Safari: first open Web Inspector in the Safari settings of the iOS device, then enable the Develop menu in the Advanced Settings of Mac Safari, select the target page from the Develop menu after connecting the device.

Key points:

• EME and MSE are existing media APIs on web pages, and session does not require adding WKWebView code on the App side.
• Remote Web Inspector can inspect the DOM, run and debug JavaScript, and view page load timelines.
• This debugging capability is for web content in production apps, provided the app hasweb-browser entitlement。

Core Takeaways

• Make a full-screen web game container: Put the game screen in the canvas and open it on the App sideisElementFullscreenEnabled, the web side is called when the user clicks to start the gamewebkitRequestFullscreen(), then usefullscreenStateSynchronize native buttons and status bar.

• Make a reader with a retractable toolbar: The bottom comment bar takes up more height when expanded and frees up space when retracted. usesetMinimumViewportInsetDeclare two boundaries so that the content in the article pagesvh、lvh、dvhThe layout follows the real viewable area.

• Make a built-in document search portal: open long text pages such as knowledge base, protocol, and help centerfindInteractionEnabled, and put a search button in the native navigation bar to callpresentFindNavigator(showingReplace:false)。

• Make an iframe-level content filter: When embedding third-party pages, useif-frame-urlLimit images, scripts or other resource rules to specified iframes to avoid accidentally damaging the main page and other embedded content.

• Production Web content troubleshooting process: If your App conforms to browser-type scenarios and hasweb-browserentitlement, integrate Remote Web Inspector into customer service and QA processes, and use Safari’s Develop menu to directly inspect the DOM, JavaScript, and loading timeline in the user’s path.

Related Sessions

• What’s new in Safari and WebKit — Overview of Safari and WebKit platform updates in the same year, which can be completedsvh、lvh、dvhetc. Web platform capability background.
• What’s new in Safari Web Extensions — session 10049 Recommended by name in the content blocking paragraph, suitable for continuing to understand Safari Extensions and declarativeNetRequest.
• Create Safari Web Inspector Extensions — Related to the Remote Web Inspector debugging capability, further details on how to integrate custom tools into Web Inspector.
• Meet Web Push for Safari — Both Safari and WebKit topics show how Web API can enter Apple platform application scenarios.