Web Share API: Как поделиться ссылкой на мобильных устройствах в один клик

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

Вы можете проверить сами, просто откройте эту статью на телефоне и поделитесь при помощи кнопки. На браузерах, которые не поддерживают эту функцию, кнопка будет задизейблена:

Использование Web Share API

Реализация «Поделиться» при помощи Web Share API не требует никаких дополнительных плагинов, а только одну функцию с вызовом метода, например, по клику на кнопку «Share»:

function onShareClick(){
    navigator.share({
        title: 'Article: Web Share API',
        text: 'Read it',
        url: window.location.href
    })
    .then(() => console.log('Successfully shared'))
    .catch((error) => console.log('Error sharing:', error));
}

Мы можем указать ссылку, заголовок и текст, которыми желаем поделиться:

• title (string): название документа, к которому предоставлен общий доступ (может игнорироваться обработчиком)
• text (string): текст, который формирует тело сообщения для обмена.
• url (string): ссылка на ресурс

Метод возвращает Promise, который будет выполнен, если не возникло ошибок. Promise может перейти в состояние rejected в таких случаях:

• неверные данные
• пользователь отменил диалог выбора или нет приложения для обмена данными
• данные не могут быть доставлены в целевое приложение

При реализации «Поделиться» таким методом Вы можете использовать Open Graph Markup:

function getOpenGraphData(property){
    return document.querySelector(`meta[property="${property}"]`)
        .getAttribute('content');
}

const sharePage = () => {
    navigator.share({
        title: getOpenGraphData('og:title'),
        text: getOpenGraphData('og:description'),
        url: getOpenGraphData('og:url')
    }) //...
}

В случае если вы хотите скрыть кнопку «Поделиться» в браузерах, которые не поддержат эту функцию, достаточно добавить простую проверку:

if(!navigator.share){
    shareButton.hidden = true;
    return;
}

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

На данный момент не все браузеры поддерживаю возможность делиться данными через Web Share API:

Web Share API для обмена файлами

Используя Web Share API Вы можете обмениваться файлами, такими как фотографии, аудио, видео, документы (pdf, doc, ppt и т.д.). Рассмотрим как это работает.

Для обмена файлами мы передаем свойство файла входному объекту navigator.share:

navigator.share({
    file: [...]
})
...

Свойство file будет хранить файлы blob в массиве.

function shareFiles() {
    const files = [file]
    if (navigator.canShare && navigator.canShare({
        files: files
        })) {
        navigator.share({
            title: title.value,
            text: text.value,
            file: files,
        })
        .then(() => console.log('Successful share'))
        .catch((error) => console.log('Error sharing', error));
    } else {
        console.log("Web Share API is not supported in your browser or files can't be shared.")
    }
}

При помощи метода canShare Вы можете проверить доступна ли функция поделиться файлами и поддерживаются ли выбранные форматы файлов:

if(navigator.canShare(data)) {
    // We can use share() to share the data! Woop!
}

Источники: hospodarets.com, developer.mozilla.org, blog.bitsrc.io

Browsers, canShare, devices, javascript, media, mobile, native, navigator, share, social, webshare, браузер, данными, мобильные, обмен, поделиться, сети, социалки, социальные, стандартные, файлами