通过

将渐进式 Web 应用与 Windows 共享集成

  • 项目

本文介绍如何将渐进式 Web 应用 (PWA) 与 Windows 共享功能集成。 此共享功能允许用户将内容从一个 Windows 应用共享到另一应用。 PWA 会注册为共享目标，以便接收和处理此应用中的共享文件。

什么是共享目标？

共享目标是在 Windows 8 中引入的一项功能，它允许某一应用从另一应用接收数据。 共享目标的工作方式类似于剪贴板，但它具有动态内容。

从 PWA 共享内容

为了共享内容，PWA 会生成内容（如文本、链接或文件），然后将共享内容移交给操作系统。 操作系统允许用户决定其想用于接收该内容的应用。 PWA 可使用 Web 共享 API 来触发在 Windows 中显示共享工作表。 Microsoft Edge 和其他基于 Chromium 的浏览器均支持 Web 共享 API。

有关如何从 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。 系统会对 action 属性指定的 URL 发出 GET HTTP 请求。 共享数据将作为 title、text 和 url 查询参数进行传递。 系统将发出以下请求：/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 应用

GitHub 上的 PWA 徽标打印机示例应用演示了如何将 PWA 与 Windows 共享工作表集成。 此应用允许用户将 PWA 徽标打印到打印机。 此应用使用 Windows 共享工作表与其他应用共享该徽标。

另请参阅