Share like a native app with the Web Share API
This module to add a native share button to your node. If the device support share with native dialog, It is very convenient for mobile users.
Installation
composer require drupal/mobile_native_share
Configuration
Go to: admin/config/search/mobile-native-share
Required
- Browser / device support navigator.share
- https
Demo
- https://www.youtube.com/watch?v=yqgJMqFiMpE
Sharing links and text
To share links and text, use the share() method, which is a promise-based method with a required properties object. To keep the browser from throwing a TypeError, the object must contain at least one of the following properties: title, text, url or files. You can, for example, share text without a URL or vice versa. Allowing all three members expands the flexibility of use cases. Imagine if after running the code below, the user chose an email application as the target. The title parameter might become the email subject, the text, the message body, and the files, the attachments.
if (navigator.share) {
navigator.share({
title: 'web.dev',
text: 'Check out web.dev.',
url: 'https://web.dev/',
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
}
If your site has multiple URLs for the same content, share the page's canonical URL instead of the current URL. Instead of sharing document.location.href, you would check for a canonical URL tag in the page's and share that. This will provide a better experience to the user. Not only does it avoid redirects, but it also ensures that a shared URL serves the correct user experience for a particular client. For example, if a friend shares a mobile URL and you look at it on a desktop computer, you should see a desktop version:
let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
url = canonicalElement.href;
}
navigator.share({url: url});
Read more at:
- https://web.dev/web-share
- https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share