渐进式WebApp开发正变得越来越强大,现在可以在Android设备上注册为共享意图。这意味着任何AndroidApp都可以通过标准的本机共享对话框直接共享到您的WebApp。
渐进式WebApp开发作为Android中的共享选项
它也可以反过来工作。您的PWA可以触发本机共享对话框并将数据发送到其他App。这使他们更接近本机App。
在本文中,我们将专注于成为共享目标。
可以将渐进式WebApp注册为Android中的共享选项吗?
很长一段时间,这不是一个选择。但随着Android 上Chrome 71的发布,Web Share Target API得到了实验性的支持。您的PWA可以显示在共享菜单中。多么酷啊?
让我们来看看您的网站进入Android共享对话框所需的内容:1.表现;2.服务人员;3.分享目标.
变得进步
第一步实际上是成为一个渐进的WebApp。当用户通过将App保存到主屏幕来“安装”App时,可以通过弹出窗口或手动方式注册共享意图。
重要说明:您的网站需要通过HTTPS提供。
渐进式WebApp开发作为Android中的共享选项
为此,您需要一个网站清单和一个注册的服务工作者。首先,让我们来看一个简单的 manifest.json。
{
"short_name": "Sharing Demo",
"name": "Web Target Sharing Demo",
"icons": [
{
"src": "/android-chrome-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/android-chrome-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"background_color": "#ffffff",
"display": "standalone",
"theme_color": "#ffffff"
}
您可以在此处详细了解所有不同的值和选项。之后,我们需要链接到HTML文件中的清单。因此,请将以下内容添加到head页面部分。
<link rel="manifest" href="/manifest.json">
App成为PWA的第二件事是具有fetch事件的注册服务工作者。它不需要做太多,只需要在那里。最简单的方法是service-worker.js使用空的fetch侦听器创建。
self.addEventListener('fetch', function(event) {});
它不会做任何事情,但它是我们现在所需要的一切。接下来,我们将在页面中注册服务工作者。
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(reg){
console.log("Service worker registered.");
}).catch(function(err) {
console.log("Service worker not registered. This happened:", err)
});
}
干得好!这并不太难,我们将一个简单的网站变成了一个渐进的网络App。如果您使用的是HTTPS,则在访问您的网站时应该可以看到“ 添加到主页”屏幕弹出窗口。
渐进式WebApp开发作为Android中的共享选项
您可以使用Chrome开发者工具检查清单,看看是否可以安装该应用。转到Application -> Manifest或使用Lighthouse并查看报告的Installable部分。
添加Web共享目标
将您的网站转换为渐进式WebApp实际上是困难的部分。注册共享意图,以便您的App将显示在本机对话框中非常简单。
您需要在manifest.json我们之前创建的行中添加以下行。
"share_target":
{
"action": "/share",
"params":
{
"title": "title",
"text": "text",
"url": "url"
}
},
每当用户通过对话框分享内容时,请求将转到/share您网站的端点,其中包含标题,文本和网址的查询参数。
注意:如果您要通过移动Chrome分享内容,则网址实际上是以文字形式显示的。
现在我们将所有内容放在一起,这是manifest.json具有注册share_target 部分的文件的最终版本。
{
"short_name": "Sharing Demo",
"name": "Web Target Sharing Demo",
"icons": [
{
"src": "/android-chrome-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/android-chrome-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"share_target":
{
"action": "/share",
"params":
{
"title": "title",
"text": "text",
"url": "url"
}
},
"start_url": "/",
"background_color": "#ffffff",
"display": "standalone",
"theme_color": "#ffffff"
}
之后,您可以使用任何方法来读取适合您需求的查询参数。像Ruby on Rails这样的服务器端:
def share
@url = params[:url]
@title = params[:title]
@text = params[:text]
end
或客户端与一些好的旧javascript:
var parsedUrl = new URL(window.location.toString());
console.log('Title shared: ' + parsedUrl.searchParams.get('name'));
console.log('Text shared: ' + parsedUrl.searchParams.get('description'));
console.log('URL shared: ' + parsedUrl.searchParams.get('link'));
广州APP开发公司一团火作为资深的APP软件开发公司有着丰富的开发经验和强大的技术团队,能为客户定制开发出适合企业需要的APP软件,用心为每位客户定制开发出满意的APP,将竭诚为您提供最专业的软件开发服务!