С каждым годом разрыв между мобильными приложениями и веб-сайтами становится все меньше. Этому способствуют API, которые создаются для оптимизации кода, удобства интерфейсов и унификации данных. Ярким примером этого будет «герой» этой статьи – Navigator.share() или Web Share API в простонародье.
Зачем это нужно?
Web Share API не заменяет кнопки социальных сетей полностью, но разрешает пользователю поделиться статьей или товаром в мессенджерах, добавить в заметки или напоминания или просто скопировать ссылку для дальнейшего использования. Все шаринги происходят нажатием одной кнопки вместо фаланги кнопочек различных социальных сетей и сервисов. Также, операционная система пользователя отобразит выше те приложения, которые чаще всего использует пользователь. Удобно ведь!
К тому же – Вы не ограничены количеством сервисов, которые добавлены у вас на странице. Пользователь сможет поделиться контентом там, где ему нужно.
Ну и очевидное преимущество – Вы не грузите страницу лишними запросами для картинок и скриптов, а используете минимальное количество кода. Тем самым страница становится легче и грузится быстрее.
Работа с API
Функционал этого API невероятно прост: проверяем работает ли API, определяем кнопку, добавляем объект с данными и «слушаем» пока пользователь не нажмет кнопку, вызвав наше API.
if (navigator.share) { // Проверяем работает ли API у пользователя
var shareBtn = document.querySelector("#shareBtn"),
shareLinks = document.querySelector("#share-links"),
articleData = {
// Здесь находится ссылка на наш контент
url: "https://webstacker.net/front-end/javascript/web-share-api-delimsya-kontentom-pravilno/",
// Название статьи или сайта
title: "Webstacker",
// Краткое описание контента. В некоторых приложениях также используется как Title
text: "📨 Web Share API: делимся контентом правильно"
};
shareBtn.style.display = "block"; // Отображаем нашу кнопку
shareLinks.style.display = "none"; // И прячем классические кнопочки шаринга
// И вешаем click для Web Share API
shareBtn.addEventListener("click", () => {
navigator
.share(articleData)
.then(() => console.log("Article shared!")) // Когда пользователь поделился контентом
.catch(err => console.log(`${err}`)); // Ошибка либо пользователь отменил шаринг
});
}
Объект API поддерживает также файлы(files: filesArray
), но только в Android Chrome. Список поддерживаемых форматов.
Поддержка браузерами
Поддержка браузерами не такая уж большая: iOS (12.2+), Android (Chrome 79+) и MacOS (12.1+). Но это не мешает использовать функцию вместе с традиционными кнопками для шаринга контента. В нашем примере Вы можете увидеть то, как оно работает вместе.
Поддержка равна 46-50% по данным Can I Use (по состоянию на 17.01.2020)
Стоит учесть…
- API требует HTTPS-соединения для работоспособности. Исключение –
localhost
, в целях разработки. - API должно быть вызвано событием вроде
click
. Это необходимо для предотвращения злоупотребления этой функцией.
Пример
Если пишет что API не поддерживается браузером – перейдите на Codepen по этой ссылке. Некоторые браузеры ограничивают доступ к API для iframe.
Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!