Интеграция с интерфейсом обмена ОС с помощью Web Share API

Веб-приложения могут использовать те же системные возможности обмена данными, что и приложения для конкретных платформ.

Joe Medley

С помощью Web Share API веб-приложения могут использовать те же возможности обмена, предоставляемые системой, что и приложения для конкретных платформ. Web Share API позволяет веб-приложениям делиться ссылками, текстом и файлами с другими приложениями, установленными на устройстве, так же, как это делают приложения для конкретных платформ.

Примечание. Поделиться – это только полдела. Веб-приложения также могут быть целями обмена, то есть они могут получать данные, ссылки, текст и файлы из приложений для конкретных платформ или веб-приложений. Чтобы узнать, как зарегистрировать приложение в качестве цели для отправки контента, прочитайте статью Получение общих данных.

Системный инструмент выбора цели для отправки контента с установленным PWA в качестве варианта.

Возможности и ограничения

У Web Share API есть следующие возможности и ограничения:

• Его можно использовать только на сайтах, доступных по протоколу HTTPS.
• Если передача происходит в стороннем окне iframe, необходимо использовать атрибут allow.
• Оно должно вызываться в ответ на действие пользователя, например клик. Вызвать его через обработчик onload невозможно.
• Вы можете делиться URL, текстом или файлами.

Browser Support

• 128
• 93
• 
• 12.1

Source

Отправка ссылок и текста

Чтобы поделиться ссылками и текстом, используйте метод share(), который основан на обещаниях и требует объект свойств. Чтобы браузер не выдавал ошибку TypeError, объект должен содержать хотя бы одно из следующих свойств: title, text, url или files. Например, вы можете поделиться текстом без URL или наоборот. Разрешение всех трех членов расширяет гибкость вариантов использования. Представьте, что после выполнения приведенного ниже кода пользователь выбрал в качестве цели почтовое приложение. Параметр title может стать темой письма, text – текстом сообщения, а файлы – прикрепленными файлами.

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));
}

Если на вашем сайте один и тот же контент доступен по нескольким URL, поделитесь каноническим URL страницы, а не текущим. Вместо того чтобы делиться ссылкой document.location.href, вы можете найти тег канонического URL <meta> в разделе <head> страницы и поделиться им. Это повысит удобство для пользователей. Это не только позволяет избежать переадресации, но и гарантирует, что общий URL-адрес будет правильно работать для конкретного клиента. Например, если друг поделился с вами мобильным URL, а вы открыли его на компьютере, то должна загрузиться версия для ПК.

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

Предоставление доступа к файлам

Чтобы поделиться файлами, сначала проверьте и вызовите navigator.canShare(). Затем включите массив файлов в вызов navigator.share():

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

Обратите внимание, что в примере распознавание функций выполняется путем тестирования navigator.canShare(), а не navigator.share(). Объект данных, переданный в canShare(), поддерживает только свойство files. Вы можете делиться некоторыми типами аудио, изображений, PDF, видео и текстовых файлов. Полный список приведен в статье Разрешенные расширения имени файла в Chromium. В будущем могут быть добавлены и другие типы файлов.

Обмен данными в сторонних окнах iframe

Чтобы запустить действие "Поделиться" из стороннего элемента iframe, встройте его с атрибутом allow со значением web-share:

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

История успеха: Радар Санта-Клауса

Кнопка "Поделиться" в Радаре Санта-Клауса.

Радар Санта-Клауса – это проект с открытым исходным кодом, который стал для Google праздничной традицией. Каждый декабрь вы можете отмечать праздники, играя в игры и узнавая что-то новое.

В 2016 году команда Радара Санта-Клауса использовала Web Share API на Android. Этот API идеально подходил для мобильных устройств. Ранее команда удалила кнопки "Поделиться" из мобильной версии, поскольку на экране не хватало места для нескольких кнопок.

Но с помощью Web Share API они смогли представить одну кнопку, сохраняя драгоценные пиксели. Они также обнаружили, что пользователи делились контентом с помощью Web Share примерно на 20 % чаще, чем пользователи, у которых этот API не был включен. Посмотрите, как работает Web Share, на сайте Радар Санта-Клауса.

Поддержка браузеров

Поддержка Web Share API в браузерах имеет свои особенности, поэтому рекомендуется использовать обнаружение функций (как описано в предыдущих примерах кода), а не предполагать, что определенный метод поддерживается.

Ниже приведено краткое описание поддержки этой функции. Подробную информацию можно найти по ссылкам на статьи Справочного центра.

navigator.canShare()

Browser Support

• 128
• 93
• 
• 14

Source

navigator.share()

Browser Support

• 128
• 93
• 
• 12.1

Source

Поддержка API

Планируете ли вы использовать Web Share API? Ваша поддержка помогает команде Chromium определять приоритеты функций и показывает другим поставщикам браузеров, насколько важно их поддерживать.

Отправьте твит на @ChromiumDev с хештегом #WebShare и расскажите, где и как вы используете этот инструмент.

Полезные ссылки

• Демонстрация Web Share API
• Scrapbook PWA