如何使您的 PWA 显示在系统级共享界面中特定于平台的应用旁边
Web Share Target API 可用来显示 渐进式 Web 应用 (Progressive Web App) 用户的系统级共享工作表。如果有服务器的话,这种做法也非常棒 否则将更难处理
在本文中,我们将使用 Workbox:一组 JavaScript 用于向网络应用添加离线支持的库,以创建共享目标网址 它完全位于您的 Service Worker 中。这样,静态网站和 单页应用可用作没有专用服务器端点的共享目标。
<ph type="x-smartling-placeholder">在同一页面上
如果您不熟悉 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 中 API 或 IndexedDB。
您可以在示例应用 Fugu 中试用 Journal 及其 Service Worker 在源代码中 代码。
一种常见的做法是保留共享资源,直至改善网络 连接可用。Workbox 还支持定期背景 同步。
总结
Share Target API 可让您轻松深度集成渐进式网页应用 将应用集成到用户的设备中,使其与针对具体平台的应用相媲美 在应用之间共享内容的关键任务。但这样做通常需要 可接收请求的服务器。利用 Workbox 创建共享 目标路线,则您的应用中没有此类 限制条件,允许 Share Target 在离线状态下对应用运行 后端。
摄影:Elaine Casap,拍摄于 Unsplash 网站