Узнайте, как использовать Web Share API, чтобы сделать ваше веб-приложение более естественным.
Google и команда Chromium продвигают Интернет с помощью новых захватывающих функций, которые привносят в онлайн-мир возможности, аналогичные нативным.
Недавно они выпустили новый API, который позволяет нам обмениваться данными из нашего веб-приложения так же, как мы делаем это из наших приложений для iOS и Android. Web Share API меняет правила игры.
Web Share API позволяет веб-приложениям обмениваться ссылками, текстом и файлами с другими приложениями, установленными на устройстве, точно так же, как и собственные приложения.
Совет. Используйте Bit (Github) для совместного использования и повторного использования компонентов JavaScript в разных проектах. Работайте над общими компонентами как одна команда, чтобы вместе быстрее создавать приложения. Пусть Bit сделает всю тяжелую работу, чтобы вы могли легко публиковать, устанавливать и обновлять свои отдельные компоненты без каких-либо накладных расходов. "Нажмите сюда, чтобы узнать больше"
Использование веб-API
API веб-ресурса доступен в объекте навигатора как navigator.share(...) метод.
navigator.share({
title,
text,
url
})
.then(() => )
.catch((error) => )
Свойства объекта необязательны. Их использование зависит от контекста или целевого приложения, которым вы хотите поделиться.
Давайте посмотрим на простой пример:
У нас есть простое приложение со входами и кнопкой. Входные данные представляют собой заголовок, текст и URL-адрес данных, которыми мы хотим поделиться. Затем мы настраиваем функцию совместного использования, которая вызывает navigator.share с соответствующим объектом. Сначала мы проверили доступность метода совместного использования в объекте навигатора. Если его там нет, мы сообщаем пользователю, что его браузер не поддерживает Web Share API.
Например, если мы нажмем на Whatsapp, откроется список ваших друзей / групп, чтобы выбрать его. Если вы нажмете на один,
Whatsapp отправит выбранному другу данные, переданные в методе navigator.share (…).
Разработчики Android увидят, что этот Web Share API такой же, как Intent.ACTION_SEND в Android.
Совместное использование файлов (например, медиафайлов)
Мы можем обмениваться файлами, такими как фотографии, аудио, видео, документы (pdf, doc, ppt и т. Д.), Используя Web Share API.
Чтобы поделиться файлами, мы передаем свойство file входному объекту navigator.share:
navigator.share({
file: [...]
})
...
Свойство file будет хранить файлы blob в массиве.
Давайте посмотрим на пример:
Мы используем метод canShare для проверки доступности веб-ресурса, а также canShare для проверки поддержки типа файла:
if (navigator.canShare && navigator.canShare({
files: files
})) {
...
}
...
Мы передали файлы blobs в свойстве file, это проверяет, можем ли мы поделиться конкретным файлом, который мы выбрали из input#file.
Не все типы файлов доступны через API navigator.share (…).
Вернемся к нашему примеру, мы передали выбранный файл из input#file в массив. Мы создали буквальный объект со свойствами, которыми хотим поделиться, здесь было добавлено свойство file. Это свойство file сообщает общему веб-ресурсу, что мы предоставляем общий доступ к файлам.
Наконец, мы вызываем метод navigator.share с объектом.
Теперь, когда мы выбираем цель приложения (скажем, Whatsapp), файлы в массиве files будут отправлены выбранному нами другу.
Посмотрите мою демонстрацию Web Share API
Совместимость браузеров
Этот общий веб-ресурс поддерживается не всеми браузерами.
Браузер Chrome с версии 6.1+ поддерживает только обмен текстом и ссылками.
Браузер Chrome из 7. ~ поддерживает как совместное использование файлов, ссылок, так и текста.
Заключение
В наши браузеры все чаще добавляются собственные возможности. Какой нативный опыт вы хотите воспроизвести в веб-приложении? Оставьте свои комментарии.
