Интегрируйте PWA во встроенные пользовательские интерфейсы общего доступа с помощью Workbox.

Как заставить PWA отображаться рядом с приложениями для конкретной платформы в пользовательских интерфейсах общего доступа на системном уровне

Jeff Posnick

Joe Medley

Sam Richard

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