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 для тестирования этой функции, мне удалось сделать это после этой статьи:



Как настроить HTTPS в приложении React на локальном хосте
Если вы создали приложение с помощью create-react-app и запускаете его локально на своем компьютере, по умолчанию это…flaviocopes.com



Как только это было сделано, я мог продолжить решение проблемы с загрузкой файлов. На самом деле это было очень просто с использованием fetchAPI. Получив нужный 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.

Это окончательный результат: