Как заставить PWA отображаться рядом с приложениями для конкретной платформы в пользовательских интерфейсах общего доступа на системном уровне
API-интерфейс Web Share Target позволяет отображать прогрессивное веб-приложение на общем листе системного уровня пользователя после его установки. Хотя это прекрасно работает, если у вас есть доступный сервер для приема запроса, гораздо сложнее начать работу, если у вас его нет.
В этой статье мы будем использовать Workbox , набор библиотек JavaScript для добавления автономной поддержки в веб-приложения, чтобы создать общий целевой URL-адрес, который полностью находится внутри вашего сервис-воркера . Это позволяет статическим сайтам и одностраничным приложениям служить целями общего доступа без выделенной конечной точки сервера.
На той же странице
Если вы не знакомы с тем, как работает Web Share Target, получение общих данных с помощью Web Share Target API даст вам более подробное представление. Вот краткий обзор.
Реализация целевой функциональности веб-ресурсов состоит из двух частей. Сначала обновите манифест вашего веб-приложения, указав, что вы хотите, чтобы ваше приложение было целью общего доступа после установки. В следующем примере общие ресурсы направляются на URL-адрес /share
через запрос POST
. Он закодирован как составная форма, где заголовок называется name
, текст называется description
, а изображения JPEG называются photos
.
…
"share_target": {
"action": "/share",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"files": [
{
"name": "photos",
"accept": ["image/jpeg", ".jpg"]
}
]
}
}
…
Сервисный работник делится целями с Workbox
Обычно этот маршрут обрабатывается конечной точкой сервера, но для общего доступа можно использовать хитрый трюк — зарегистрировать маршрут непосредственно в сервис-воркере для обработки запроса. Это позволит вашему приложению стать объектом общего доступа без бэкэнда.
Вы делаете это в Workbox , регистрируя маршрут, который обрабатывается вашим сервисным работником. Начните с импорта registerRoute
из 'workbox-routing'
. Обратите внимание, что он зарегистрирован для маршрута /share
, того же, который указан в примере манифеста веб-приложения. В ответ он вызывает shareTargetHandler()
.
import { registerRoute } from 'workbox-routing';
registerRoute(
'/share',
shareTargetHandler,
'POST'
);
Функция shareTargetHandler()
является асинхронной и принимает событие, ожидает данных формы, а затем извлекает из них медиафайлы.
async function shareTargetHandler ({event}) {
const formData = await event.request.formData();
const mediaFiles = formData.getAll('media');
for (const mediaFile of mediaFiles) {
// Do something with mediaFile
// Maybe cache it or post it back to a server
});
// Do something with the rest of formData as you need
// Maybe save it to IndexedDB
};
Затем вы можете делать с этими файлами все, что захотите. Вы можете кэшировать их. Вы можете отправить их куда-нибудь с запросом на получение. Вы даже можете использовать другие параметры манифеста, например, обслуживать страницу с некоторыми параметрами запроса для других общих элементов или сохранять данные и указатели на носители в Cache Storage API или IndexedDB .
Вы можете опробовать его в примере приложения Fugu Journal и увидеть реализацию сервис-воркера в исходном коде .
Одна из распространенных вещей, которую вы можете сделать, — это удерживать общие ресурсы до тех пор, пока не станут доступны лучшие сетевые соединения. Workbox также поддерживает периодическую фоновую синхронизацию .
Заключение
Share Target API — это простой способ глубоко интегрировать ваше прогрессивное веб-приложение в устройства пользователя, ставя его в один ряд с приложениями для конкретной платформы в решении важной задачи обмена контентом между приложениями. Но для этого обычно требуется доступный сервер для приема запроса. Используя Workbox для создания целевого маршрута общего доступа непосредственно в сервис-воркере, ваше приложение освобождается от этого ограничения, позволяя Share Target работать с приложениями в автономном режиме и без серверных частей.
Фото Элейн Касап на Unsplash