<b>本文讲的是Web 分享 API 赋予浏览器原生分享能力,</b>
<b></b>
多年来,Web 一直向着与移动原生应用等价的方向发展,并且新增了许多以前没有的特性。 如今,浏览器支持了其中的大部分特性,从离线模式到用 Service Workers 增强体验以及 Geolocation 和 NFC。
但有一种已经在移动应用上广泛使用的重要功能仍然缺失,那就是分享页面、文章或一些特定数据的功能。
Web 分享 API 是填补这种缺失的第一步,它将把原生的分享能力带到 Web 端。
前几年,在移动 Web 应用上尝试实现了一些 API/协议 能够实现分享功能:
2)也有许多自定义 URL 的解决方法:
所以现在的情况是,没有 API 能够支持 Web 上简单的内容分享功能。 但是用户需要一个快速分享的方式,能够方便地把 网址/文本/图片 等数据分享到他们喜欢的 app 和服务上。
现在的能提供的是:
针对特定服务的分享按钮(将导致众多服务和内容整合商仅提供分享按钮的 API)
许多浏览器和应用程序提供自己特定的分享按钮。
但仍然没有从 Web 应用程序分享内容的简便方法。
正如其他大多数分享 API 一样,你能够分享的数据包括 <code>title</code>, <code>url</code> 和 <code>text</code>(三者至少一项为必填项)。 下面是允许分享图片数据或/和文件对象的方案。
如下所示:
<a href="https://github.com/mgiuca/web-share/blob/master/docs/mocks/README.md">image credits</a>
如你所见,这个 API 相当简单,并且目前为止接收至少一个以下字段:
<code>title</code> (string): 被分享文档的标题(可能会被处理程序忽略)。
<code>text</code>(string):形成分享消息主体的文本。
<code>url</code>(string):被分享资源的 URL / URI 地址。
这个方法返回一个 Promise。
如果用户选择了目标应用程序,它会被 resolve,同时目标应用成功接收数据。
Promise 被 reject 的情况有如下几种:
分享的是不可用数据(例如:传递错误字段)
用户取消对话框,或者没有目标应用
数据不能被传递到目标应用
网站上传递到 <code>navigator.share</code> 的所有字段通常都有许多预定义的值。
我在下面的 demo 中使用了这个方法:
<a href="https://github.com/xitu/gold-miner/blob/master/demos/web-share-api">Demo</a>
这里有一个视频示范如何使用它
(点击分享按钮
tweet
在 Twitter 上新增的 tweet):
绝大多数情况下,如果你想拥有从任何页面分享数据的能力,但是并不确定是 Open Graph 还是其他标签, 这里有一个通用方案:
如果没有提供规范 link,那么分享的就是默认 URL。
最新建议,如果不可用的话(浏览器不支持,设备没有分享功能等),别忘了禁用或撤销分享功能。
现在,Web 分享 API 在 Android 上稳定的 Chrome 版本中已经可用。
要启用 Web 分享 API,你需要:
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfO0_ptFl8r8G0UFhT0xhV17eabG-erUWBDiKSRDTqEZ_9ULQ/viewform">登录并获取试用 token</a>
24 小时内,你将收到一封邮件,里面包含试用 Token 和如何在 Web 应用中使用的说明
在 header 中或者直接在网页的 HTML,全局任何你想使用这个 API 的地方加上下面这段代码
Web 分享试用在 Chrome 55 上引入了,将支持到 2017 年 4 月,在那之后也许会在浏览器中默认开启。
总结一下启用 Web 分享 API 的步骤:
网站在 HTTPS 环境下
把 origin trial 相关的 header/meta 加入到页面上
用户行为(点击,触摸)触发并调用 <code>navigator.share()</code>
随着 Web 的发展,移动 Web 与原生应用之间的界限越来越模糊,Web 分享 API 就是革命的下一步,如今你就可以使用了。
未来的工作将围绕跨平台 API 的实现,图片数据的提供或者文件(二进制对象)的分享。
同时,不仅限于发送,关于 Web 应用的分享接收也有一个讨论。
<b>原文发布时间为:2017年3月10日</b>
<b>本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。</b>