Mac O’Clock
Published in

Mac O’Clock

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.

Web Animation API in #iOS14

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

Web Inspector in Safari

Example code of such animation API:

Example code of 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:

Example code of Resize Observer

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 copying and pasting of Clipboard API

Example code of pasting Rich Text:

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.

Use native event dispatch and handling — #WWDC 2020

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

Web component markup
registering the web component to event listener
the use of web component

5. CSS Shadow Parts

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

Adding “part” as an HTML attribute

Now content authors can use pseudo-element selector “::part()” to style the part

CSS Shadow Part Styles

After the styling, the result turns into this:

CSS Shadow Part Styles result

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

iOS Labelling 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 ;)

--

--

The best stories for Apple owners and enthusiasts

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
Rick_HK

Hi this is Rick from Hong Kong. I am a native iOS and Android mobile developer and also a tech enthusiast. Find me on Twitter https://twitter.com/rick3817