Three Things I’m Excited About In Safari 13

Image for post
Safari 13

WWDC has come and gone and it’s now time to pore over all of the details of what’s being added, updated, and removed to the Apple development ecosystem. My platform of choice is the web so I was excited to look through the Safari 13 Beta release notes. Here’s a quick look at three upcoming features I’m excited about.

1. Device Motion and Orientation Permissions API

If you read my tutorial on recreating the knighting scene in Game of Thrones using device orientation, you’ll know that in iOS 12.2 Apple turned off motion and orientation access by default. This is a huge burden on applications which make use of this technology because the user must manually turn on motion and orientation access in their settings.

General > Safari > Privacy & Security > Motion & Orientation Access

Well in iOS 13 Apple is adding a Permissions API so you may prompt the user to grant access right from your web app. This will be familiar to users who have prompted for access to the user’s webcam or location. I’m not sure if this code is final but here’s what I used to get it working in the example above.

window.DeviceMotionEvent.requestPermission()
.then(response => {
if (response == 'granted') {
// permission granted
} else {
// permission not granted
}
})

2. WebRTC in SFSafariViewController

My struggles with the in-app browser ecosystem is well documented on this blog as I use WebRTC quite a bit to gain access to the user’s video and/or audio in an attempt to create fun experiences. The SFSafariViewController is one of the technologies Apple provides to create these internal app browsers. It is most notably used in the Twitter iOS app. In Safari 13, the navigator.mediaDevices property will now be supported, granting access to WebRTC. This means projects like A Quiet Place Sound Detector and Off White Camera will work right from Twitter.

Sadly, it does not look like this update extends to WKWebView so WebRTC still won’t work in Instagram or Facebook. I’ll take any progress though.

3. Better Support for Transparency in Video

By far the #1 feature request for Mock is the ability to support transparent backgrounds in videos. This should be as simple as using a video format which supports the alpha channel. Sadly, the support for such videos hasn’t been quite wide enough for me to take the plunge and add this feature. However, it looks like Safari is now going to properly support transparency in several supported formats. I’ll be doing some testing over the next few months and can’t wait to add the feature to Mock.

Bonus

This one is straight from the release notes:

Added support for one-finger accelerated scrolling to all frames and overflow:scroll elements eliminating the need to set -webkit-overflow-scrolling: touch.

Thank you Safari!

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store