使用 Workbox 将 PWA 集成到内置共享界面中

如何让 PWA 在系统级共享界面中显示在平台专用应用旁边

Jeff Posnick
Joe Medley
Joe Medley
GitHub
Sam Richard

借助 Web Share Target API，您可以在用户安装 渐进式 Web 应用后，在用户 的系统级共享表单中显示该应用。如果您有可用于接收请求的服务器，此 API 的效果会很好，但如果没有，则很难让其正常运行。

在本文中，我们将使用 Workbox（一组用于向 Web 应用添加离线支持的 JavaScript 库）创建一个完全位于 Service Worker内的共享目标网址 。这样，静态网站和单页应用就可以充当共享目标，而无需专用服务器端点。

Android 手机上打开了“通过以下方式分享”抽屉。
系统级共享目标选择器，其中安装的 PWA（名为 Share Target Test）作为选项。

本页内容

如果您不熟悉 Web Share Target 的工作原理，请参阅使用 Web Share Target API 接收共享数据，其中详细介绍了相关信息。 下面是简要回顾。

实现 Web Share Target 功能需要完成两个部分。首先， 更新您的 Web 应用清单，以表明您希望应用在安装后成为共享 目标。以下示例通过 POST 请求将共享内容定向到 /share 网址。它以多部分表单的形式进行编码，其中标题称为 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 的 Service Worker 共享目标

虽然共享目标通常由服务器端点处理，但您可以采取一种巧妙的方法，即直接在 Service Worker 中注册路由来处理请求。这样，您的应用就可以在没有后端的情况下成为共享目标。

您可以在 Workbox 中 注册由 Service Worker 处理的路由。首先，从 'workbox-routing' 中导入 registerRoute。请注意，它已注册到 /share 路由，该路由与示例 Web 应用清单中列出的路由相同。作为响应，它会调用 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
};

然后，您可以对这些文件执行任何操作。您可以缓存它们。您可以使用 fetch 请求将它们发送到某个位置。您甚至可以使用其他 清单选项，例如，使用一些查询参数为其他 共享项提供网页，或者将数据和指向媒体的指针存储在 Cache Storage API 或 IndexedDB 中。

您可以试用示例应用 Fugu Journal，并在其 Service Worker 实现中查看其源代码。

您可能会执行的一项常见操作是保留共享资源，直到有更好的网络连接可用。Workbox 还支持 定期后台 同步。

总结

借助 Share Target API，您可以轻松地将渐进式 Web 应用深度集成到用户的设备中，使其在应用之间共享内容的关键任务方面与平台专用应用不相上下。但这样做通常需要有可用于接收请求的服务器。通过利用 Workbox 直接在 Service Worker 中创建共享目标路由，您的应用不受此限制，从而允许 Share Target 在应用离线且没有后端的情况下正常运行。