Comment utiliser les travailleurs de service pour communiquer entre les onglets du navigateur

Cet article est extrait de la newsletter de la newsletter quotidienne de SitePoint, qui fournit aux développeurs des liens sélectionnés en front-end, back-end, conception et expérience utilisateur, actualités, entreprises et autres domaines pour les aider à maintenir les dernières connaissances et informations. Apprenez-en plus et inscrivez-vous pour vous abonner, visitez ici.

Tim Evko est un développeur frontal qui gère une base de code basée principalement sur React et est également le chef d'équipe d'Ex. Dans ses temps libres, il fera de l'exercice dans le gymnase local et s'engage à devenir un meilleur athlète CrossFit compétitif.

Quels sont les concepts techniques ou les tendances qui vous intéressent le plus en ce moment?

J'ai été obsédé par la technologie des travailleurs de service ces derniers temps, en particulier pour un chargement de site Web plus rapide et une interaction rapide. J'adore les performances et les fonctionnalités hors ligne des applications Web, et je pense que la communauté peut bénéficier d'une plus grande focalisation sur la création d'applications résilientes, universelles et rapides. Le travailleur des services est particulièrement intéressant car il peut implémenter de nombreuses fonctionnalités. J'ai récemment appris qu'il est possible d'utiliser un travailleur de service pour communiquer entre les onglets du navigateur, permettant à chaque onglet individuel de se recharger à l'expiration du cache. Cette technique n'est pas facile à maîtriser, mais je suis très content qu'elle existe!

Je ne sais pas grand-chose sur cette technologie, pouvez-vous la présenter en détail?

Dans le navigateur, le travailleur des services peut contrôler tous les clients dans la gamme disponible, pas seulement les onglets actuellement actifs. Cela signifie que lorsque le travailleur des services communique avec un site Web du navigateur, il communiquera toujours avec tous les onglets qui affichent actuellement le site Web. Vous pouvez profiter de cette fonctionnalité lors de l'utilisation de l'API PostMessage qui est livrée avec un travailleur de service. Des exemples détaillés peuvent être trouvés ici. Dans ExecThread, nous utilisons cette fonctionnalité pour recharger tous les onglets dans le cas où le travailleur du service fournit la page avec les anciens fichiers CSS avec de nouvelles balises.

Veuillez décrire (ou lier!) Des œuvres intéressantes que vous avez récemment construites, conçues ou produites. Pourquoi en êtes-vous fier?

J'ai récemment commencé à comprendre comment fonctionnent les algorithmes DOM virtuels, et dans le processus, j'ai construit mon propre rendu de composant: Baddom [github]. Il n'a que 600 octets et vous pouvez l'utiliser pour créer l'intégralité de votre application Web. Je suis fier de cela car il ne fait que 600 octets et vous pouvez l'utiliser pour créer toute votre application Web. Baddom est en fait très simple, c'est pourquoi je l'aime. Si vous fournissez un nœud (comme un div sur la page) et une chaîne de modèle ES6, il mettra à jour le premier DIV afin qu'il corresponde à la chaîne de modèle. Essentiellement, c'est une fonction de différenciation DOM qui garantit que sa cible ressemble à une chaîne de modèle. Cependant, comme il s'agit d'une chaîne de modèle ES6, vous pouvez ajouter une logique à la différenciation. Cela signifie que vous pouvez appeler des fonctions de différenciation à tout moment pour mettre à jour n'importe quel état sur lequel votre logique est basée, et votre cible DOM d'origine correspondra au nouvel état. L'ensemble du processus trouve, supprime ou modifie tous les nœuds DOM en créant un élément invisible à l'aide de la chaîne de modèle et en comparant l'élément cible (et ses enfants) jusqu'à ce que les éléments basés sur la chaîne de modèle et l'élément cible se ressemblent. Il est efficace car il ne met jamais à jour des éléments qui ne nécessitent pas de mises à jour, empêchant ainsi le traitement inutile du navigateur. Si vous avez 100 éléments imbriqués et qu'un seul a le nom de classe modifié, Baddom trouvera l'élément et ne changera que son nom de classe.

Comment l'avez-vous construit?

Comme la plupart de mes projets, je l'ai construit sur Codepen. J'aime me concentrer sur le maintien aussi simple que possible et minimiser les outils / paramètres de construction que possible. De cette façon, quelle que soit la plate-forme ou l'appareil qu'ils utilisent, il est plus facile pour quiconque de comprendre et de participer. Codepen est génial car je n'ai pas besoin de configurer un IDE pour gérer la bibliothèque frontale. Je peux parler toute la journée de Codepen, de sa communauté et de ce que j'ai appris du travail des autres, mais je dis juste que tout le monde devrait le regarder par eux-mêmes. J'aime écrire tout le code JavaScript en utilisant le motif du module, et ici je fais de même. Le motif du module est un moyen d'écrire JavaScript, et tout le code est situé dans un objet autonome. Les méthodes au sein d'un objet sont stockées sous forme d'attributs de fonction et les valeurs de configuration peuvent être stockées sous forme d'attributs d'objet. J'aime utiliser ce modèle car il est très facile d'organiser le code (en particulier les bibliothèques). Vous pouvez en savoir plus sur ce mode ici.

Quel est le meilleur article technique que vous avez lu récemment et pourquoi?

La conception Web résiliente de Jeremy Keith - Jeremy est un excellent auteur, et le code de ce livre est écrit exactement comme le code décrit dans le livre.

Quel est le lien non sur le thème le plus intéressant ou le plus drôle que vous ayez envoyé récemment à vos amis?

C'est toujours l'hiver sur la côte est des États-Unis. Je l'ai envoyé à ma femme il y a quelques jours: C'est vrai! Ceci est l'interview cette semaine, grâce à Tim d'avoir partagé sa technologie la plus passionnée.

FAQ (FAQ) sur l'utilisation du travailleur de service pour communiquer entre les onglets du navigateur

Qu'est-ce que le travailleur des services et comment cela fonctionne-t-il?

Le travailleur des services est une sorte de travailleur Web. Il s'agit d'un fichier JavaScript qui contrôle les pages Web / Webses qui y sont associées, intercepte et modifier les demandes de navigation et de ressources et met en cache des ressources de manière très méticuleuse pour terminer une expérience hors ligne ou améliorer les performances.

Comment utiliser le travailleur de service pour communiquer entre les onglets du navigateur?

Pour utiliser le travailleur de service pour communiquer entre les onglets du navigateur, vous devez d'abord enregistrer le travailleur du service. Après votre inscription, vous pouvez utiliser l'API PostMessage pour envoyer des messages entre le travailleur du service et la page. Le travailleur des services peut ensuite diffuser ces messages à tous les onglets sous son contrôle.

Comment traiter les messages des travailleurs de service pour plusieurs onglets à la fois?

Pour traiter les messages des travailleurs de service pour plusieurs onglets à la fois, vous pouvez utiliser la méthode client.matchall (). Cette méthode met tous les clients sous le contrôle du travailleur des services et envoie des messages à chaque client. De cette façon, vous pouvez vous assurer que chaque onglet ne traite des messages qu'une seule fois.

Puis-je utiliser un travailleur de service pour la communication de navigateur à navigateur sans serveur?

Non, le travailleur du service ne peut pas être utilisé pour la communication du navigateur à navigateur sans serveur. Le travailleur de service est conçu pour permettre des expériences hors ligne et améliorer les performances en mettant en cache des ressources. Ils peuvent communiquer entre les pages et les travailleurs du service et entre les onglets sous contrôle des travailleurs de service, mais ils ne peuvent pas communiquer directement entre les navigateurs.

Quel est le rôle de l'API post-message dans le travailleur des services?

L'API postmessage joue un rôle crucial dans le travailleur des services. Il vous permet d'envoyer des messages entre la page et le travailleur du service et de diffuser des messages à tous les onglets sous le contrôle du travailleur des services. C'est ainsi que le travailleur des services communique entre les onglets du navigateur.

Comment enregistrer un agent de service?

Pour enregistrer un travailleur de service, vous devez utiliser la méthode Navigator.ServiceWorker.Register (). Cette méthode prend deux paramètres: le premier est le chemin d'accès au fichier du travailleur du service, et le second est l'objet Option. Après s'être inscrit au service de service, il peut contrôler la page / site.

Le travailleur des services peut-il améliorer les performances de mes pages Web / sites Web?

Oui, le travailleur des services peut améliorer considérablement les performances de vos pages Web / sites Web. En mettant en cache des ressources de manière méticuleuse, le travailleur des services peut offrir une expérience hors ligne ou améliorer les performances en fournissant des ressources de cache au lieu de faire des demandes de réseau.

Comment utiliser le service de service pour offrir une expérience hors ligne?

Pour utiliser le service de service pour offrir une expérience hors ligne, vous devez mettre en cache des ressources. Lorsqu'un travailleur de service intercepte des demandes de navigation ou de ressources, il peut répondre avec des ressources mises en cache au lieu de faire des demandes de réseau. Cela permet à la page / site de fonctionner correctement même lorsqu'il est hors ligne.

Quelle est la méthode des clients.matchall () dans le travailleur des services?

La méthode des clients.matchall () dans le travailleur de service est une méthode pour obtenir tous les clients sous le contrôle du travailleur de service. Cette méthode est utile pour diffuser des messages à tous les onglets sous Contrôle des travailleurs de service.

Puis-je utiliser un travailleur de service avec WebBrTC?

Non, le travailleur des services ne peut pas être utilisé avec WebBrTC. Le travailleur de service est conçu pour permettre une expérience hors ligne et des améliorations de performances, tandis que WeBrTC est conçu pour permettre une communication en temps réel entre les navigateurs. Ces deux technologies servent des objectifs différents et ne peuvent pas être utilisés ensemble.

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!