您的当前位置:首页 > 新闻资讯 > 行业新闻

渐进式WebApp开发作为Android中的共享选项

发布时间:2019-03-25    浏览: 176    

"

导读:渐进式WebApp开发正变得越来越强大,现在可以在Android设备上注册为共享意图。这意味着任何AndroidApp都可以通过标准的本机共享对话框直接共享到您的WebApp。

渐进式WebApp开发正变得越来越强大,现在可以在Android设备上注册为共享意图。这意味着任何AndroidApp都可以通过标准的本机共享对话框直接共享到您的WebApp。
 
渐进式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开发
渐进式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开发
渐进式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,将竭诚为您提供最专业的软件开发服务!

CONTACTS
联系我们

填写您的项目信息

地址:广州市海珠区保利世界贸易中心E座

客服:18819306332  手机:

QQ:3572350570

邮箱:afire@ythwl.com

Copyright2013-2019 广东敢想数字互联网科技有限公司 版权所有 粤ICP备18155283号

敢想数字服务热线

138-2226-9297