Web Share API позволяет открыть собственный механизм обмена в PWA.
Для недавнего проекта PWA, над которым я работал, мне пришлось делиться изображениями, полученными из API, через Web Share API. У меня не было опыта в этой теме, и поиск в Google тоже не помог, поэтому я решил сделать этот небольшой туториал.
Для работы Web Share API вам необходимо иметь следующее:
Веб-ресурс имеет следующие возможности и ограничения:
1. Его можно использовать только на сайте, поддерживающем HTTPS.
2. Он должен вызываться в ответ на действие пользователя, такое как щелчок. Вызов через обработчик
onload
невозможен.
3. Он может делиться URL-адресами, текстом или файлами.
4. По состоянию на середину 2020 года он доступен только в Safari и на Android в форках Chromium. Подробности смотрите в MDN.
Первая проблема, с которой я столкнулся, заключалась в обслуживании моего локального приложения React на HTTPS для тестирования этой функции, мне удалось сделать это после этой статьи:
Как только это было сделано, я мог продолжить решение проблемы с загрузкой файлов. На самом деле это было очень просто с использованием fetch
API. Получив нужный URL-адрес изображения, вызовите API выборки и используйте ответ для создания: сначала BLOB-объекта, а затем с помощью этого BLOB-объекта объекта File.
const urlToObject = async (url) => { const response = await fetch(url); const blob = await response.blob(); const file = new File([blob], ‘image.jpg’, {type:blob.type}); return file; };
Завершив это приложение, мы можем создать кнопку React Web Share API.
Это окончательный результат: