iOS14 — 7 New Web APIs and API Changes in Safari from WWDC2020
Apple just announced what’s new in web/safari on WWDC2020. Let’s take a look at what API changes are concerning web developers and wkwebview users.
1. Web Animation API
Web Animation API is new in Safari 13.1.
i. Create and Control animation in JavaScript — Developer can now directly create and control the playback of animation and CSS transitions via JavaScript
ii. Query Animation — Developer can now query animations
iii. Seek to a specific time — Developer can seek a specific time for playback cycle
iv. Change speed and direction
v. New Web Inspector in Safari can inspect animation
Example code of such animation API:
You can find more details by checking out this blog post from Webkit Blog: https://webkit.org/blog/10266/web-animations-in-safari-13-1/
2. Resize Observer
i. Reports element size changes — It can respond to other elements, not just the viewport
ii. Reports changes based on
- Viewport resizing
- Display property
- Appended elements
Example code:
You can find more details by checking out this blog post from Webkit Blog: https://webkit.org/blog/9997/resizeobserver-in-webkit/
3. Async Clipboard API
i. System Clipboard read and write
ii. Keep the page usable — As it is asynchronous
iii. No selection or focus needed to copy
iv. Supports images and rich text — Supported MIME types are "text/plain", "text/html", "text/uri-list", and "image/png" , but not "image/jpeg" or "image/svg+xml" or others.
v. Require a secure context and user interaction — HTTPS and User interaction are needed for preserving user privacy
Example code of copying and pasting:
Example code of pasting Rich Text:
Note that it allows user to loop through the clipboard items and the retrieved item is generalised as a blob object
You can find more details by checking out this blog post from Webkit Blog: https://webkit.org/blog/10855/async-clipboard-api/
4. Use native event dispatch and handling
Safari 13.1 now supports the event target constructor.
i. No DOM reliance — Now object can extend event target, just like DOM element
ii. Combine with CustomEvent — Framework/Library authors can use native event functionality to create their own object interface for dispatching custom event for non-DOM object
Here are some example codes for using native event dispatch and handling
5. CSS Shadow Parts
i. Exposes parts of a component to content authors to do CSS styling
ii. Protects critical layout styles of the components
iii. Allows content authors to customize components
Here are some example codes:
Using the previous web component as the example, now you can add “part” as an HTML attribute
Now content authors can use pseudo-element selector “::part()” to style the part
After the styling, the result turns into this:
6. HTML enterkeyhint attribute
It is supported on #iOS13.4 and #iPadOS on #Safari. It allows a developer to label the enter key on the virtual keyboard
7. Web Authentication API
Safari 13 and Safari iOS 13.3 now supports hardware security keys.
Now, iOS14 and macOS 11 supports TouchID and FaceID on iOS, iPadOS and macOS devices
Please check here for more details https://developer.apple.com/videos/play/wwdc2020/10670/
For more web/safari related information, please keep an eye of my medium https://medium.com/@rick38yip as well as my Twitter account https://twitter.com/rick3817
That’s it.
Happy coding and I wish you a great day ;)
