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

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

Jeff Posnick

Joe Medley

Sam Richard

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

В этой статье мы будем использовать 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 кэширования или IndexedDB .

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

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

Заключение

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