Dieser Artikel wird aus dem täglichen Abonnement-Newsletter-Versioning von SitePoint ausgewählt, der Entwicklern ausgewählte Links in Front-End-, Back-End-, Design- und Benutzererfahrung, Nachrichten, Unternehmen und anderen Bereichen bietet, um die neuesten Kenntnisse und Informationen beizubehalten. Erfahren Sie mehr und melden Sie sich an, um sich abonnieren. Besuchen Sie hier. 
Tim Evko ist ein Front-End-Entwickler, der eine Codebasis verwaltet, die hauptsächlich auf React basiert, und auch Teamleiter von ExecThread, einem Unternehmen, das sich auf die Bereitstellung von Informationen zur Arbeitssuche für Fachkräfte konzentriert. In seiner Freizeit wird er im örtlichen Fitnessstudio trainieren und verpflichtet sich, ein besserer CrossFit -Athlet für den Wettbewerb zu werden.
Was sind die technischen Konzepte oder Trends, an denen Sie derzeit am meisten interessiert sind?
Ich war in letzter Zeit von der Service Worker -Technologie besessen, insbesondere für schnellere Lade- und schnelle Interaktion. Ich liebe die Leistung und die Offline -Funktionalität von Webanwendungen, und ich denke, die Community kann von einem größeren Fokus auf den Aufbau von belastbaren, universellen und schnellen Anwendungen profitieren. Servicearbeiter ist besonders interessant, da es viele Funktionen implementieren kann. Ich habe kürzlich erfahren, dass es möglich ist, Service Worker zu verwenden, um zwischen Browser -Registerkarten zu kommunizieren, sodass jeder einzelne Registerkarte sich nach Ablauf des Cache neu lädt. Diese Technik ist nicht leicht zu meistern, aber ich bin sehr froh, dass sie existiert!
Ich weiß nicht viel über diese Technologie. Können Sie sie ausführlich vorstellen?
Im Browser kann Service Worker alle Kunden innerhalb des verfügbaren Bereichs steuern, nicht nur die derzeit aktiven Registerkarten. Dies bedeutet, dass, wenn Servicearbeiter mit einer Website im Browser kommuniziert, weiterhin mit allen Registerkarten kommuniziert, auf denen derzeit die Website angezeigt wird. Sie können diese Funktion nutzen, wenn Sie die Postmessage -API verwenden, die mit Service Worker geliefert wird. Detaillierte Beispiele finden Sie hier. In ExecThread verwenden wir diese Funktion, um alle Registerkarten neu zu laden, falls Service Worker die Seite mit alten CSS -Dateien mit neuen Tags zur Verfügung stellt.
Beschreiben (oder Link zu!) Interessante Werke, die Sie kürzlich gebaut, entworfen oder produziert haben. Warum bist du stolz darauf?
Ich habe kürzlich verstanden, wie virtuelle DOM -Algorithmen funktionieren, und dabei habe ich meinen eigenen Komponenten -Renderer: Baddom [Github] erstellt. Es hat nur 600 Bytes und Sie können es verwenden, um Ihre gesamte Webanwendung zu erstellen. Ich bin stolz darauf, weil es nur 600 Bytes sind und Sie es verwenden können, um Ihre gesamte Webanwendung zu erstellen. Bad ist eigentlich sehr einfach, weshalb ich es mag. Wenn Sie einen Knoten (z. B. eine DIV auf der Seite) und eine ES6 -Vorlagenzeichenfolge angeben, aktualisiert er die erste DIV, damit sie mit der Vorlagenzeichenfolge übereinstimmt. Im Wesentlichen handelt es sich um eine DOM -Differenzierungsfunktion, die sicherstellt, dass sein Ziel wie eine Vorlagenzeichenfolge aussieht. Da es sich jedoch um eine ES6 -Vorlagenzeichenfolge handelt, können Sie der Differenzierung Logik hinzufügen. Dies bedeutet, dass Sie Differenzierungsfunktionen jederzeit aufrufen können, um einen beliebigen Status zu aktualisieren, auf dem Ihre Logik basiert, und Ihr ursprüngliches DOM -Ziel entspricht dem neuen Status. Der gesamte Vorgang findet, löscht oder verändert alle DOM -Knoten, indem ein unsichtbares Element mit der Vorlagenzeichenfolge erstellt und das Zielelement (und seine Kinder) verglichen wird, bis die Elemente basierend auf der Vorlagenzeichenfolge und dem Zielelement gleich aussehen. Es ist effizient, weil es niemals Elemente aktualisiert, die keine Aktualisierungen erfordern und so eine unnötige Verarbeitung vom Browser verhindern. Wenn Sie 100 verschachtelte Elemente haben und nur einer von ihnen den Klassennamen geändert hat, findet Bad das Element und ändert nur seinen Klassennamen.
Wie haben Sie es gebaut?
Wie die meisten meiner Projekte habe ich es auf Codepen erstellt. Ich konzentriere mich gerne darauf, es so einfach wie möglich zu halten und Build -Tools/-einstellungen wie möglich zu minimieren. Auf diese Weise ist es für jeden einfacher, zu verstehen und teilzunehmen. CodePen ist großartig, weil ich keine IDE einrichten muss, um die Front-End-Bibliothek zu verarbeiten. Ich kann den ganzen Tag über Codepen, seine Community und das, was ich aus der Arbeit anderer Menschen gelernt habe, sprechen, aber ich sage nur, dass sich jeder selbst ansehen sollte. Ich schreibe gerne alle JavaScript -Code mit Modulmuster, und hier mache ich das Gleiche. Das Modulmuster ist eine Möglichkeit, JavaScript zu schreiben, und der gesamte Code befindet sich in einem in sich geschlossenen Objekt. Methoden innerhalb eines Objekts werden als Funktionsattribute gespeichert, und Konfigurationswerte können als Objektattribute gespeichert werden. Ich benutze dieses Muster gerne, weil es sehr einfach ist, den Code (insbesondere die Bibliotheken) zu organisieren. Sie können hier mehr über diesen Modus erfahren.
Was ist der beste technische Artikel, den Sie in letzter Zeit gelesen haben und warum?
belastbares Webdesign von Jeremy Keith - Jeremy ist ein ausgezeichneter Autor, und der Code in diesem Buch ist genau so geschrieben, wie der Code im Buch beschrieben wird.
Was ist der interessanteste oder lustigste, nicht getroffene Link, den Sie in letzter Zeit an Ihre Freunde gesendet haben?
Es ist immer noch Winter an der Ostküste der Vereinigten Staaten. Ich habe es vor ein paar Tagen an meine Frau geschickt: 
Es ist wahr! Dies ist das Interview in dieser Woche, dank Tim, dass er seine leidenschaftlichste Technologie geteilt hat. 
FAQs (FAQs) über die Verwendung von Service Worker, um zwischen Browser -Registerkarten zu kommunizieren
Service Worker ist eine Art Webarbeiter. Es handelt sich um eine JavaScript -Datei, die die damit verbundenen Webseiten/-netze steuert, Navigations- und Ressourcenanfragen abhebt und ändert und Ressourcen auf sehr akribische Weise eingestuft wird, um eine Offline -Erfahrung abzuschließen oder die Leistung zu verbessern.
Um den Service Worker zu verwenden, um zwischen Browser -Registerkarten zu kommunizieren, müssen Sie zuerst den Service Worker registrieren. Nach der Registrierung können Sie die Postmessage -API verwenden, um Nachrichten zwischen dem Servicearbeiter und der Seite zu senden. Der Servicearbeiter kann diese Nachrichten dann unter seiner Steuerung auf alle Registerkarten übertragen.
Um Service -Worker -Nachrichten für mehrere Registerkarten gleichzeitig zu verarbeiten, können Sie die methode clients.matchAll () verwenden. Diese Methode erhält alle Clients unter die Kontrolle des Service Worker und sendet Nachrichten an jeden Kunden. Auf diese Weise können Sie sicherstellen, dass jede Registerkarte Nachrichten nur einmal verarbeitet.
Nein, Servicearbeiter kann ohne Server nicht für die Kommunikation zwischen Browser zu Browser verwendet werden. Service Worker wurde entwickelt, um Offline -Erlebnisse zu ermöglichen und die Leistung zu verbessern, indem Ressourcen zwischengespeichert werden. Sie können zwischen Seiten und Serviceläuren und zwischen den Registerkarten unter der Steuerung von Service Worker kommunizieren, können jedoch nicht direkt zwischen den Browsern kommunizieren.
Die Postmessage -API spielt eine entscheidende Rolle im Dienstangestell. Sie können Nachrichten zwischen der Seite und dem Servicearbeiter senden und Nachrichten unter der Steuerung des Servicearbeiters an alle Registerkarten senden. Auf diese Weise kommuniziert der Servicearbeiter zwischen Browser -Registerkarten.
Um einen Servicearbeiter zu registrieren, müssen Sie die Methode navigator.serviceworker.register () verwenden. Diese Methode nimmt zwei Parameter an: Der erste ist der Pfad zur Service -Worker -Datei, und das zweite ist das Optionsobjekt. Nach der Anmeldung für Servicearbeiter kann die Seite/die Seite steuern.
Ja, Servicearbeiter kann die Leistung Ihrer Webseiten/Websites erheblich verbessern. Durch die sorgfältige Zwischenspeicherung von Ressourcen kann Servicearbeiter eine Offline -Erfahrung bieten oder die Leistung verbessern, indem sie Cache -Ressourcen bereitstellen, anstatt Netzwerkanfragen zu stellen.
Um Servicearbeiter zu verwenden, um eine Offline -Erfahrung zu bieten, müssen Sie Ressourcen zwischenspeichern. Wenn ein Servicearbeiter Navigations- oder Ressourcenanfragen abfängt, kann er mit zwischengespeicherten Ressourcen reagieren, anstatt Netzwerkanfragen zu stellen. Auf diese Weise kann die Seite/die Seite auch dann ordnungsgemäß funktionieren, wenn sie offline ist.
Die Clients.MatchAll () -Methode im Service Worker ist eine Methode, um alle Kunden unter der Kontrolle des Service -Arbeiters zu erhalten. Diese Methode ist nützlich, um Nachrichten auf alle Registerkarten unter Service Worker Control zu übertragen.
Nein, Servicearbeiter kann nicht mit Webrtc verwendet werden. Service Worker wurde entwickelt, um Offline-Erfahrung und Leistungsverbesserungen zu ermöglichen, während WebRTC so konzipiert ist, dass sie eine Echtzeitkommunikation zwischen Browsern ermöglichen. Diese beiden Technologien dienen unterschiedlichen Zwecken und können nicht zusammen verwendet werden.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Dienstangestellte, um über Browser -Registerkarten zu kommunizieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
