javascript – How to replicate the default iOs Safari share preview and functionality with Navigator.share()?


We have the following URL:

https://phmuseum.com/awards/bredaphoto-festival-open-call-2024

If we navigate to that URL in iOs Safari and click the bottom middle browser share icon we get the following share preview:

enter image description here

If we then share to the Notes app we get a link preview. This is ideal and what we are looking to replicate with Navigator.share().

With navigator.share variations we get the following previews:

Title + URL

navigator.share({
     title: 'BredaPhoto Festival Open Call 2024',
     url: 'https://phmuseum.com/awards/bredaphoto-festival-open-call-2024',
});

enter image description here

If we then share to the notes app we get a link preview, ideal.

URL

navigator.share({
     url: 'https://phmuseum.com/awards/bredaphoto-festival-open-call-2024',
});

enter image description here

If we then share to the notes app we get a link preview, ideal.

Text

navigator.share({
     text: 'https://phmuseum.com/awards/bredaphoto-festival-open-call-2024',
});

enter image description here

If we then share to the notes app we only get the link as text, not ideal.

Anyway to get closer to the default functionality?

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img