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

如何使您的 PWA 显示在系统级共享界面中特定于平台的应用旁边

Web Share Target API 可用来显示 渐进式 Web 应用 (Progressive Web App) 用户的系统级共享工作表。如果有服务器的话,这种做法也非常棒 否则将更难处理

在本文中,我们将使用 Workbox:一组 JavaScript 用于向网络应用添加离线支持的库,以创建共享目标网址 它完全位于您的 Service Worker 中。这样,静态网站和 单页应用可用作没有专用服务器端点的共享目标。

<ph type="x-smartling-placeholder">
</ph> 显示“分享方式”的 Android 手机抽屉式导航栏。 <ph type="x-smartling-placeholder">
</ph> 已安装 PWA 的系统级共享目标选择器 Share Target Test选项。

在同一页面上

如果您不熟悉 Web Share Target 的工作原理,请参阅通过 Web Share 接收分享的数据 目标 API 提供了详细的介绍。 以下是快速回顾。

实现网络共享目标功能分为两个部分。首先, 更新您的 Web 应用清单,表明您希望自己的应用可供分享 目标。以下示例将共享定向到 /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"]
      }
    ]
  }
}

Service Worker 与 Workbox 共享目标

虽然通常由服务器端点处理,但对于分享,您也能做一个绝妙的技巧 目标是直接在 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
};

然后,您可以随意对这些文件执行任何操作。您可以缓存它们。您 可以通过提取请求将它们发送到某个位置您甚至可以使用 可能会为另一个对象提供 共享条目,或将指向媒体的数据和指针存储在 Cache Storage 中 APIIndexedDB

您可以在示例应用 Fugu 中试用 Journal 及其 Service Worker 在源代码中 代码

一种常见的做法是保留共享资源,直至改善网络 连接可用。Workbox 还支持定期背景 同步

总结

Share Target API 可让您轻松深度集成渐进式网页应用 将应用集成到用户的设备中,使其与针对具体平台的应用相媲美 在应用之间共享内容的关键任务。但这样做通常需要 可接收请求的服务器。利用 Workbox 创建共享 目标路线,则您的应用中没有此类 限制条件,允许 Share Target 在离线状态下对应用运行 后端。

摄影:Elaine Casap,拍摄于 Unsplash 网站