feat: add haptic feedback to Toggle in Safari on iOS 18+

[jedlikowski]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Safari since iOS 18 supports haptic feedback on checkbox elements via a non-standard switch attribute. We could use it to provide haptic feedback when switching Toggle in non-hybrid environments. This could be a workaround for lack of support for Vibration API in Safari.

Describe the Use Case

Adding haptic feedback to Toggle component in non-hybrid environments would improve native feel of web and PWA apps built with Ionic.

Describe Preferred Solution

To trigger haptic feedback programatically we need an <input type=checkbox switch> element with an associated <label> element. With this setup, when we programatically trigger click() on the label, safari will emit the haptic feedback.

Describe Alternatives

Keep current implementation and wait for Safari to implement Vibration API (if it ever does).

Related Code

Codepen provided in WebKit release notes, demonstrating haptic feedback in checkbox of type switch: https://codepen.io/jensimmons/pen/GReLKWg

Additional Information

No response

[DwieDima]

This sounds really interesting! Would you mind to also include the option to configure this using IonicConfig with defaults to false?

You can find a similar PR for config extension here.

[jedlikowski]

Hi @DwieDima, thanks for the suggestion 🙇 Added configurability to my PR 😄

[thetaPC]

Thank you for the feature request!

Are there any examples in the native iOS that provide haptic feedback? This will help determine if we would proceed with this request since we want to align with native.

[DwieDima]

@thetaPC you can find these in the settings app for every toggle (e.g notifications)

[thetaPC]

Thank you for providing a use case! I was able to verify that this is a possibility with native iOS and toggles. I'll be adding the feature request label so the team can look into this.

[posaune0423]

Just came across this discussion - I've been working with the checkbox switch approach for haptic feedback in Safari on iOS as well. Created a small library that implements this technique: https://github.com/posaune0423/use-haptic. Might be useful as a reference for your implementation.

There's also a demo site if you want to try it out(code sandbox): https://kjwzkv.csb.app Might be useful as a reference for your implementation.

[thetaPC]

Thanks for the feature request! This has been resolved via PR https://github.com/ionic-team/ionic-framework/pull/29945 and will be available in an upcoming minor release of Ionic.

[thetaPC]

Closing this as it was added in v8.6.0! Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.