WWDC18 Notes by Sheldon - Session 234 - Safari and WebKit

WWDC18-234-Notes-Sheldon.md

WWDC18 Notes - Session 234 - Safari and WebKit

All session list link: Here
Session Link: Here
Download session slides: Here
More about AR file .usdz is Here

This notes is written by Sheldon after watching WWDC18 session 234. You can find me with #iOSBySheldon in Github, Youtube, Facebook, etc.

Abstract

Even though I am mainly an iOS developer, I still think we need to follow the changes / new features for Safari and WebView. Specially WKWebView is supported for both macOS and iOS. This year's WWDC 18, session 234 gives up a quick look on what is improved in Security, Performance, Rich Experience, etc aspects.

Security

In the security section the presenter most focused on the following points.

• WKWebView
• Safari Extensions
• Subresource Integrity
• Intelligent Tracking Prevention
• Automatic Strong Passwords
• Security Code AutoFill

Why WKWebView

Few quick advantages of WKWebView:

• UIWebView deprecated
• Works on macOS and iOS
• Runs in a separate process from your app

Safari and Safari Extensions

• 2010: Safari opens the access to create Extensions (we call this legacy extension)
• 2014: App Extensions opens for iOS and macOS (only for apps, not for Safari)
• 2015: App Extensions add a new member called Content Blocker specially to do the work of blocking content (like AdBlock)
• 2016: Whole Safari Extension opens for macOS (not for iOS though) It is worth nothing that the legacy as of now is still supported, but due to the security concern, an extension with some older api will not be approved to be added to the Extension Gallery (think the App Store for Safari Extensions), and the Extension Gallery will be deprecated after 2018.

Integrity with Hash to Improve Security

It is very easy to use the integrity feature. One line and one file is enough to do it all.

<script src="https://thirdparty.example/framework.js" integrity="sha384oqVuAfXRKa+R9GqQ8K/ux"
crossorigin="anonymous"></script>

Intelligent Tracking Prevention

It is also very easy to use the new api to create the pop up to the user for the tracking prevention.

function makeRequestWithUserGesture() {
let promise = document.requestStorageAccess();
promise.then(function () {
// Storage access was granted.
// Check whether the user is logged in.
// If not, do a popup to log the user
// in.
}, function () {
// Storage access was denied.
});
}

Performance

In the performance section the presenter most focused on the following points.

• Font Collections
• font-display Descriptor
• Videos in Image Elements
• Passive Event Listeners
• Async Image Decoding
• Beacon API

Font Collections / Descriptor

It is very likely that different languages share same characters. With the new font collection, it is said that it can save 90% file size regarding the languages you support.

@font-face {
font-family: ExampleFont;
src: url(/path/to/fonts/myfont.woff) format('woff');
font-weight: 400;
font-style: normal;
font-display: fallback;
}

Videos in IMAGE ELEMENTS (my favourite one)

Videos can be shown in the img tag to replace .GIF files, which may result in better quality and way smaller file sizes (5x). In your HTML:

<img src="explosion.mp4" alt="Color Explosion">

<style>
body {
background-image: url("explosion.mp4");
}
</style>

If you need fallback:

<picture>
<source srcset="explosion.mp4" type="video/mp4">
<img src="explosion.jpg">
</picture>

Passive Event Listener

This may improve your scrolling user experience a lot by avoid interrupting current event.

document.addEventListener('touchstart', (e) => {
…
}, { passive: true })

Async Image Decoding

This can give a much smoother transition between images (say user click and image and current image change to the next one). It can avoid showing the flickering. Basically, it leverage the action asynchronously and do the image decoding operation in parallel, so that the user interaction is not blocked. (It is turned on by default for the home page), you just need to:

• Markup: Add the decoding attribute to an element
• JavaScript: Use HTMLImageElement.decode()

Beacon API

New beacon api will asynchronous request on unload event. So it can:

• Sends data on unload without waiting for a response
• Smooth browser navigation while waiting for response
• Ensures delivery of data while Safari is running

Rich Experience

In the Rich Experience section the presenter most focused on the following points.

• Drag and drop
• Payment Request API (Apple pay)
• Service Worker API (Offline experience improvement with Cache interactions and Intercept requests)
• Fullscreen API on iPad (Video playing experience)
• AR Quick Look + Safari (Simple code to enable AR experience)
• watchOS (open WebView in Apple watch)

AR Quick Look

Two lines of code and a .usdz file will make it happen

<a rel="ar" href="myfile.usdz">
<img src="myimagefallback.jpg">
</a>