At WWDC, Apple announced updates to WebKit, which is the web browser engine that powers the Safari browser. The updates highlighted during WWDC will make their way to Safari with the release of Safari 17 this fall, and there are 88 updates in total.

First, it will introduce the ability to add specific web pages to the Dock, allowing users the ability to quickly navigate to their most frequently visited websites. These “web apps” can then be opened from Dock, Launchpad, or Spotlight Search, and act as their own application. They also work with AutoFill credentials from iCloud Keychain or third-party apps that use the Credential Provider Extension API. 

Similarly, they have enabled an “Add to Home Screen” option in Safari for users to add a webpage to their Home Screen.

RELATED CONTENT: Apple Vision Pro and operating systems across the Apple ecosystem are announced at WWDC23

Coming off Apple’s Vision Pro announcement, the WebKit team also has been working to make Safari work with the new AR/VR headset. It is announcing two technologies for spatial computing: the <model> element and WebXR. <model> offers a way for presenting 3D content in a web page, and WebXR enables web pages to create 3D experiences.

The team is also going to be adding support for the new image format, JPEG XL. It uses a new compression algorithm that provides more flexibility in adjusting an image’s compression ratios. 

It also added support for HEIC images, which is the file format that iPhones and iPads use to store photos taken by their cameras. By adding support for them in Safari, users will be able to import and edit photos right in the browser without first having to convert them into another format. 

The image-set() implementation is also improved in Safari 17 by adding support for “resolution” and “type” arguments. “Type” allows developers to make it so browsers can choose from many image formats. 

Updates to Video include the new Managed Media Source API, which is a power-efficient solution for streaming video; a stats overlay for the video player; and support for USB cameras on iPadOS 17. 

There are also a number of HTML and CSS updates in this latest iteration of WebKit. Support was added for the “popover” attribute, which provides a framework for displaying overlays, pop ups, popovers, and dialogs. It also added support for <hr> inside of <select>, which allows developers to create a visual separator without needing to use JavaScript. 

CSS updates include support for Counter Styles for changing counter language or character sets, font-size-adjust, new feature queries for discovering what fonts a browser supports and reacting accordingly, Media Queries level 4 support, and support for text-transform and several values that can be used with it, like full-width. There were also several accessibility fixes for “display: contents.”

One of the new JavaScript and Web API updates is support for Offscreen Canvas, which provides a canvas that is rendered off-screen. This decouples the Canvas API from the DOM. Other new features include increasing the storage quota based on total disk space, support for two new RegEx features, new Set operation methods, support for “dual-rumble” haptic feedback when using game controllers, a new feature that checks if a URL can be parsed, and the ability to use relative URLs in the WebSocket constructor. 

In addition, the team is introducing a number of new features for web developers. It completely redesigned the Develop menu, making it easier for developers to find tools for creating websites, web apps, web content inside apps, and web extensions. 

The Feature Flags panel is also new and is the replacement for the old Experimental Features section in the Develop menu. Developers can search for specific features here. Feature flags are sorted by topic, including Animation, CSS, HTML, JavaScript, Media, and more, and can have four statuses: Stable, Testable, Preview, and Developer. 

Web Inspector has been updated in a number of ways as well. In the Elements tab there are now settings for always showing rulers and element overlays, and editing controls for variation axes in the Fonts sidebar. In the Console tab there is a setting for showing timestamps for console messages and support for viewing WeakRef targets. In the Sources tab there is support for ES2022 private fields during inspection and logging of JavaScript objects. And in the Graphics tab support has been added for OffscreenCanvas.  

Other developer features include a new Settings panel, a tab-specific settings overlay, updates to Responsive Design Mode, and the ability to open a Safari page in a Simulator from the Develop menu. 

Changes to the Safari browser itself includes support for user Profiles, several new features for Private Browsing, support for Apple Pay using the Payment Request API, and more. 

There are also changes to how web extensions work. Now users will be able to further customize where extensions run. Safari App Extension now has the same site permission as Safari Web Extensions, which gives users more control over their browsing data and what gets shared. Safari Extensions can also now be turned off in Private Browsing sessions and can be turned off for specific Profiles.