Safari 9.0

The following new features have been added in Safari 9.0.

Secure Extension Distribution

Secure Extensions Distribution introduces improved security for Safari on OS X. All extensions in the Safari Extensions Gallery are now hosted and signed by Apple. Users can trust that the Safari Extension they install is the one you submitted.

Only Safari Extensions installed from the Safari Extensions Gallery can be updated automatically. Add the following two lines to each extension's dictionary entry within your Update Manifest to allow existing users to update automatically to the latest version.

<key>Update From Gallery</key>
<true/>

You may still sign your Safari Extensions with your developer certificate for distribution outside of the Safari Extensions Gallery, but it will not be a candidate for automatic updating.

Force Touch Trackpad Mouse Events

Safari’s new mouse event property, webkitForce, provides events and force information from Force Touch Trackpads. See Responding to Force Touch Events from JavaScript for an introduction to Force Touch Operations.

Use event.webkitForce to create interactivity with the following events and constants.

Content Blocking Safari Extensions

iOS

The new Safari release brings Content Blocking Safari Extensions to iOS. Content Blocking gives your extensions a fast and efficient way to block cookies, images, resources, pop-ups, and other content.

Your app extension is responsible for supplying a JSON file to Safari. The JSON consists of an array of rules (triggers and actions) for blocking specified content. Safari converts the JSON to bytecode, which it applies efficiently to all resource loads without leaking information about the user’s browsing back to the app extension.

Xcode includes a Content Blocker App Extension template that contains code to send your JSON file to Safari. Just edit the JSON file in the template to provide your own triggers and actions. The sample JSON file below contains triggers and actions that block images on webkit.org.

Listing 1  Actions and triggers example

[
    {
        "action": {
            "type": "block"
        },
        "trigger": {
            "url-filter": "webkit.org/images/icon-gold.png"
        }
    },
    {
        "action": {
            "selector": "a[href^=\"http://nightly.webkit.org/\"]",
            "type": "css-display-none"
        },
        "trigger": {
            "url-filter": ".*"
        }
    }
]

OS X

Content Blocking is now available on OS X through Safari. Add your JSON file in the new Content Blocker section of the Safari Extensions Builder, shown in Figure 1, or use the new setContentBlocker API available on the Safari Extension object.

Figure 1  Safari Extension Builder

Shared Links

Safari on both iOS and OS X now allow App Extensions that send items to Safari’s Shared Links sidebar. Xcode offers templates for both iOS and OS X Shared Links app extensions. The sample in Listing 2 uses the template for OS X.

Listing 2  Creating Shared Links in OS X

- (void)beginRequestWithExtensionContext:(NSExtensionContext *)context {
    NSExtensionItem *extensionItem = [[NSExtensionItem alloc] init];
 
    // The keys of the user info dictionary match what data Safari expects for each Shared Links item.
    // For the date, use the publish date of the content being linked
 
    extensionItem.userInfo = @{
        @"uniqueIdentifier": @"uniqueIdentifierForSampleItem",
               @"urlString": @"http://apple.com",
                    @"date": [NSDate date] };
    extensionItem.attributedTitle = [[NSAttributedString alloc] initWithString:@"Sample title"];
    extensionItem.attributedContentText = [[NSAttributedString alloc] initWithString:@"Sample description text"];
 
    // You can use the NSExtensionItem's attachments property to supply a custom image for your link.
    // extensionItem.attachments = @[ [[NSItemProvider alloc] initWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"customLinkImage" withExtension:@"png"]] ];
 
    [context completeRequestReturningItems:@[ extensionItem ] completionHandler:nil];
}

HTML5 Media

AirPlay

Safari 9.0 allows you to create custom controls for HTML5 media with JavaScript AirPlay support. Use Safari's WebKitPlaybackTargetAvailabilityEvent to detect Airplay availability and then add your own controls for streaming audio and video to AirPlay devices.

The JavaScript sample below shows an implementation of custom player controls for HTML5 sites.

Listing 3  Custom controls for Airplay

if (window.WebKitPlaybackTargetAvailabilityEvent) {
    video.addEventListener('webkitplaybacktargetavailabilitychanged',
        function(event) {
           switch (event.availability) {
                case "available": /* turn stuff on */ break;
                case "not-available": /* turn AirPlay button off */
                break;
           }
        })
}

Picture in Picture Support

Picture in Picture (PiP) maintains user engagement, allowing your video to remain in view in a floating video overlay while users interact with other apps. With Safari 9.0, you can use new JavaScript PiP support to add your own customized picture-in-picture controls for HTML5 videos, as shown below.

Listing 4  Activating PiP when clicked

if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
    // Toggle PiP when the user clicks the button.
    pipButtonElement.addEventListener("click", function(event) {
        video.webkitSetPresentationMode(video.webkitPresentationMode === "optimized" ? "inline" : "optimized");
    });
} else {
    pipButtonElement.disabled = true;
}

SFSafariViewController for iOS

You can use SFSafariViewController to display web content within your app. The Safari View Controller shares cookies and other website data with Safari, and has many of Safari's features, like Safari AutoFill and Safari Reader. Unlike Safari itself, the Safari View Controller UI is tailored for displaying a single page, featuring a Done button that'll take users right back where they were in your app.

Consider replacing your WKWebView or UIWebView-based browsers with SFSafariViewController if your app displays web content but does not customize that content.

Icons for Pinned Tabs

Pinned Sites allow your users to keep their favorite websites open, running, and easily accessible.

You can set the icon that the user sees when they pin your site by providing a vector image. Use 100% black for all vectors with a transparent background in SVG format and add the following markup to all webpages that the icon should represent (replacing "website_icon" with your own file's name).

<link rel="icon" sizes="any" mask href="website_icon.svg">

To specify the color the icon should be displayed in, add the theme-color meta element to your webpage:

<meta name="theme-color" content="red">

The content attribute can specify a color in hexadecimal color values (#990000) or RGB formatted colors (rgb(153, 0, 0)), or recognized color-keywords, such as: red, lime, or navy.

CSS Scroll Snapping

Safari’s WebKit now provides CSS scroll snapping to keep the focal point of your content in view when scrolling momentum stops. The following properties are available to customize your page.

Backdrop Filters

Backdrop filters allow you to add advanced image filters to the backdrops of your elements. Achieve modern iOS and OS X material effects in your web content layouts using these filters. Overlay with a backdrop-filter shows a backdrop filter with a blur effect applied to the overlay.

Safari provides for the following functions for the backdrop-filter property:

Figure 2  Overlay with a backdrop-filter

W3C offers more information on filter effects at http://dev.w3.org/fxtf/filters/#typedef-filter-function-list.

Responsive Design Mode

The Responsive Design Mode provides a fast-switching layout preview of your webpage across a spectrum of viewport sizes. This viewport quick-look tool helps you quickly spot layout issues on a webpage across many screen sizes. It includes several preset sizes for Apple devices, shown in Figure 3, and allows custom viewport sizes to be defined.

Figure 3  A Responsive Design Mode window

Web Inspector Redesign

The new Web Inspector design provides a more intuitive user experience. The use of tabbed view panels keeps the user oriented and provides quick navigate between development tasks.

A new frame rendering timeline, shown in Web Inspector displaying rendering frames, makes it easy to see performance with respect to the frames painted to the page.

Figure 4  Web Inspector displaying rendering frames

ECMAScript 6 Enhancements

The following ECMAScript 6 content is now supported by Safari:

Unprefixed CSS Properties

The properties in Newly supported ECMAScript 6 properties are now fully supported by Safari, without the -webkit- prefix.