Web上的ShareAPI

我认为WebShareAPI非常酷，简而言之，它利用了您正在使用的平台（如果支持）的本机共享功能。我喜欢这个：远不止这些：为什么？WebShareAPI只是几行代码。简单的！没有图像，没有重量级的JavaScript或iframe。用户看到的UI是为他们的平台定制的，甚至可能由他们定制，以包含他们想要的内容。干得好，网络标准。但并非所有地方都支持它。例如，我在Chrome中写这篇博文，它在桌面Chrome中不起作用，但它在桌面Safari中有效，所以如果我要使用它，我宁愿把按钮放在页面之前先测试是否支持。非常简单：if(navigator.share){}下面是一个例子，如果支持API，我在文章上放置了一个，省略了HTML和CSS。JavaScript执行了一些奇特的技巧来获取文章的标题和第一段以在API中使用。我喜欢JeremyKeith在页面上所做的事情：if(navigator.share){navigator.share({title:document.querySelector('title').textContent,text:document.querySelector('meta[name="description"]').getAttribute('content'),url:document.querySelector('link[rel="canonical"]').getAttribute('href')});}你也可以将字符串传递给这些值，这只是展示如何在任何页面上动态地做一些工作。Jeremy还一直提倡WebShareAPI的JavaScript可选版本，他认为它可以像这样工作。然后，指定标题和文本：使用逗号对我来说有点时髦，如果标题包含逗号怎么办？指定URL怎么样？我们可以将它们全部分成属性吗？我想我知道Jeremy会说什么：这是一个简单的声明式版本，如果您想更改默认行为，这就是JavaScript的用武之地。如何使用WebShareAPI它首次在Chrome61forAndroid中引入。本质上，它提供了一种在直接从网站或Web应用程序共享内容（例如链接或名片）时触发设备（或桌面，如果使用Safari）本机共享对话框的方法。虽然用户已经可以在网络上以本地方式共享内容，但他们必须在浏览器菜单中找到此选项，而且即使那样也无法控制共享的内容。此API的引入允许开发人员利用用户设备上的本机内容共享功能，并向应用程序或网站添加共享功能。与传统方法相比，此方法具有许多优势：与您在DIY实施中可能拥有的有限内容相比，用户将拥有广泛的内容共享选项。您可以通过删除各种社交平台上的第三方脚本来缩短页面加载时间。无需为不同的社交媒体网站和电子邮件添加一堆按钮，一个按钮就足以触发设备的本机共享选项。用户可以在他们的设备上自定义他们最喜欢的共享目的地，而不是局限于预定义的选项。关于浏览器支持的注意事项在介绍API如何工作的细节之前，让我们先了解一下浏览器支持。说实话，目前的浏览器支持度不高。它仅适用于ChromeforAndroid和Safari（桌面和iOS）。但不要因此而阻止您在您的网站上采用此API。正如您将看到的，实现支持不支持浏览器的回退很容易。使用它的一些要求在您自己的Web项目中采用此API之前，需要注意两件事：您的网站必须通过HTTPS提供服务。为了促进本地开发，当您的站点通过本地主机运行时，也可以使用该API。为防止滥用，API只能在响应某些用户操作（例如点击事件）时被触发。这是一个示例为了演示如何使用此API，我准备了一个演示，它的工作原理与我网站上的基本相同。本例采用DIY方式自定义分享对话框。此时，单击共享按钮后，会弹出一个对话框，显示用于共享内容的几个选项，下面是帮助我们实现此目的的代码部分：shareButton.addEventListener('click',event=>{shareDialog.classList.add('is-open');});让我们继续示例转换以改为使用Web共享API。首先要做的是检查用户的浏览器是否真的支持该API，如下所示：if(navigator.share){//WebShareAPIissupported}else{//Fallback}使用WebShareAPI就像调用navigator.share()方法并且就像传递至少具有以下字段之一的对象一样简单。url：表示要共享的URL的字符串。通常是文档的URL，但不是必需的。您可以通过WebShareAPI共享任何URL。title：一个字符串，表示要共享的标题，通常是document.title。文本：您要包含的任何文本。实际情况如下：shareButton.addEventListener('click',event=>{if(navigator.share){navigator.share({title:'WebShareAPIDemo',url:'https://codepen.io/ayoisaiah/pen/YbNazJ'}).then(()=>{console.log('Thanksforsharing!');}).catch(console.error);}else{//fallback}});此时，一旦在支持的浏览器中点击分享按钮，原生选择器就会弹出所有可能的用户可以分享数据的目标。目标可以是社交媒体应用程序、电子邮件、即时消息、短信或其他已注册的共享目标。该API基于Promise，因此您可以附加一个.then()方法以在共享成功时显示成功消息，并使用.catch()处理错误。.在实际情况下，您可能希望使用以下代码片段获取页面的标题和URL：consttitle=document.title;consturl=document.querySelector('link[rel=canonical]')?document.querySelector('链接[rel=规范]').href:document.location.href;对于URL，我们首先检查页面是否具有规范URL，如果有，则使用它。否则，我们从document.location中获取href。提供回退是个好主意。在不支持WebShareAPI的浏览器中，我们需要提供一种回退机制，以便那些浏览器上的用户仍然可以使用一些共享选项。在上面的DIY示例中，我们弹出一个对话框，其中包含一些用于共享内容的选项，并且演示中的按钮实际上并没有链接到任何地方，因为它是一个演示。但是，如果您想了解如何在不使用第三方脚本的情况下创建自己的链接来共享网页，AdamCoti的文章是一个不错的起点。我们要做的是在不支持WebShareAPI的浏览器上向用户显示一个回退对话框。这就像将打开共享对话框的代码移动到else块一样简单：shareButton.addEventListener('click',event=>{if(navigator.share){navigator.share({title:'WebShareAPIDemo',url:'https://codepen.io/ayoisaiah/pen/YbNazJ'}).then(()=>{console.log('Thanksforsharing!');}).catch(console.error);}else{shareDialog.classList.add('is-open');}});现在，无论浏览器如何，所有用户都将被覆盖。下面是共享按钮在两种移动浏览器上的行为方式的比较，一种支持WebShareAPI，另一种不支持。尝试一下！使用支持Web共享的浏览器和不支持的浏览器。它应该与上面的演示类似。这几乎涵盖了您需要了解的有关WebShareAPI的基本知识。通过在您的网站上实施它，访问者可以更轻松地与更广泛的社交网络上的联系人和其他本机应用程序共享您的内容。还值得注意的是，如果您的Web应用程序符合WPAWeb应用程序安装标准，您可以将其添加为共享目标并将其添加到用户的主屏幕。WebShareTargetAPI的这个特性，你可以在GoogleDevelopers上了解它。虽然浏览器支持不多，但回退很容易实现，所以我认为没有理由不这样做。