Поделиться - native app с помощью Web Share API

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

Концепции и использование

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

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

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

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

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

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));
} else {
    // display an alternative function or script to share
}

Если на вашем сайте несколько URL-адресов для одного и того же содержимого, предоставьте общий канонический URL-адрес страницы вместо текущего URL-адреса. Вместо того, чтобы делиться document.location.href, вы должны проверить канонический URL-тег в страницы и поделиться им:

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

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

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

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Artdevue WebDev',
    text: 'This is a test line to share.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

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