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

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

Jeff Posnick

Joe Medley

Sam Richard

API Web Share Target позволяет отображать ваше Progressive Web App в системном списке общего доступа пользователя после его установки. Хотя это отлично работает при наличии сервера, готового принять запрос, без него запустить его гораздо сложнее.

В этой статье мы используем Workbox , набор JavaScript-библиотек для добавления поддержки автономного режима в веб-приложения, чтобы создать URL-адрес для общего доступа, который будет полностью находиться внутри вашего сервис-воркера . Это позволяет статическим сайтам и одностраничным приложениям служить целями общего доступа без использования выделенной конечной точки сервера.

На той же странице

Если вы не знакомы с принципами работы Web Share Target, статья «Получение общих данных с помощью API Web Share Target» даст вам подробное представление. Вот краткий обзор.

Реализация функциональности веб-приложения как цели для общего доступа состоит из двух этапов. Во-первых, обновите манифест веб-приложения, указав, что вы хотите, чтобы приложение стало целью для общего доступа после установки. В следующем примере общие ресурсы направляются на 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
};

Затем вы можете делать с этими файлами всё, что захотите. Вы можете кэшировать их. Вы можете отправить их куда-нибудь с помощью запроса на выборку. Вы даже можете использовать другие параметры манифеста, например, отобразить страницу с параметрами запроса для других общих элементов или сохранить данные и указатели на носители в API Cache Storage или IndexedDB .

Вы можете опробовать его на примере приложения Fugu Journal и увидеть реализацию его сервисного работника в исходном коде .

Одна из распространённых вещей — приостановить использование общих ресурсов до тех пор, пока не появится более качественное сетевое соединение. Workbox также поддерживает периодическую фоновую синхронизацию .

Заключение

API Share Target — это простой способ глубоко интегрировать ваше прогрессивное веб-приложение с устройствами пользователей, ставя его на один уровень с платформенно-зависимыми приложениями в решении критически важной задачи обмена контентом между приложениями. Однако для этого обычно требуется сервер, доступный для получения запроса. Используя Workbox для создания маршрута к целевому ресурсу непосредственно в сервис-воркере, вы освобождаете свое приложение от этого ограничения, позволяя Share Target работать с приложениями в автономном режиме и без бэкенда.

Фото Элейн Касап на Unsplash