С каждым годом разрыв между мобильными приложениями и веб-сайтами становится все меньше. Этому способствуют 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)

Стоит учесть…

1. API требует HTTPS-соединения для работоспособности. Исключение – localhost, в целях разработки.
2. API должно быть вызвано событием вроде click. Это необходимо для предотвращения злоупотребления этой функцией.

Пример

Если пишет что API не поддерживается браузером – перейдите на Codepen по этой ссылке. Некоторые браузеры ограничивают доступ к API для iframe.

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!