Web Share Target API — это механизм, позволяющий веб-приложению (PWA) принимать файлы или данные от других приложений через интерфейс обмена. Пользователь выбирает ваше приложение из списка доступных обработчиков, и данные передаются в виде URL-ссылки на Blob-объект. Это работает только если приложение зарегистрировано как обработчик через манифест.

Как работает Web Share Target API: механизм передачи файлов и данных

API использует стандартный интерфейс обмена данными (Web Share API). Когда пользователь нажимает кнопку «Поделиться» в другом приложении или браузере, система предлагает список установленных обработчиков. Если ваше приложение зарегистрировано как обработчик, оно появляется в этом списке.

При выборе вашего приложения данные передаются не напрямую файлом, а через URL-ссылку. Эта ссылка содержит параметры: тип данных (MIME), имя файла и сам Blob-объект. Ссылка выглядит примерно так: data:text/plain;base64,… или application/octet-stream для бинарных файлов.

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

Настройка манифеста PWA для регистрации обработчика share target

Чтобы приложение стало видимым как обработчик, его нужно явно зарегистрировать в манифесте. Добавьте свойство 'share_target' в объект 'scope' или отдельный блок.

Пример конфигурации в manifest.json:

{
"name": "Мое приложение",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"share_target": {
"action": "/receive-file",
"method": "POST"
}
}

Свойство 'action' указывает путь к странице или обработчику, который примет данные. Метод обычно POST, так как данные передаются в теле запроса. Без этой настройки приложение не появится в списке получателей при обмене файлами.

Реализация логики приема файла: чтение Blob и обработка MIME-типов

На странице, указанной в 'share_target.action', нужно обработать событие загрузки данных. Данные приходят через объект Request с методом POST.

Код для обработки:

window.addEventListener('beforeinstallprompt', (e) => { … }); // Не относится к теме

const handleShare = async (event) => {
try {
const data = await event.data;
console.log('Тип данных:', data.type);
console.log('Имя файла:', data.name);

// Получаем Blob из URL
const blob = new Blob([data]);

// Определяем тип контента
if (data.type === 'text/plain') {
const text = await blob.text();
console.log('Текстовый контент:', text);
} else if (data.type.includes('image')) {
const url = URL.createObjectURL(blob);
const img = new Image();
img.src = url;
console.log('Изображение получено');
}
} catch (error) {
console.error('Ошибка обработки:', error);
}
};

Важно проверять MIME-тип перед обработкой. Для текстовых файлов используйте .text(), для изображений — URL.createObjectURL(). Не пытайтесь читать бинарные файлы как текст, это приведет к ошибкам.

Обработка ошибок и проверка поддержки браузерами

API поддерживается в Chrome 84+, Edge 84+ и некоторых других браузерах. Firefox пока не поддерживает Web Share Target полностью. Перед использованием проверьте поддержку через User-Agent или API-метод navigator.canShare().

Если браузер не поддерживает API, пользователь не увидит ваше приложение в списке. Обработайте это gracefully: покажите сообщение «Функция обмена недоступна в этом браузере».

Также проверяйте, что данные пришли корректно. Если URL слишком длинный или Blob поврежден, обработка завершится ошибкой. Логгируйте такие случаи для отладки.

Безопасность передачи данных и ограничения API

Данные передаются через URL-параметры или тело запроса. Если файл содержит чувствительную информацию, убедитесь, что соединение защищено HTTPS. Без шифрования данные могут быть перехвачены.

API не позволяет передавать файлы напрямую между приложениями без посредничества браузера. Это ограничивает возможности, но повышает безопасность: браузер контролирует доступ к файлам и предотвращает несанкционированный доступ.

Не храните полученные файлы вечно. После обработки удалите Blob из памяти, чтобы не перегружать устройство пользователя.

Интеграция с другими методами обмена данными (например, clipboard)

Web Share Target можно комбинировать с Clipboard API. Например, пользователь может скопировать текст в буфер обмена, а затем выбрать ваше приложение как получатель через «Поделиться».

Также возможна интеграция с файловой системой устройства через File System Access API, если нужно сохранить файл на диск пользователя после приема.

Не полагайтесь только на один метод. Предложите пользователю несколько вариантов: сохранить в приложении, отправить по email или скопировать обратно.

Тестирование на разных устройствах и платформах

Тестируйте приложение на Android, iOS (через Safari) и десктопных браузерах. На iOS поддержка Web Share Target ограничена: работает только в Safari и некоторых версиях iOS 16+.

Проверяйте работу с разными типами файлов: изображения, PDF, текстовые документы. Некоторые браузеры могут не передавать MIME-тип корректно.

Используйте инструменты разработчика для анализа логов. Если приложение не появляется в списке получателей, проверьте манифест и настройки безопасности браузера.

Ограничения производительности при работе с большими файлами

Передача больших файлов через Web Share Target может замедлить процесс обмена. Браузеры ограничивают размер передаваемых данных (обычно до нескольких мегабайт). Если файл больше, обмен не состоится.

Для больших файлов используйте облачные хранилища: пользователь загружает файл в облако, получает ссылку, и ваше приложение принимает ссылку вместо самого файла.

Оптимизируйте обработку: не храните весь файл в памяти. Обрабатывайте потоками или используйте Web Workers для тяжелых операций.

Вопросы и ответы

Работает ли Web Share Target на Android?

Да, но только в Chrome и других браузерах, поддерживающих API. В стандартном приложении «Файлы» или через системный обмен данные могут передаваться по-другому.

Можно ли принимать видеофайлы через этот API?

Технически да, если MIME-тип указан корректно (например, video/mp4). Однако браузеры могут ограничивать размер или формат. Лучше тестировать на конкретных устройствах.

Что делать, если приложение не появляется в списке получателей?

Проверьте манифест: свойство share_target должно быть указано правильно. Убедитесь, что сайт работает по HTTPS и браузер поддерживает API.

По теме

{
  "name": "FileReceiver",
  "short_name": "Receiver",
  "start_url": "/",
  "display": "standalone",
  "share_target": {
    "action": "/receive-file",
    "method": "POST"
  }
}

const handleShare = async (event) => {
  try {
    const data = await event.data;
    const blob = new Blob([data]);
    console.log('Тип:', data.type, 'Имя:', data.name);
  } catch (error) {
    console.error('Ошибка:', error);
  }
};

Как реализовать Web Share Target для приема файла в PWA