Интеграция с пользовательским интерфейсом общего доступа к ОС с помощью API Web Share.

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

Джо Медли
Joe Medley

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

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

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

Общий веб-ресурс имеет следующие возможности и ограничения:

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

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

  • Хром: 89.
  • Край: 93.
  • Firefox: за флагом.
  • Сафари: 12.1.

Источник

Чтобы поделиться ссылками и текстом, используйте метод 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-адресом страницы вместо текущего 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, встройте iframe с allow со значением web-share :

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

Вы можете увидеть это в действии в демо-версии на Glitch и просмотреть исходный код . Если атрибут не указан, это приведет к NotAllowedError с сообщением Failed to execute 'share' on 'Navigator': Permission denied .

Пример использования Санта-Трекера

Приложение Santa Tracker с кнопкой «Поделиться».
Кнопка поделиться Санта-Трекером.

Santa Tracker — проект с открытым исходным кодом — праздничная традиция в Google. Каждый декабрь вы можете отпраздновать сезон играми и образовательными мероприятиями.

В 2016 году команда Santa Tracker использовала API Web Share на Android. Этот API идеально подходил для мобильных устройств. В предыдущие годы команда убрала кнопки «Поделиться» на мобильных устройствах, потому что место ограничено, и они не могли оправдать наличие нескольких целей для обмена.

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

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

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

Вот приблизительный обзор поддержки этой функции. Для получения подробной информации перейдите по любой из ссылок поддержки.

navigator.canShare()

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

  • Хром: 89.
  • Край: 93.
  • Firefox: за флагом.
  • Сафари: 14.

Источник

navigator.share()

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

  • Хром: 89.
  • Край: 93.
  • Firefox: за флагом.
  • Сафари: 12.1.

Источник

Показать поддержку API

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

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