Эта страница переведена с помощью Cloud Translation API.

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

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

Joe Medley

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

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

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

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

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

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

Источник

Обмен ссылками и текстом

Чтобы поделиться ссылками и текстом, используйте метод 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()

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

Источник

navigator.share()

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

Источник

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

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

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

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

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

Обмен ссылками и текстом

Обмен файлами

Совместное использование в сторонних iframe

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

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

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

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