Lors de la création d'une application de réaction, le service worker est appelé par défaut. Pourquoi le service worker est-il utilisé? Quelle est la raison de l'appel par défaut?
Qu'est-ce que le service worker dans React js
Réponses:
Vous n'avez peut-être pas besoin d'un technicien de service pour votre application. Si vous créez un projet avec create-react-app, il est appelé par défaut
Les travailleurs des services sont bien expliqués dans cet article. Pour en résumer
A
service workerest un script que votre navigateur exécute en arrière-plan, séparé d'une page Web, ouvrant la porte à des fonctionnalités qui ne nécessitent pas de page Web ou d'interaction de l'utilisateur. Aujourd'hui, ils incluent déjà des fonctionnalités commepush notificationsetbackground syncet ontability to intercept and handle network requests, y comprisprogrammatically managing a cache of responses.À l'avenir, les travailleurs des services pourraient prendre en charge d'autres choses comme
periodic syncougeofencing.
Selon ce PR pour create-react-app
Service workerssont introduits avec create-react-app viaSWPrecacheWebpackPlugin.L'utilisation d'un serveur de travail avec une stratégie de mise en cache en premier offre des avantages en termes de performances, car le réseau n'est plus un goulot d'étranglement pour répondre aux demandes de navigation. Cela signifie cependant que les développeurs (et les utilisateurs) ne verront les mises à jour déployées que lors de la visite "N + 1" d'une page, car les ressources précédemment mises en cache sont mises à jour en arrière-plan.
L'appel à register service workerest activé par défaut dans les nouvelles applications, mais vous pouvez toujours le supprimer, puis vous revenez au comportement normal.
2
comme pour le moment, l'application reactjs générée a un code sw mais le commentaire indique que la fonction de registre n'est pas appelée. Alors la question est de savoir où pourrais-je l'appeler?
—
Daneel Yaitskov
@ DaneelS.Yaitskov, vous pouvez l'appeler dans un fichier index.js de niveau supérieur ou similaire.
—
Siddhartha
@Siddhartha pourriez-vous être assez aimable pour fournir un exemple concret et peut-être mettre à jour la réponse? J'ai trouvé cela très utile mais je manque ces derniers détails. Merci.
—
Ted Stresen-Reuter
En termes simples et clairs, c'est un script que le navigateur exécute en arrière-plan et n'a aucun rapport avec les pages Web ou le DOM, et fournit des fonctionnalités prêtes à l'emploi. Il vous aide également à mettre en cache vos actifs et autres fichiers de sorte que lorsque l'utilisateur est hors ligne ou sur un réseau lent.
Certaines de ces fonctionnalités sont les requêtes réseau par proxy, les notifications push et la synchronisation en arrière-plan. Les techniciens de service s'assurent que l'utilisateur dispose d'une riche expérience hors ligne.
Vous pouvez considérer le service worker comme une personne qui se trouve entre le client et le serveur et toutes les demandes adressées au serveur passent par le service worker. Fondamentalement, un intermédiaire. Étant donné que toutes les demandes passent par le service worker, il est capable d'intercepter ces demandes à la volée.
Je voudrais ajouter 2 considérations importantes sur les techniciens de service à prendre en compte:
Les techniciens de service ont besoin de HTTPS. Mais pour activer les tests locaux, cette restriction ne s'applique pas à
localhost. Ceci est pour des raisons de sécurité car un Service Worker agit comme un homme au milieu entre l'application Web et le serveur.Avec Create React App Service Worker n'est activé que dans l'environnement de production, par exemple lors de l'exécution
npm run build.
Service Worker est là pour vous aider à développer une application Web progressive . Une bonne ressource à ce sujet dans le contexte de l'application Create React peut être trouvée sur leur site Web ici .