Conseils utiles

Suivre la visibilité des pages dans React en utilisant des accessoires de rendu

Pin
Send
Share
Send
Send


Lors de la création d'une application Web, vous pouvez rencontrer des situations dans lesquelles vous devez suivre l'état actuel de visibilité. Il arrive que vous deviez lire ou mettre en pause l'effet d'une animation ou d'une vidéo, réduire l'intensité ou suivre le comportement de l'utilisateur pour les analyses. À première vue, cette fonction semble assez simple à mettre en œuvre, mais elle ne l’est pas tout à fait. Le suivi de l'activité des utilisateurs est un processus plutôt compliqué.

Il existe une API de visibilité des pages qui fonctionne bien dans la plupart des cas, mais ne gère pas tous les cas possibles d'inactivité des onglets du navigateur. L'API de visibilité des pages distribue un événement de visibilitéchange pour informer les auditeurs que l'état de visibilité de la page a changé. Dans certains cas, il ne déclenche pas d’événement si la fenêtre du navigateur ou l’onglet correspondant est masqué. Pour traiter certains de ces cas, nous devons utiliser une combinaison d'événements de focus et de flou dans le document et dans la fenêtre.

Ainsi, à partir de cet article, vous apprendrez à créer un composant React simple qui suit l'état de visibilité de la page.

Codesandbox sera utilisé ici pour créer l'application React (vous pouvez également utiliser create-react-app). Nous allons créer une petite application dans laquelle l'élément vidéo HTML5 ne sera lu que si l'onglet du navigateur est actif ou activé, sinon il sera automatiquement mis en pause. La vidéo est utilisée pour faciliter le test des fonctionnalités de l'application.

visibilitéjs - Wrapper pour l'API Page Visibility

Visibility.js est un wrapper pour l'API Page Visibility. Il cache les préfixes des vendeurs et ajoute des fonctions de haut niveau. L'API de visibilité des pages vous permet de déterminer si votre page Web est visible par un utilisateur ou masquée dans un onglet en arrière-plan ou un prérendering. Il vous permet d'utiliser l'état de visibilité de la page dans la logique JavaScript et d'améliorer les performances du navigateur en désactivant les minuteries et les demandes AJAX inutiles, ou d'améliorer l'expérience de l'interface utilisateur (par exemple, en arrêtant la lecture de vidéos ou le diaporama lorsque l'utilisateur passe à un autre onglet du navigateur).

Crossbrowser & léger moyen de vérifier si l'utilisateur regarde la page ou interagit avec elle. (enveloppe autour de l'API de visibilité HTML5)

Commencer

Nous utiliserons Codesandbox pour amorcer notre application React (vous pouvez utiliser créer-réagir-app aussi bien. Nous allons créer une petite application qui comportera un élément vidéo HTML5 qui ne sera lu que lorsque l'onglet du navigateur est actif ou activé, sinon elle sera automatiquement mise en pause. Nous utilisons une vidéo car cela facilitera le test des fonctionnalités de notre application.

Commençons par créer la pièce la plus simple, c'est-à-dire le composant vidéo. Ce sera un composant simple qui recevra un accessoire booléen nommé actif et un accessoire String nommé src qui contiendra l'URL de la vidéo. Si les accessoires actifs sont vrais, nous lirons la vidéo, sinon nous la mettrons en pause.

Nous allons créer un composant simple de la classe React. Nous allons rendre un élément vidéo simple dont le code source est défini sur l'URL transmise à l'aide des propriétés src et utiliser la nouvelle API de référence de React pour associer une référence sur le nœud DOM vidéo. Nous allons définir la vidéo pour la lecture automatique en supposant que lorsque nous démarrons l'application, la page sera active. Une chose à noter ici est que Safari n’autorise plus la lecture automatique d’éléments multimédias sans interaction de l’utilisateur. La méthode de cycle de vie composantDidUpdate est très pratique pour gérer les effets secondaires lorsque les accessoires d'un composant changent. Par conséquent, nous allons utiliser ici cette méthode de cycle de vie pour lire et mettre en pause la vidéo en fonction de la valeur actuelle de this.props.active.

Les différences de préfixe de fournisseur de navigateur sont très ennuyeuses à gérer lors de l’utilisation de certaines API et l’API de visibilité des pages en est certainement un. Par conséquent, nous allons créer une fonction utilitaire simple qui gérera ces différences et nous renverra de manière uniforme l'API compatible basée sur le navigateur de l'utilisateur. Nous allons créer et exporter cette petite fonction de pageVisibilityUtils.js sous la src répertoire.

Dans cette fonction, nous utiliserons un flux de contrôle basé sur une instruction if-else simple pour renvoyer l'API spécifique au navigateur. Vous pouvez voir que nous avons joint le ms préfixe pour Internet Explorer et webkit préfixe pour les navigateurs webkit. Nous allons stocker l'API correcte dans les variables de chaîne masquées etvisibilitéChange et les renvoyer à partir de la fonction sous la forme d'un objet simple. Enfin, nous allons exporter la fonction.

Ensuite, nous passons à notre composant principal. Nous encapsulerons toute notre logique de suivi de la visibilité des pages dans un composant de classe React réutilisable en exploitant le modèle Render Props. Nous allons créer un composant de classe appelé VisibilityManager. Ce composant gérera l'ajout et la suppression de tous les écouteurs d'événements basés sur le DOM.

Nous allons commencer par importer la fonction d’utilitaire que nous avons créée précédemment et en l’appelant pour obtenir les API spécifiques au navigateur appropriées. Ensuite, nous allons créer le composant React et initialiser son état avec un seul champ isVisible défini sur true. Ce champ d'état booléen sera responsable de refléter l'état de visibilité de notre page. Dans la méthode de cycle de vie composantDidMount du composant, nous allons attacher un écouteur d'événement sur le document pour l'événement de visibilitéchange avec la méthode this.handleVisibilityChange en tant que gestionnaire. Nous allons également attacher des écouteurs d'événements pour les événements de focus et de flou sur le document, ainsi que pour l'élément window. Cette fois, nous allons définir this.forceVisibilityTrue et this.forceVisibilityFalse en tant que gestionnaires pour les événements de focus et de flou, respectivement.

Maintenant, nous allons ensuite créer la méthode handleVisibilityChange qui acceptera un seul argument forcé. Cet argument forceFlag sera utilisé pour déterminer si la méthode est appelée en raison de l'événement de visibilitéchange ou des événements de focus ou de flou. En effet, les méthodes forceVisibilityTrue et forceVisibilityFalse ne font qu'appeler la méthode handleVisibilityChange avec les valeurs true et false pour l'argument ForceFlag. Dans la méthode handleVisibilityChange, nous vérifions d’abord si la valeur de l’argument ForcedFlag est une valeur booléenne (c’est parce qu’elle est appelée à partir du gestionnaire d’événements de visibilitéchange, l’argument transmis sera un objet SyntheticEvent). S'il s'agit d'un booléen, nous vérifions s'il est vrai ou faux. Lorsqu'il est vrai, nous appelons la méthode setVisibility avec true, sinon nous appelons la méthode avec false comme argument. La méthode setVisibility utilise cette méthode.setState pour mettre à jour la valeur du champ isVisible dans l'état du composant. Mais, si le champ forcé n'est pas un booléen, nous vérifions la valeur de l'attribut masqué sur le document et appelons la méthode setVisibility en conséquence. Ceci termine notre logique de suivi des états de visibilité de la page.

Pour rendre le composant réutilisable dans la nature, nous utilisons le modèle Render Props, c.-à-d. Au lieu de restituer un composant à partir de la méthode de rendu, nous appelons this.props.children en tant que fonction avec this.state.isVisible.

Enfin, nous montons notre application React sur le DOM dans notre index.js fichier. Nous importons nos deux composants de React, VisibilityManager et Video, et créons un petit composant fonctionnel React en les composant. Nous transmettons une fonction en tant qu’enfant du composant VisibilityManager qui accepte est visible en tant qu’argument et la passons au composant Vidéo dans son instruction return. Nous transmettons également une URL de vidéo en tant qu’objet src au composant vidéo. C'est ainsi que nous consommons le composant VisiblityManager basé sur les accessoires de rendu. Enfin, nous utilisons la méthode ReactDOM.render pour rendre notre application React sur le nœud DOM avec l'id "root".

Conclusion

Les API de navigateur modernes deviennent vraiment puissantes et peuvent être utilisées pour faire des choses incroyables. La plupart de ces API sont de nature impérative et il peut être difficile de travailler avec parfois dans le paradigme déclaratif de React. L'utilisation de modèles puissants, tels que Render Props, pour encapsuler ces API dans leurs propres composants React réutilisables peut s'avérer très utile.

Développeur JavaScript et passionné de cybersécurité.

Publié le 24 août

Pin
Send
Share
Send
Send