Fermer

juillet 26, 2021

Utilisation de l'API Web Share React


L'API Web Share permet aux utilisateurs de partager des ressources à partir du navigateur à l'aide de fonctionnalités natives. Essayons un autre mécanisme d'affichage et de partage modal.

Vous avez probablement partagé du contenu sur votre appareil avec vos contacts ou avec d'autres applications. Cela peut se faire par copier/coller, en utilisant la fonction de partage dans les applications Web qui ouvre une nouvelle fenêtre ou la capacité de partage native des appareils mobiles.

L'UX pour partager des ressources d'une application à l'autre dans un système d'exploitation mobile permet aux utilisateurs de lancer une action de partage qui ouvre une boîte de dialogue de sélection où vous pouvez choisir la destination de ce que vous souhaitez partager.

native share feature" title="native share feature"/></p data-recalc-dims=

Il existe une spécification qui définit l'API qui vous permettrait d'utiliser cette capacité de périphérique et de permettre aux utilisateurs de partager des ressources à partir d'une application Web, tout comme ils le pourraient dans des applications natives. Cette API est appelée API Web Share. ressources facilement du navigateur Web vers n'importe quelle destination aléatoire. Il gère les fonctionnalités de partage de manière native, sans avoir à écrire trop de code. Dans cet article, je vais vous montrer comment utiliser cette API dans une application React. Commencez !

Créons un nouveau React app à l'aide de create-react-app. Exécutez la commande ci-dessous dans votre application de ligne de commande :

npx create-react-app sharer

Ouvrez l'application dans votre éditeur de code préféré et accédez à App.js. Remplacez le contenu par le code que vous voyez ci-dessous :

import React from "react";
import "./App.css"[19659013];
function App() {
  return <div className="App">[19659025]</div>;
}
export default App;

Saupoudrons un peu de CSS pour rendre l'application agréable. Ouvrez App.css et remplacez-le par le contenu ci-dessous.

html {
  box-sizing: border-box;
 }

*,
*::avant,
*::after {
  box-sizing: inherit;
  padding: 0;[19659035]margin: 0;
}
.App {
  font-family: "Jost"sans-serif;
  position: relative;
  hauteur: 100vh;
  affichage : flex;
  justify-content: center;
  align-items: center;
  background[19659013]: #eee;
  couleur: #888;
}

bouton {
  bordure:[19659044]0;
  padding: 0 20px;
  border-radius: 4px;
  curseur: pointeur;
}
.close-button {
  align-self: center;
  padding :  0;
  fond: transparent;
  font-size: 1.6rem;
  couleur : #666;
}

.share-button-wrapper {
  padding: 10px 20px;
  background: #ddd;
  border-radius: 4px;
  text-transform: majuscule;
  letter-spacing: 2px;
  font-size[19659013]: 0.9rem;
  cursor: pointeur;
}

.share-modal [19659013]{
  position[19659013]: absolu;
   z-index: 9999;
  largeur: 80%;
  max -width: 400px;
  box-shadow: 0 0 5px #eee[19659013];
  transform: translateY(-200%);
  transition: 0.2s cubique-bézier(0.1650.840.441);[19659029]}

.share-modal.opened {
  background: #fff;
  transform: translateY (0%);
}

.modal-header,
.corps-modal,
.modal-footer {
  display: flex;
  padding: 20px; 
}

.modal-header {
  justify-content: space-between;
  padding:[19659044]15px 20px;
}

.modal-title {
  align-self :  center;
  font-weight: 600;
  text-transform: majuscule;
   letter-spacing : 0.7px;
  font-size: 0.9rem;
  couleur: # 666;
}

.corps-modal {
  flex: 1;
  affichage :  grille;
  gri d-gap: 20px;
}

.modal-body > .row {[19659035]display: grid;
  grid-template-rows: 1fr;
  grid-template-columns : 1fr 1fr;
  grid-gap: 20px;
}

 .modal-body > .row > div {
  align-self: center;
  justify-self[19659013]: center;
  largeur: 100%;
}

.modal-body > . ligne > div > bouton {
  hauteur: 35px;
  largeur: 100%;[19659035]rembourrage: 0 25px;[19659035]fond: transparent;
  couleur: #888;
  bordure: 1px solide #eee;
  text-transform: majuscule;
  letter-spacing: 2px;[19659035]font-size: 0.8rem;
  cursor: pointer;
}

.modal-footer -link {
  align-self: center;
  background: #eee;
  padding[19659013]: 10px 15px;
  margin-right: 10px;
  border-radius : 4px;
  text-transform: minuscules;
  letter-spacing: 2px;[19659035]font-size: 0.8rem;
  white-space: nowrap;
  overflow: caché;
  text-overflow: points de suspension;
}

.modal-footer-button {
  flex : 1 0 auto;
  text-transform: majuscule;
  couleur: # fff;
  background: #ff008d;
  font-weight: 600;
}

Créez un fichier nommé Share.js dans le dossier src. Ce composant sera chargé de déclencher le pop-up de partage. Ajoutez le contenu ci-dessous dans Share.js.

import React from "react";
function Share([19659013]{ label }) {
  return (
    <button className="sharer-button"[19659025]>
      <span className="sharer-button-text">{label}</span>
    </button>
  );
}
export default Partager ;

Ensuite, nous importerons et utiliserons le composant Share dans App.js. Ajoutez une déclaration d'importation à Share.js après la ligne 1, dans App.js

import Share from "./Share"[19659013];

Puis mettez à jour la fonction pour renvoyer le code ci-dessous :

return (
  <div>
    <Partager
      label="Partager"
      title="Mes aventures Web Share"
      text="Bonjour tout le monde! J'ai partagé ce contenu via Web Share"
    />
  </div>
)[19659013];

Ici, nous avons passé les props labeltitle et text au composant Share. Rien de spécial ne se passe encore même si nous cliquons sur le bouton. Faisons en sorte que cela se produise.

Mettre à jour Share.js avec ce qui suit :

function Share({ label, text , titre }) {
  const canonique = document.querySelector([19659024]"link[rel=canonical]");
  let url = canonique ? canonique.href  : document.location.href;
  const shareDétails = { url, titre, texte };

  const handlePartage = async () =>[19659021]{
    if (navigator.share) {
      try {[19659418]attendre navigateur
          .partage(partageDétails)
          .puis(() =>
            console.log("Hourra! Votre contenu a été partagé avec le monde")
          );
      } catch  (erreur) {
        console.log(`Oups ! Je n'ai pas pu partager avec le monde car : ${error}`);
      }
    } autre {
      
      console.log(
        "Le partage Web n'est actuellement pas pris en charge sur ce navigateur. Veuillez fournir un rappel"
      );
    }
  }[19659013];
  return (
    <button className="sharer-button" onClick={handleSharing }>
      <span className="sharer-button-text">{label}<[19659025]/span>
    </bouton>
  );
}

Nous avons ajouté une fonction nommée handleSharing qui utilisera l'API Web Share pour déclencher le sélecteur de partage et permettre à l'utilisateur de sélectionner la destination. Il vérifie si le navigateur prend en charge l'API en appelant if (navigator.share). Si ce n'est pas le cas, un message s'affiche dans la console. Sinon, il appelle navigator.share() pour déclencher le mécanisme de partage natif de l'appareil sur lequel le navigateur s'exécute.

Il accepte un objet qui contient des propriétés pour l'URL, le texte et le titre à partager . Il renvoie une promesse qui, lorsque la promesse se réalise, imprime un message de réussite dans la console.

La promesse renvoyée par navigator.share() sera immédiatement rejetée si le paramètre n'est pas correctement spécifié, et sera également rejeter si l'utilisateur annule le partage. Sinon, il réussira lorsque l'utilisateur aura choisi une destination.

Pour les navigateurs non pris en charge, rien ne se passe pour l'instant, à l'exception d'un message dans la console. Corrigons cela en affichant un modal dans ce cas.

Créez un fichier nommé ShareModal.js dans le répertoire src et mettez-le à jour avec ce qui suit :

import React, { Fragment } de "react";
fonction ShareModal({ modalVisible, shareData, handleClose }) {
  return (
    <>
      < div className={`${"share-modal"} ${modalVisible ? "ouvert" : "fermé"}`}>
        <section className ="modal-header">
          <h3 className="modal-title">[1 9459004]Partager via</h3>
          <button className="bouton de fermeture" onClick=[19659013]{() => handleFermer(false)}>
            &fois;
          </bouton>
        </section>
        <section className= "corps-modal">
          <div className="row">
            <div>
              <bouton>Facebook</bouton>
            </div>
            <div >
              <bouton>Twitter</bouton>
            </div>
          </div>[19659512]<div className="row">
            <div>
              <button>Instagram </bouton>
            </div>
            <div>
              <bouton>Tiktok</bouton>
            </div>
          </ div>
        </section>
        <section className="modal-footer">[19659512]<div className="modal-footer-link">{shareData.url}< /div>
          <button className="modal-footer-button">Copier le lien<[19659025]/bouton>
        </section>
      </div>
    </>
  );
}
 export default ShareModal;

Il s'agit du balisage d'un modal. Il reçoit des accessoires pour déterminer quand ouvrir ou fermer l'accessoire, et des détails sur la ressource à partager.

Maintenant, mettez à jour Share.js en ajoutant des données à l'état pour déterminer quand afficher ou masquer le modal .

const [showModal, setShowModal] = useState(false);

Ensuite, nous mettons à jour la fonction handleSharing en appelant setShowModal(true) dans le bloc else, lorsque l'API Web Share n'est pas prise en charge par le navigateur.

else[19659021]{
    
    setShowModal(true); 
    
  }

La dernière pièce pour que cela fonctionne est de rendre le ShareModal. Mettez à jour l'instruction de retour pour Share.js avec le code ci-dessous.

return (
  <>
    <button className=[19659024]"sharer-button" onClick={handleSharing}>
      <span className="sharer-button -text">{label}</span>
    </bouton >

    <ShareModal
      handleClose={setShowModal}
      shareData={shareDetails}
      modalVisible={showModal}
    />
  </>
);

Ça y est ! Vous pouvez maintenant exécuter l'application React et voir comment cela fonctionne.

 aperçu du fonctionnement de l'application" title="aperçu du fonctionnement de l'application : appuyez sur Partager pour afficher un menu avec des applications telles que Mail, Messages, AirDrop , etc. Nous cliquons sur Messages, ce qui fait apparaître une fenêtre contextuelle avec une ligne À: et le corps du message rempli. Le bouton Envoyer est désactivé jusqu'à ce que nous ayons rempli la ligne À."/></p data-recalc-dims=

Vous pouvez trouver la démo en ligne ici.

Il est important de noter que la prise en charge du navigateur est limitée. Voir MDN pour le tableau de compatibilité.

Résumé

Il y a eu des améliorations et des ajouts aux spécifications Web ces dernières années. Certains d'entre eux sont Service Worker API et Web Bluetooth API.

Dans cet article, j'ai parlé de l'API de partage Web et de la façon dont vous pouvez utiliser l'API de partage Web dans une application React. Nous avons créé un exemple d'application avec un mécanisme de secours pour afficher un modal différent avec la possibilité de partager à l'aide d'un mécanisme différent.

Je ne suis pas entré dans les détails de la mise en œuvre de cette partie car nous nous concentrons sur l'API Web Share, mais vous pouvez jouer avec le projet et l'implémenter vous-même. vous rencontrez des erreurs en faisant cela, n'hésitez pas à laisser un commentaire, m'envoyer un email ou envoyer un DM sur Twitte r.

Le code source est sur GitHub.

Références :






Source link