Written by Stefan Herold

Description: WebKit provides a rich set of classes designed to load, display, and manage web content in your app. Discover how to integrate your web content into powerful platform features including Dark Mode, new presentation features in Share Sheet, JavaScript payment APIs for Apple Pay, and more.

Dark Mode

• Add :root { color-scheme: light dark; ... } to tell WebKit that the entire page supports dark mode
  • Adapting custom CSS styles with @media (prefers-color-scheme: dark) { ... }
  • Adapting images using <picture><source srcset="dark.jpg" media="(prefers-color-scheme: dark)"> <img src="light.jpg"></picture>
  • Adapting dynamic content via the JS match media API

WebShare

• Native share sheet from within web content
  • Uses all the improvements made in iOS 13 to the native share sheet
  • Add await navigator.share({title: "", text: "", url: ""}) to e.g. a buttons event listener

New Media Features

• Checking the device's capabilities using the new Media Capability API
  • Support for Alpha Channel Video (ACV) in iOS 13 and macOS Catalina
    • Make sure that ACV is available on underlying device by adding an alpha channel key to capability object: alphaChannel: true
    • Check via if(capabilities.supported && capabilities.supportedConfiguration.video.alphaChannel) {} else {}

WebRTC Screen Capture

• Prompt the user for permission via navigator.mediaDevices.getDisplayMedia({ video: true }).then((stream) => {...}
  • stream contains capture of the space containing the Safari window
  • Can be used to share your screen

Tools for Improving Performance

• Web Inspector adds a new CPU Timeline packed with actionable information
  • There is a post on the WebKit blog and a WWDC session video called Understanding CPU Usage with Web Inspector
  • WebDriver on iOS for automation and regression testing

Storing Structured Data

• Added IndexedDB and completely removed WebSQL in Safari 13
  • All modern browsers support IndexedDB
  • Transition as asap

Apple Pay

• Fully supported using the Payment Request API
• Use Apple Pay in WKWebView on iOS 13
  • Denied if script has ever been injected
  • Future script injections denied if Apple Pay ever requested
  • Restrictions are reset during navigation

• canMakePayments must be called before showing an Apple Pay button or doing anything using Apple Pay
• Prefer WebKit APIs instead of using JS when possible

This note was originally published at github.com/Blackjacx/WWDC.