В современных версиях браузеров Chrome, Safari, Opera и некоторых других (здесь можно посмотреть актуальную информацию) поддерживается функция Web Share API, которая реализует возможность вызова контекстного меню браузера «Поделиться» прямо со страницы сайта. То есть при нажатии на кнопку на сайте появляется стандартное меню браузера, которое, как правило, содержит иконки часто используемых приложений, отправку на свои устройства и другие удобные функции. А в случае применения данной технологии в PWA приложении появляется контекстное меню, аналогичное тому, которое вызывается в любом нативном приложении. Очень удобно!
Вот как это реализовать на сайте. Нам нужна кнопка, при нажатии на которую появится меню «Поделиться». Реализуем ее так:
<button id="share-button" type="button">Поделиться</button>Кнопку можете оформить согласно своему пожеланию, главное оставьте id таким же.
После кнопки ниже размещаем JS. В поле title нужно будет передавать название страницы, а в text ее описание, поэтому реализуйте эту возможность, иначе на всех страницах будет одинаковый текст. Картинка-превью не передается, ее следует оформить с помощью тега open graph в <head></head> — большинство соцсетей и мессенджеров берут ее оттуда для предпросмотра ссылки.
<script>
var shareButton = document.getElementById('share-button');
shareButton.addEventListener('click', function () {
if (navigator.share) {
console.log("Congrats! Your browser supports Web Share API")
navigator.share({
title: "Название вашей страницы, например из Title",
text: "Короткий текст, который будет передаваться в предпросмотр ссылки",
url: window.location.href
})
} else {
console.log("Sorry! Your browser does not support Web Share API")
}
})
</script>В десктопных браузерах эта функция также вызывает контекстное меню «Поделиться», но не во всех и на не каждой ОС. В таких случаях можно использовать стандартные иконки, но это уже совсем другая история 🙂