Поделиться через

Интеграция прогрессивных веб-приложения с Windows Share

  • Статья

В этой статье объясняется, как интегрировать прогрессивное веб-приложение (PWA) с функцией Windows Share . Эта функция позволяет пользователям совместно использовать содержимое из одного приложения Windows в другое. PWA регистрируется в качестве целевого объекта общего ресурса для получения и обработки общих файлов в приложении.

Что такое цель общего доступа?

Share Target — это функция, представленная в Windows 8, которая позволяет приложению получать данные из другого приложения. Share Target работает как буфер обмена, но с динамическим содержимым.

Предоставление общего доступа к содержимому из PWA

Чтобы предоставить общий доступ к содержимому, PWA создает содержимое (например, текст, ссылки или файлы) и передает общее содержимое операционной системе. Операционная система позволяет пользователю решить, какое приложение они хотят использовать для получения этого содержимого. ЦС могут использовать API веб-общего доступа для активации отображения листа общего доступа в Windows. API веб-общего доступа поддерживается в Microsoft Edge и других браузерах на основе Chromium.

Полный пример предоставления общего доступа к содержимому из PWA см. в документации по Microsoft Edge.

Получение общих файлов в PWA

Для получения содержимого PWA выступает в качестве целевого объекта контента. PWA необходимо зарегистрировать в операционной системе в качестве целевого объекта для общего доступа к содержимому.

Член share_target должен содержать необходимые сведения для передачи общего содержимого в приложение системе. Рассмотрим следующую пример конфигурации манифеста share_target :

"share_target": {
  "action": "./share_target_path/?custom_param=foo",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "mapped_files",
        "accept": ["image/jpeg"]
      }
    ]
  }
},

Когда приложение выбирается пользователем в качестве целевого объекта для общего содержимого, запускается PWA. GET HTTP-запрос выполняется по URL-адресу, указанному свойствомaction. Общие данные передаются в качестве titleпараметров и texturl запросов. Выполняется следующий запрос: /handle-shared-content/?title=shared title&text=shared text&url=shared url

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

navigator.serviceWorker.register('scoped-service-worker.js',
                { scope: "./share_target_path/" })

Работник службы обрабатывает данные общего ресурса по мере необходимости, а затем выполняет запрос или может перенаправить запрос обратно из пользовательского пути. В следующем примере показано, как перенаправить запрос обратно из пользовательского пути:

self.addEventListener('fetch', (event) => {
    event.respondWith((async () => {
        // Read the shared data here, then
        // Redirect back out of the share_target_path to the actual site
        return Response.redirect(event.request.url.replace("share_target_path/", ""));
    })());
    return;
});

Дополнительные сведения см. в примере получения общего содержимого в документации по Microsoft Edge.

Замечания, связанные с быстродействием

Если обработчик получения добавляется исключительно для поддержки общего доступа, возможные проблемы с задержкой могут возникнуть, так как запросы прерваны рабочей ролью службы. Чтобы устранить эту проблему, рекомендуется задать share_target псевдо-путь и зарегистрировать рабочую роль службы, специально ограниченную этим путем. Этот подход позволяет использовать обработчик получения для целевого объекта общего ресурса без регистрации того же обработчика получения для других вызовов.

Пример приложения PWA

Пример приложения для принтера логотипа PWA на GitHub демонстрирует, как интегрировать PWA с листом Windows Share. Приложение позволяет пользователям распечатать логотип PWA на принтере. Приложение использует лист Windows Share для совместного использования логотипа с другими приложениями.

См. также