如何在系统级共享界面中让您的 PWA 显示在平台专用应用旁边
借助 Web Share Target API,您可以在安装渐进式 Web 应用后,在用户的系统级分享表单中显示该应用。虽然如果您有可用于接收请求的服务器,这是很好的选择,但如果没有,就很难工作。
在本文中,我们将使用 Workbox(一组用于向 Web 应用添加离线支持的 JavaScript 库)来创建完全位于 Service Worker 内的共享目标网址。这样,无需专用服务器端点,即可将静态网站和单页应用用作共享目标。
在同一页面上
如果您不熟悉 Web Share Target 的工作原理,请参阅使用 Web Share Target API 接收共享数据一文,其中详细介绍了该服务。简要回顾一下。
实现网络共享目标功能分为两部分。首先,更新您的 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"]
}
]
}
}
…
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 API 或 IndexedDB 中存储数据和指向媒体的指针。
您可以在示例应用 Fugu Journal 上试用该程序,并在其源代码中查看其 Service Worker 实现。
一种常见的做法是保留共享资源,直到有更好的网络连接为止。Workbox 还支持定期后台同步。
总结
Share Target API 是一种将渐进式 Web 应用深度集成到用户设备中的简单方法,使其与平台专用应用相当,可以执行在应用之间共享内容的关键任务。但这样做通常需要有可用的服务器来接收请求。通过利用 Workbox 直接在 Service Worker 中创建共享目标路由,您的应用就不受此限制约束,允许共享目标在离线时和没有后端的情况下运行。
照片由 Elaine Casap 拍摄,来源:Unsplash 用户