WWDC Notes

What's New for Web Developers

Show Apple's 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

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 https://github.com/Blackjacx/WWDC

Missing anything? Corrections? Contributions are welcome 😃

Related

Written by

Blackjacxxx

Stefan Herold

Stefan Herold is an iOS Developer a.d. 2009 • iOS / OSX Enthusiast • WWDC20 • Now: @ioki_mobility • Passionate Mountainbiker