Comment utiliser l'API de partage Web

Il semble avoir été obscurci depuis Chrome 61 pour Android a lancé pour la première fois son API de partage Web. En fait, il fournit un moyen de déclencher une boîte de dialogue de partage native pour l'appareil (le bureau si vous utilisez Safari) lors du partage du contenu directement à partir d'un site Web ou d'une application Web (comme un lien ou une carte de contact).

Bien que les utilisateurs puissent déjà partager du contenu à partir des pages Web de manière native, ils doivent trouver l'option dans le menu du navigateur, et même alors, il n'y a aucun contrôle sur le contenu partagé. L'introduction de cette API permet aux développeurs d'ajouter des capacités de partage aux applications ou aux sites Web en tirant parti des capacités de partage de contenu natives sur les appareils utilisateur.

Cette méthode présente de nombreux avantages par rapport à la méthode traditionnelle:

• Les utilisateurs ont une gamme plus large d'options de partage de contenu que le nombre limité d'options que vous pourriez avoir dans votre implémentation DIY.
• En annulant des scripts tiers de diverses plateformes sociales, vous pouvez réduire le temps de chargement des pages.
• Vous n'avez pas besoin d'ajouter une série de boutons à différents sites de médias sociaux et e-mails. L'option de partage native de l'appareil est déclenchée avec un seul bouton.
• Les utilisateurs peuvent personnaliser leurs cibles partagées préférées sur leurs appareils sans se limiter à des options prédéfinies.

Instructions de support du navigateur

Avant d'entrer dans les détails du fonctionnement de l'API, résolvons le problème du support du navigateur. Pour être honnête, le support du navigateur n'est pas idéal à l'heure actuelle. Il ne fonctionne qu'avec Chrome pour Android et Safari (Desktop et iOS).

Ce navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette version et plus tard.

Bureau

PC mobile / tablette

Mais ne vous découragez pas, n'adoptez pas cette API sur votre site Web. Comme vous le verrez, la mise en œuvre d'un repli vers un navigateur qui ne le prend pas en charge est très facile.

Certaines exigences pour l'utilisation de l'API

Avant de pouvoir adopter cette API sur votre propre projet Web, il y a deux choses à noter:

• Votre site Web doit être fourni via HTTPS. Pour le développement local, l'API fonctionne également lorsque votre site fonctionne sur localhost.
• Pour éviter les abus, l'API ne peut déclencher qu'en réponse à certaines actions des utilisateurs, telles que les événements de clic.

Exemple

Pour démontrer comment utiliser cette API, j'ai préparé une démo qui fonctionne essentiellement la même chose que mon site Web. Voici à quoi ça ressemble:

Actuellement, après avoir cliqué sur le bouton Partager, une boîte de dialogue apparaîtra affichant certaines options pour partager le contenu. Voici la partie du code qui nous aide à y parvenir:

 <code>shareButton.addEventListener('click', event => { shareDialog.classList.add('is-open'); });</code>

Passons à convertir cet exemple en utilisant l'API de partage Web. La première chose à faire est de vérifier si l'API est en effet prise en charge par le navigateur de l'utilisateur, comme indiqué ci-dessous:

 <code>if (navigator.share) { // 支持Web 共享API } else { // 回退}</code>

L'utilisation d'une API de partage Web est aussi simple que d'appeler navigator.share() et de passer un objet qui contient au moins l'un des champs suivants:

• url : une chaîne représentant l'URL à partager. Il s'agit généralement d'une URL de document, mais pas nécessairement. Vous pouvez partager n'importe quelle URL via l'API de partage Web.
• title : Une chaîne représentant le titre à partager, généralement document.title .
• text : tout texte que vous souhaitez inclure.

Voici à quoi il ressemble dans l'application réelle:

 <code>shareButton.addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'WebShare API Demo', url: 'https://codepen.io/ayoisaiah/pen/YbNazJ' }).then(() => { console.log('Thanks for sharing!'); }) .catch(console.error); } else { // 回退} });</code>

À ce stade, une fois le bouton de partage cliqué dans le navigateur pris en charge, le sélecteur natif remplira toutes les cibles possibles que les utilisateurs peuvent partager des données. L'objectif peut être une application de médias sociaux, un e-mail, une messagerie instantanée, des messages texte ou une autre cible partagée enregistrée.

L'API est basée sur la promesse, vous pouvez donc joindre la méthode .then() pour afficher le message réussi partagé et utiliser .catch() pour gérer l'erreur. Dans un scénario réel, vous souhaiterez peut-être utiliser l'extrait de code suivant pour obtenir le titre et l'URL de la page:

 <code>const title = document.title; const url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;</code>

Pour les URL, nous vérifions d'abord si la page a une URL canonique, et si oui, utilisons cette URL. Sinon, nous obtenons href de document.location .

C'est une bonne idée de fournir un secours

Dans les navigateurs qui ne prennent pas en charge l'API de partage Web, nous devons fournir un mécanisme de secours afin que les utilisateurs de ces navigateurs puissent toujours obtenir des options de partage.

Dans notre cas, nous avons un dialogue pop-up avec certaines options pour partager du contenu, et les boutons de notre démo ne sont pas réellement liés à n'importe où, car, eh bien, c'est juste une démo. Cependant, si vous voulez savoir comment créer votre propre lien pour partager une page Web sans script tiers, l'article d'Adam Coti est un excellent point de départ.

Ce que nous voulons faire, c'est afficher une boîte de dialogue de secours pour les utilisateurs de navigateurs qui ne prennent pas en charge l'API de partage Web. C'est aussi simple que de déplacer le code qui ouvre une boîte de dialogue partagée dans else :

 <code>shareButton.addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'WebShare API Demo', url: 'https://codepen.io/ayoisaiah/pen/YbNazJ' }).then(() => { console.log('Thanks for sharing!'); }) .catch(console.error); } else { shareDialog.classList.add('is-open'); } });</code>

Maintenant, peu importe le navigateur que l'utilisateur utilise, tous les utilisateurs sont couverts. Voici une comparaison de la façon dont le bouton de partage se comporte sur deux navigateurs mobiles, l'un prend en charge l'API de partage Web et l'autre ne le fait pas:

Essayez-le! Utilisez des navigateurs qui prennent en charge le partage Web et les navigateurs non pris en charge. Il devrait être similaire à la démonstration ci-dessus.

Résumer

Cela couvre presque toutes les bases que vous devez connaître sur l'API de partage Web. En y mettant en œuvre sur votre site Web, les visiteurs peuvent plus facilement partager votre contenu via divers réseaux sociaux, contacts et autres applications natives.

Il convient également de noter que si votre application Web répond aux critères d'installation progressive de l'application Web et est ajoutée à l'écran d'accueil de l'utilisateur, vous pouvez l'ajouter en tant que cible partagée. Il s'agit d'une fonctionnalité que vous pouvez lire sur l'API Target de partage Web sur les développeurs Google.

Bien que la prise en charge du navigateur soit déchiquetée, les secours sont faciles à mettre en œuvre, donc je ne pense pas qu'il y ait une raison pour laquelle plus de sites Web ne l'adoptent pas. Si vous souhaitez en savoir plus sur cette API, vous pouvez lire la spécification ici.

Avez-vous utilisé l'API de partage Web? Veuillez partager votre expérience dans les commentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!