Веб-приложения могут использовать те же возможности общего доступа, предоставляемые системой, что и приложения для конкретной платформы.
Благодаря API Web Share веб-приложения могут использовать те же возможности общего доступа, предоставляемые системой, что и приложения для конкретной платформы. API Web Share позволяет веб-приложениям обмениваться ссылками, текстом и файлами с другими приложениями, установленными на устройстве, так же, как приложения для конкретной платформы.
Возможности и ограничения
Общий веб-ресурс имеет следующие возможности и ограничения:
- Его можно использовать только на сайте, доступ к которому осуществляется через 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 — проект с открытым исходным кодом — праздничная традиция в 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
, и сообщите нам, где и как вы его используете.