New WebKit Features in Safari 11.1

Update: This post has been updated to omit Offscreen Canvas which is not available in Safari 11.1 on macOS and Safari on iOS 11.3. Offscreen Canvas is available as an experimental feature in Safari Technology Preview releases.

The recently shipped Safari 11.1 in macOS High Sierra and Safari on iOS 11.3 includes WebKit improvements that add support for a lot of exciting web platform technologies. These features offer new capabilities to developers to improve user-perceived performance of web content, it adds a new dynamic approach for offline experiences, and brings a standard approach to web payments that simplifies development. It also delivers redesigned developer tools in Web Inspector that improve overall usability and convenience.

What follows is a short tour of all of the new features and improvements available with Safari 11.1.

Service Worker API

The Service Worker API enables scripts that run in the background to handle generalized processing for web pages. Service Worker scripts commonly work with other complimentary APIs, such as the Cache API, also included in this release, to store fetch requests and responses that to improve network performance or provide an offline experience. WebKit’s implementation respects user privacy partitioning Service Workers by the top level document origin to help prevent cross-site tracking.

Read the “Workers at Your Service” blog post for more details about the WebKit implementation of Service Workers.

Payment Request API for Apple Pay

WebKit added support for the Payment Request API to perform Apple Pay transactions. This enables merchants to offer payment methods across multiple browsers using a standard API, greatly reducing the effort of supporting secure payments across different browsers and platforms.

See Introducing the Payment Request API for Apple Pay for more details.

Beacon API

Beacon API schedules asynchronous requests to send before the page is unloaded and completes them without a blocking request. This is useful for sending diagnostics data about the web application without impacting perceived page load performance.

See the Beacon specification for more information.

Directory Upload & Clipboard API Updates

The Clipboard API has a number of improvements focusing on a modernized implementation of the DataTransfer API. It adds support for dataTransfer.items, reading and writing of HTML content and custom MIME types, and fixed a number of bugs including copying & pasting images from native applications. WebKit also added support for uploading directories using DataTransfer.webkitGetAsEntry() and input.webkitdirectory, allowing interoperability with other browsers. Users can now upload an entire directory onto cloud storage and file sharing services such as iCloud or Dropbox.

Read more about the improvements to the Clipboard API and Directory Upload API.

Video as Image Assets

Animated image formats are very popular, but they easily become large, bandwidth intensive file sizes. To address the performance impact, WebKit in Safari now supports loading H.264 encoded MP4 video with an HTML tag. This allows content authors to replace animated GIF files that are much larger than H.264 video files and require more processing power to display. Beyond the performance gains, this change also allows web content authors to use videos as a CSS background-image.

Some detailed information about this change is available in the blog post Evolution of : Gif without the GIF by Colin Bendell.

font-display

Page authors have more control over font loading behavior using the newly support font-display descriptor. WebKit’s new default behavior will show invisible text for up to 3 seconds before switching to an installed font until the desired font finishes downloading. Using font-display, the page author can use the swap value to immediately show an installed font until the specified web font is downloaded. There is a fallback behavior to show an installed font for up to 3 seconds and if the desired font doesn’t load in that time, it will never be shown. Finally, the optional behavior will use the font if it is available in the browser’s cache. If it isn’t there, it skips using it at all. These provide a rich set of behaviors for web developers to control the loading and display experience that best suits the design of their web content.

Find more details in the CSS Fonts Module Level 4 specification.

HTML Image Decoding

Content authors sometimes need a loaded, fully decoded image that is available immediately. Loading and decoding large images or lots of images can cause page performance to suffer. The new HTMLImageElement.decode() function asynchronously starts decoding an image and returns a Promise that resolves when the decoded image is available. With it, developers now have control over when loaded images are decoded, without tying up the main thread. Developers can also declaratively indicate an image should load asynchronously using the decoding attribute on an <img> element.

<img decoding="async">
<img decoding="sync">
<img decoding="auto">

For more information, read the WhatWG proposal.

Passive Event Listeners

To avoid causing poor scroll performance when attaching event handlers to touchstart, touchmove, or wheel events, developers can specify their event listener as passive if the listener does not call preventDefault(). This enables Safari to continue to provide high performance scrolling without waiting for the event listener to finish.

More details on Passive Events Listeners can be found in the DOM specification.

Storage Access API

The new Storage Access API provides a solution to allow third-party embeds to request access to their first-party cookies when the user interacts with them in a world with Intelligent Tracking Prevention. This gives content providers the flexibility to provide embedded content, while offering users transparency about who they are sharing their information with.

Find out more about the Storage Access API on the WebKit blog.

Subresource Integrity

WebKit has added support for Subresource Integrity which enables websites to validate the integrity of resources and reject them if something has changed outside the site owner’s control. An integrity check compares a hash provided by the web content author in an integrity attribute on a <script> or a <link> element with a computed hash of the delivered resource. When the hashes don’t match, instead of applying a stylesheet, or executing a script, a network error is returned. This helps web content authors reduce impact a compromised content delivery network (CDN).

Read the Subresource Integrity specification to learn more.

WebDriver Improvements

Safari includes several improvements to the implementation of WebDriver. With Safari 11.1, WebDriver now supports file uploads and testing WebRTC functionality. In addition, several bug fixes improve the overall quality of the WebDriver implementation.

Web Inspector Improvements

Web Inspector has honed the design of several existing tools, and also adds a useful new tool to inspect HTML Canvas elements. The new Canvas tab allows web developers to understand the changes in recorded frames of canvas animations.

The Styles sidebar in the Elements tab was reworked to use a different, but familiar model for editing style rules, properties and values. It also features improvements in navigating between different style views.

Finally, the Network tab was redesigned, improving both the timeline of loading resources, and navigating to the network details of each resource such as content previews, headers, cookies, size and timing details.

Feedback

Most of these improvements are available to users running iOS 11.3 and macOS High Sierra 10.13.4, as well as macOS Sierra and OS X El Capitan. The Storage Access API is only available on iOS 11.3 and macOS High Sierra 10.13.4. These features were also available to web developers with Safari Technology Preview releases. Changes in this release of Safari were included in the following Safari Technology Preview releases: 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47. Download the latest Safari Technology Preview release to stay on the forefront of future web features. You can also use the WebKit Feature Status page to watch for changes to your favorite web platform features.

We love hearing from you. Send a tweet to @webkit or @jonathandavis to share your thoughts on this release, and any features you were hoping for that didn’t make it. If you run into any issues, we welcome your bug reports for Safari, or WebKit bugs for web content issues.