Web Share API 初体验 :浏览器原生设备分享功能

阅读数:2684 2019 年 8 月 1 日 08:00

Web Share API 初体验 :浏览器原生设备分享功能

Web Share API 提供了浏览器原生设备分享功能。该 API 最初是为移动设备设计的,但现在也可用在 OSX 上(使用 Safari 浏览器)。

Web Share API 仅包含一个 navigator.share() 方法,该方法接收一个具有三个属性(URL、文本和标题)的对象作为参数,返回值是一个 Promise 异步对象,该对象在用户完成分享操作后结束。

在调用该 API 后,将会打开一个系统原生分享窗口,并向用户展示可用的分享目标应用程序列表。

对于网站来说,使用原生分享程序是一种显著的优势,因为它暴露给用户的是一个熟悉的界面,无需登录多个社交网络,并且能提供之前浏览器无法使用的新分享目标程序。

为了避免滥用,该 API 确实有一些限制。网站必须通过 HTTPS 进行访问,分享行为必须由用户操作来触发(例如点击鼠标)。

一个简单的分享操作过程如下所示:

复制代码
document.querySelector('.sharebtn').addEventListener('click', shareSite)
function shareSite() {
navigator.share({
title: document.title,
text: 'Hello World',
url: 'https://mewebsite.com',
})
.then(() => {
console.log('Share completed successfuly')
})
.catch((error) => { console.log(`share failed: ${error}`) });
}

当前版本的 API 仅包含分享 URL 的功能。在 Web Share API 2 发布时,还将添加其他特性,比如和其他应用程序共享文件。

目前,Web Share API 2 正在开发当中,可以在 Chrome S tatus 网站上查看它的最新进展。

原文链接:

First Look at the Web Share API

收藏

评论

微博

用户头像
发表评论

注册/登录 InfoQ 发表评论