Faites de votre application hors ligne avec les ouvriers

Sep 15, 2025
Comment
[dix] [dix] [dix]
[dix]
[dix]

Les ouvriers de service peuvent être utilisés pour améliorer les temps de chargement et la prise en charge hors ligne pour vos sites et vos applications Web. Dans ce tutoriel, nous allons vous montrer comment améliorer progressivement une application Web avec un travailleur de service. Tout d'abord, nous couvrirons ce qui est un travailleur de service et comment son cycle de vie fonctionne, alors nous vous montrerons comment utiliser pour accélérer votre site (cette page) et proposer du contenu hors ligne (page 2).

[dix]

Ensuite, nous vous montrerons comment Comment construire une application avec des ouvriers. Vous apprendrez à mettre en place un travailleur nue-os qui cache et servira des actifs statiques (offrant une énorme performance sur les charges suivantes), puis sur la mise en cache des réponses de l'API dynamique et donner notre application de démonstration complète de l'application de démonstration. Tout d'abord, regardons ce que sont exactement les travailleurs du service et comment ils fonctionnent.

Construire un site web? Rationaliser votre processus avec un grand Générateur de site Web et le maintenez-le avec un décent hébergement Web un service. Et obtenir votre stockage trié avec ces stockage en ligne options.

Qu'est-ce qu'un travailleur de service?

Alors qu'est-ce qu'un ouvrier? C'est un script, écrit en JavaScript, que votre navigateur fonctionne à l'arrière-plan. Cela n'affecte pas le thread principal (où JavaScript fonctionne généralement sur une page Web) et ne sera pas en conflit avec votre code d'application ni affecter les performances d'exécution.

Un travailleur de service n'a pas d'accès direct au DOM ou à l'interaction des événements et des utilisateurs sur la page Web elle-même. Pensez-y sous la forme d'une couche située entre la page Web et le réseau, ce qui lui permet d'intercepter et de manipuler des demandes de réseau (E.G. Demandes AJAX) effectuées par votre page. Cela le rend idéal pour la gestion des caches et soutenir l'utilisation hors ligne.

[dix]

Le cycle de vie du travailleur de service

La durée de vie d'un travailleur de service suit un flux simple, mais cela peut être un peu déroutant lorsque vous êtes habitué aux scripts JS travaillant immédiatement:

Installation & GT; En attente (installé) & gt; Activation & gt; Activé & gt; Redondant

Lorsque votre page est chargée pour la première fois, le code d'enregistrement que nous avons ajouté à index.html Démarre l'installation du service de service. Lorsqu'il n'y a pas de travailleur existant, le nouveau service de service sera activé immédiatement après l'installation. Une page Web ne peut avoir qu'un seul travailleur de service actif à la fois.

Si un ouvrier est déjà installé, le nouveau service de service sera installé puis assister à l'étape d'attente jusqu'à ce que la page soit complètement fermée puis rechargée. Un simple rafraîchissant ne suffit pas parce que vous pourriez avoir d'autres onglets ouverts. Vous devez vous assurer que toutes les instances de la page sont fermées sinon le nouveau travailleur ne s'active pas. Vous n'avez pas à fermer les onglets, vous pouvez simplement naviguer sur un autre site et revenir.

Tous les deux installer et Activer Les événements ne se produiront qu'une fois par travailleur. Une fois activé, le service de service aura alors le contrôle de la page et peut commencer à traiter des événements tels que la récupération de manipuler des demandes.

Enfin, un service de service deviendra redondant si le navigateur détecte que le fichier travailleur lui-même a été mis à jour ou si l'installation ou l'activation échoue. Le navigateur recherchera une différence d'octets pour déterminer si un script ouvrier a été mis à jour.

Il est important de noter que vous ne devriez jamais changer (ou réviser) le nom de votre service de service. Vous ne devez pas non plus mettre en cache le fichier travailleur lui-même sur le serveur, car vous ne pourrez pas le mettre à jour facilement, bien que les navigateurs soient désormais assez intelligents pour ignorer les en-têtes de mise en cache.

01. Clonez l'application de démonstration

D'accord, commençons à apprendre à construire une application Web avec l'aide des travailleurs du service. Pour ce tutoriel, vous aurez besoin de versions récentes de Node.js et NPM installé sur votre ordinateur.

Nous avons assommé une application de démonstration que nous allons utiliser comme base de ce tutoriel ( cloner l'application démo ici ). L'application est un petit projet amusant qui récupère les prévisions météo à cinq jours basées sur l'emplacement de l'utilisateur. Il vérifiera alors si la pluie est prévisionnelle avant la fin de la journée et mettez à jour l'interface utilisateur en conséquence.

Il a été construit inefficalement (intentionnellement) à l'aide de grandes bibliothèques inutiles telles que JQuery et Bootstrap, avec de grandes images non optimisées pour démontrer la différence de performance lors de l'utilisation d'un travailleur de service. Il pèse actuellement à 4,1 Mo ridicules.

02. Obtenez votre clé API

Afin de récupérer les données météo de l'API, vous devrez vous procurer une clé d'API gratuite de OpenWeatherMap :

Une fois que vous avez votre clé, ouvrez-la index.html et cherche le fenêtre.api_key variable dans le & lt; tête & gt; . Collez votre clé dans la valeur: 

    window.API_KEY = 'paste-your-key-here';

03. Démarrer le serveur de développement

Nous sommes maintenant prêts à commencer à travailler sur le projet. Tout d'abord installons les dépendances en exécutant: 

    npm install

Il y a deux tâches pour l'outil de construction. Courir NPM Démarrer Pour démarrer le serveur de développement sur le port 3000. Exécuter NPM Run Build préparer la version «production». N'oubliez pas que ce n'est qu'une démo, ce n'est donc pas vraiment une version de production - il n'y a pas de minécrification ou quoi que ce soit - les fichiers viennent de «revivre».

Un algorithme est utilisé pour créer un hachage, tel que 9C616053E5, du contenu du fichier. L'algorithme produira toujours le même hachage pour le même contenu, ce qui signifie que tant que vous ne modifiez pas le fichier, le hachage ne changera pas. Le hachage est ensuite ajouté au nom de fichier, donc par exemple styles.css peut devenir styles-9C616053E5.CSS. Le hash représente la révision du fichier - d'où "revu".

Vous pouvez mettre en cache en toute sécurité chaque révision du fichier sur votre serveur sans jamais avoir à invalider votre cache, ce qui est coûteux ou inquiétant d'une autre cache tiers servant la version incorrecte.

04. Introduisez votre travailleur de service

Maintenant, commençons avec notre travailleur de service. Créer un fichier appelé sw.js à la racine de la src annuaire. Ajoutez ensuite ces deux auditeurs d'événements pour vous connecter le installer et Activer événements: 

 Self.addeventlistener ('installer', (événement) = & gt; {
      console.log (événement);
    });

    self.addeventlistener ('activate', (événement) = & gt; {
      console.log (événement);
    });

Le soi La variable représente ici la portée globale de la lecture mondiale du travailleur du service. C'est un peu comme le la fenêtre objet dans une page Web.

Ensuite, nous devons mettre à jour notre fichier index.html et ajouter les commandes à installer le service de service. Ajouter ce script juste avant la fermeture & lt; / corps & gt; étiqueter. Il enregistrera notre travailleur et enregistrera son statut actuel. 

 & lt; script & gt;
     Si (Serviceworker 'dans Navigator) {
       Navigator.Serviceworker.register ('/ sw.js')
         .Ce (fonction (reg) {
           Si (Reg.Installing) {
             console.log ('SW Installing');
           } elier si (Reg.waitting) {
             console.log ('sw attendant');
           } else si (reg.active) {
             console.log ('SW activé');
           }
         }). attrape (fonction (erreur) {
           // échec de l'enregistrement
           console.log (échec de l'enregistrement avec '+ erreur);
         });
     }
   & lt; / script & gt;

Démarrez votre serveur de développement en exécutant NPM Démarrer et ouvrez la page dans un navigateur moderne. Nous vous recommandons d'utiliser Google Chrome car il possède un bon soutien des travailleurs de service dans ses devtools, que nous allons faire référence à tout ce tutoriel. Vous devriez voir trois choses connectées à votre console; deux du travailleur de service pour le installer et Activer Les événements, et l'autre sera le message de l'enregistrement.

[dix]

05. Activez le travailleur

Nous allons dire à notre travailleur de sauter l'étape d'attente et de s'activer maintenant. Ouvrez le fichier SW.JS et ajoutez cette ligne n'importe où à l'intérieur du installer Écouteur d'événements: 

 Self.Skipwaitting ();

Maintenant, lorsque nous mettons à jour le script ouvrier, il prendra le contrôle de la page immédiatement après l'installation. Il convient de garder à l'esprit que cela peut signifier que le nouveau travailleur prendra le contrôle d'une page qui peut avoir été chargé par une version précédente de votre travailleur - si cela va causer des problèmes, n'utilisez pas cette option dans votre application.

Vous pouvez confirmer cela en naviguant de la page, puis revenez. Vous devriez voir le installer et Activer Les événements incendient à nouveau lorsque le nouveau travailleur a été installé.

Chrome DevTools a une option utile qui signifie que vous pouvez mettre à jour votre travailleur simplement en rechargement. Ouvrez DevTools et accédez à l'onglet Application, puis choisissez Service Worker dans la colonne de gauche. En haut du panneau se trouve une case à cochez la mise à jour indiquée sur Recharger, cochez-la. Votre travailleur mis à jour sera maintenant installé et activé sur rafraîchir.

06. Confirmer les changements

Confirmons cela en ajoutant console.log ('foo') Appelez l'un des auditeurs d'événements et rafraîchir la page. Cela nous a attrapé parce que nous nous attendions à voir la console dans la console lorsque nous nous sommes rafraîchis, mais tout ce que nous voyions était le message «SW activé». Il s'avère que Chrome rafraîchit la page deux fois lorsque la mise à jour de l'option de recharge est cochée.

Vous pouvez le confirmer en cochant la case Cochez le journal de conservation dans le panneau Paramètres de la console et à nouveau rafraîchir. Vous devriez voir l'installation et l'activation des événements enregistrés, ainsi que 'FOO', suivi de 'Navigated à http: // localhost: 3000 /' Pour indiquer que la page a été rechargée, puis le message final "SW activé".

07. Suivre l'événement de récupération

Il est temps d'ajouter un autre auditeur. Cette fois, nous allons suivre la aller chercher L'événement déclenché chaque fois que la page charge une ressource, telle qu'un fichier CSS, une image ou même une réponse de l'API. Nous allons ouvrir un cache, renvoyer la réponse de la demande à la page, puis - en arrière-plan - cache la réponse. Tout d'abord, ajoutons l'auditeur et rafraîchissez afin que vous puissiez voir ce qui se passe. Dans la console, vous devriez voir beaucoup Fetchevent Journaux. 

 Self.addeventlistener ('Fetch', (événement) = & gt; {
 console.log (événement);
});

Notre mode de service utilise BrowserSync, qui ajoute son propre script à la page et effectue des demandes de bande Web. Vous verrez aussi les fetchèces pour eux aussi, mais nous voulons les ignorer. Nous voulons aussi seulement cacher obtenir des demandes de notre propre domaine. Ajoutons donc quelques choses pour ignorer les demandes indésirables, notamment en ignorant explicitement le / Chemin d'index: 

 Self.addeventlistener ('Fetch', (événement) = & gt; {
 // ignore les demandes de crossomain
 if (! event.request.url.startswith (self.location.origine)) {
   revenir;
 }
 // ignore les demandes non-obtenues
 if (event.request.method! == 'get') {
   revenir;
 }
 // ignorer le navigateur-synchroniser
 if (événement.request.url.indexof ('Browser-Sync') & GT; -1) {
   revenir;
 }
 // empêcher la mise en cache de la route d'index
 if (event.request.url === (self.location.origin + '/')) {
   revenir;
 }
 // prévenir l'index.html en cache
 if (event.request.url.endswith ('index.html')) {
   revenir;
 }
 console.log (événement);
});

Maintenant, les journaux doivent être beaucoup plus propres et il est prudent de démarrer la mise en cache.

08. Cache les actifs

Maintenant, nous pouvons commencer à mettre en cache ces réponses. Nous devons d'abord donner un nom à notre cache. Appelons la nôtre V1-Actifs . Ajoutez cette ligne au sommet du fichier SW.JS: 

 Cons-actifscachename = 'V1-Actifs';

Ensuite, nous devons détourner les fetchèces afin que nous puissions contrôler ce qui est retourné à la page. Nous pouvons faire cela en utilisant l'événement répondre avec méthode. Cette méthode accepte une promesse afin que nous puissions ajouter ce code, le remplacement de la console.log : 

 // Dites à la récupération de répondre avec cette chaîne de promesse
 événement.respondavecwith (
   // ouvre le cache
   caches.open (actifscachename)
     .Ce ((cache) = & gt; {
       // apporte la demande au réseau
       Retour Fetch (Event.Request)
         .Ce ((réponse) = & gt; {
           // cache la réponse
           cache.put (événement.Request, réponse.clone ());
           // renvoie la réponse originale à la page
           Réponse de retour;
         });
     })
 );

Cela transmettra la demande sur le réseau, puis stockez la réponse dans le cache, avant d'envoyer la réponse initiale à la page.

Il convient de noter ici que cette approche ne cache pas réellement les réponses avant la deuxième fois que l'utilisateur charge la page. La première fois installera et activera le travailleur, mais au moment où la aller chercher L'auditeur est prêt, tout aura déjà été demandé.

Rafraîchissez quelques fois et vérifiez le cache dans le DevTools & GT; Onglet Application. Développez l'arborescence de stockage de cache dans la colonne de gauche et vous devez voir votre cache avec toutes les réponses stockées.

09. Servir de la cache

Tout est mis en cache mais nous n'utilisons pas réellement le cache pour servir tous les fichiers pour l'instant. Accrochons cela maintenant. D'abord, nous recherchons un match pour la demande dans le cache et si elle existe, nous servirons cela. Si cela n'existe pas, nous utiliserons le réseau, puis mettez en cache la réponse. 

// dis dire à la récupération de répondre avec cette chaîne
 événement.respondavecwith (
   // ouvre le cache
   caches.open (actifscachename)
     .Ce ((cache) = & gt; {
       // Cherchez la demande de correspondance dans le cache
       Retour Cache.Match (événement.Request)
         .Ce ((correspondant) = & gt; {
           // Si une correspondance est trouvée, renvoyez la version mise en cache
           Si (correspondant) {
             Retour correspondance;
           }
           // continue au réseau
           Retour Fetch (Event.Request)
             .Ce ((réponse) = & gt; {
               // cache la réponse
               cache.put (événement.Request, réponse.clone ());
               // renvoie la réponse originale à la page
               Réponse de retour;
             });
         });
     })
);

Enregistrez le fichier et rafraîchissez. Vérifiez DEVTOOLS & GT; Onglet Réseau et vous devriez voir (de ServiceWorker) répertorié dans la colonne Taille de chacun des actifs statiques.

Ouf, nous avons fini. Pour une telle petite quantité de code, il y a beaucoup à comprendre. Vous devriez voir que rafraîchissant la page une fois que tous les actifs sont mis en cache est assez snappé, mais faisons une vérification rapide (non scientifique) de temps de chargement sur une connexion étranglée (DevTools & GT; Onglet Réseau).

Sans le travailleur de service, le chargement sur un réseau 3G rapide simulé prend près de 30 secondes pour que tout se charge. Avec le travailleur de service, avec la même connexion étranglée, mais le chargement du cache, il faut un peu moins d'une seconde.

Cochez la case hors ligne et actualiser et vous verrez également que la page se charge sans connexion, bien que nous ne puissiez pas obtenir les données de prévision de l'API. À la page 2, nous y reviendrons et apprenons à cacher la réponse de l'API aussi.

Page suivante: Utilisez le travailleur de service pour offrir un accès en ligne

[dix] [dix]
  • 1
  • 2

Page actuelle: Page 1: Chargement plus rapide

[dix]
[dix]

Comment - Most Popular Articles

Comment simplifier la création de forme de mélange en maya

Comment Sep 15, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Antony Ward) [DIX] À Maya, Mélangez des ..

Comment concevoir des bêtes fantastiques crédibles

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Il existe de nombreuses façons d'aborder la créature et con..

Dessine une geisha Bad-Ass

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Dans cette illustration de Geisha, je voulais capturer une ambiance urbaine g..

Créer une douche de météore dans 3Ds max

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Si vous souhaitez effectuer une douche de météore 3D pour une scène ou un ..

Les secrets de la réalisation d'un mémoire de conception créatif

Comment Sep 15, 2025

Un de mes tuteurs m'a dit une fois que s'il était enfermé en prison pour le reste de sa vie, avec rien d'autre qu'un stylo et un papier, il n'écrirait pas une chose, à part peut-être «a..

Comment rendre un ciel photoréaliste

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Pour ce tutoriel, nous utiliserons Vue Xstream ..

Développer vos compétences caricatures

Comment Sep 15, 2025

[dix] [dix] [dix] [dix] Quand j'ai décidé d'être un illustrateur et un caricaturiste indépendant ..

Commencez avec le prototypage dans Adobe XD

Comment Sep 15, 2025

À mesure que la demande de professionnels de la conception UX continue de croître, des concepteurs recherchent des outils faciles à utiliser suffisamment puissants pour créer des prototyp..

Catégories