What’s New in Safari and WebKit
What’s New in Safari and WebKit
WWDC 2018
Use WKWebView
- UIWebView deprecate
- Works on macOS and iOS
- Runs in a separate process from your app
Extending Safari: History
- 2010: Safari Extensions
- 2014: App Extensibility for macOS and iOS
- 2015: Content Blockers for macOS and iOS
- 2016: Safari App Extensions for macOS
Legacy Safari Extensions
- Safari 12 blocks support for
.safariextz
extension
outside of the Safari Extensions Gallary - New submissions to the Safari Extensions Gallery
will be accepted util the end of 2018 ⚠️ - Transition to a Safari App Extension or Content Blocker
Subresource Integrity
![](https://cdn-images-1.medium.com/max/800/1*ZL2APDSTfNrYJFyRE03_ig.gif)
![](https://cdn-images-1.medium.com/max/800/1*lAqzxEg1xuJkLDb6989_Uw.png)
Demo
The hash doesn’t match. So, Safari has blocked it from being loaded.
![](https://cdn-images-1.medium.com/max/800/1*3WCMZECNJ5LlW3jrqgbP6A.gif)
Intelligent Tracking Prevention
Storage Access API ( new )
![](https://cdn-images-1.medium.com/max/800/1*bEPKji8-G_oJ2MUYLNNqDQ.gif)
![](https://cdn-images-1.medium.com/max/800/1*Rdsm_luKaVGscXNILne83g.png)
AutoFill for Safari
![](https://cdn-images-1.medium.com/max/800/1*SegUpfUtohJhWXUYCrHZOQ.png)
![](https://cdn-images-1.medium.com/max/800/1*2CuAZticPwpZTi8ZmmOypg.png)
Default Password Format ( new )
- 20 characters long
- Contain upper-case, digits, hyphen, and lower-case
- Use
passwordrules
attributes for custom password rules - Password rules validation tool
![](https://cdn-images-1.medium.com/max/800/1*NJxPLYpEMtbZHcKaoe5JsQ.png)
Security Code AutoFill ( new )
![](https://cdn-images-1.medium.com/max/800/1*aJ9aPt_fqFnHWcZKEmPe7w.png)
Font Collections ( new )
Similar Unicode fonts downloaded more quickly
![](https://cdn-images-1.medium.com/max/800/1*GRVz4-SPQXiUWqRtmdfKJw.png)
font-display Descriptor ( new )
![](https://cdn-images-1.medium.com/max/800/1*REtXKY6abOID6evKsSRXUA.png)
![](https://cdn-images-1.medium.com/max/800/1*h-uB_Dav6R9RcAg1q14kUg.png)
Videos in Image Elements
![](https://cdn-images-1.medium.com/max/800/1*ojuau5XxXm8QKM5RdZonPg.png)
![](https://cdn-images-1.medium.com/max/800/1*IldT7ccwhZZiMsvcBJyrCg.png)
![](https://cdn-images-1.medium.com/max/800/1*rwqdHNAoOxFz3TMwmqQTuA.png)
Demo
gif → mp4
![](https://cdn-images-1.medium.com/max/800/1*xmu6Pys9JE_uV9Sj3jPiuA.gif)
Passive Event Listeners ( new )
- Enabled on
document
,window
, andbody
elements by default - Flag to always allow scrolling
- No interruptions
![](https://cdn-images-1.medium.com/max/800/1*j2IBKnNB1Zn3mcLo_H6Wvg.png)
![](https://cdn-images-1.medium.com/max/800/1*N861Uu48v88_gDZUupGIlw.gif)
Image Decoding ( new )
- Synchronous 😡
- Main thread is blocked
- User interactions prevents until all images are decoded - Asynchronous 😆
- On separate thread
- Parallel decoding operations
- User interactions aren’t blocked
- Default on 1st page load
- Markup: Add thedecoding
attribute to an element
- JavaScript: UseHTMLImageElement.decode()
![](https://cdn-images-1.medium.com/max/800/1*euuT8mxI4Lu25Ut3ugJTjQ.gif)
![](https://cdn-images-1.medium.com/max/800/1*gS-Fw6i4PVzvwj49BqKzUA.gif)
Demo
No flash. Smooth transition.
![](https://cdn-images-1.medium.com/max/800/1*8vhuSaO2Udjj7zX829q76w.gif)
Beacon API
Asynchronous request on unload event
- Sends data on unload without waiting for a response
- Smooth browser navigation while waiting for response
- Ensure delivery of data while Safari is running
![](https://cdn-images-1.medium.com/max/800/1*5ZykBUD-Wa1Up4x61ObPqA.gif)
Drag and Drop Improvements
- Directory uplaod
- Read and write support for MIME types ( HTML, plaintext, and URLs)
- iOS:
DataTransfer.getData
andDataTransfer.setData
Demo
![](https://cdn-images-1.medium.com/max/800/1*AHUvZ2pckeI7EdGGKc2_4w.jpeg)
![](https://cdn-images-1.medium.com/max/800/1*PpbCTelAEz3DlIZDgtnZ6Q.gif)
Payment Request API + Apple Pay ( new )
- Support for Apple Pay using Payment Request API
- Still need to support Apple Pay specifics
- Apple Pay JS features
- Granular error handling
- Cobranded card support
- Phonetic names
Demo
![](https://cdn-images-1.medium.com/max/800/1*Gec4N1lk3qLwwxt_JycTdA.jpeg)
![](https://cdn-images-1.medium.com/max/800/1*EmGDbeE0EAWInTD3BWey1A.jpeg)
![](https://cdn-images-1.medium.com/max/800/1*FiWchDHVdAKPiPmdCGN_xA.jpeg)
Service Worker API ( new )
- Great offline experience
- Cache interactions
- Intercept requests - Multiple tabs share 1 instance
- Persistent store of resources
Fullscreen API for iPad
CSS Environment Variables
![](https://cdn-images-1.medium.com/max/800/1*vHZnb-X3Bq5Xm_A6wYhwuw.gif)
AR Quick Look + Safari
![](https://cdn-images-1.medium.com/max/800/1*8qqhcB-6oTef6iziV0EOzA.png)