Construisez des applications qui fonctionnent hors ligne

Sep 11, 2025

Comment

[dix] [dix] [dix]

[dix]

Pendant longtemps, la fonctionnalité hors ligne, la synchronisation des antécédents et les notifications push ont des applications indigènes différenciées de leurs homologues Web. Le API de travailleur de service est une technologie de changement de jeu qui voit le terrain de jeu. Dans ce tutoriel, nous l'utiliserons pour créer une page qui peut servir de contenu, même s'il n'y a pas de connexion Internet.

[dix]

Téléchargez le code de fichiersIlo

01. Un serveur HTTPS

Le moyen le plus simple de penser aux travailleurs de service est un élément de code installé par un site sur une machine client, fonctionne en arrière-plan et permet ensuite des demandes envoyées à ce site à intercepter et à manipuler. Comme il s'agit d'une capacité aussi puissante, de travailler avec des travailleurs de service dans un environnement direct, vous devez exécuter sur HTTPS. Cela garantit qu'ils ne peuvent pas être exploités, en veillant à ce que le navigateur reçoit le navigateur d'une page est authentique.

À des fins de développement, cependant, nous pouvons courir sans HTTPS depuis http: // localhost / est autorisé comme une exception à cette règle. Le moyen le plus simple de commencer est avec le NPM http-serveur paquet.

 NPM Installer http-server -g
http-serveur -P 8000 -C-1

02. Configurer une page de base

Il n'y a rien sur le serveur en ce moment, alors faisons une page de base pour servir. Nous allons créer un nouveau fichier index.html et lorsque nous exécutons le serveur, il sera maintenant accessible à http: // localhost: 8000 .

À ce stade, vous constaterez que si vous terminez le serveur HTTP et vous rafraîchissez la page du navigateur, vous obtiendrez une page d'erreur car le site ne peut pas être atteint. Ceci est totalement attendu car nous n'avons pas encore mis en cache de contenu hors ligne.

[dix]

 & lt;! Doctype HTML & GT;
& lt; html & gt;
  & lt; tête & gt;
  & lt; méta chartet = "utf-8" / & gt;
  & lt; Titre & GT; Service Worker & Lt; / Titre & GT;
  & lt; script src = "site.js" & gt; & lt; / script & gt;
  & lt; link rel = "stylesheet" type = "text / css" href = "personnalisé.css" & gt;
  & lt; / tête & gt;
  & lt; corps & gt;
  & lt; en-tête & gt;
  & lt; h1 & gt; accueil & lt; / h1 & gt;
  & lt; / en-tête & gt;
  & lt; div id = "contenu" & gt;
  & lt; p & gt; contenu ici & lt; / p & gt;
  & lt; img src = "kitty.jpg" largeur = "100%" & gt;
  & lt; / div et gt;
  & lt; / corps & gt;
& lt; / html & gt;

03. Enregistrer un service de service

Nous avons maintenant une page de fonctionnement assez inconnu et il est temps de commencer à réfléchir à la mise en œuvre d'un travailleur de service. Avant de faire du codage, cela vaut la peine de prendre un moment pour comprendre le cycle de vie des travailleurs du service.

Le processus commence avec l'enregistrement d'un travailleur de service dans votre JavaScript, qui indique au navigateur de commencer à installer le travailleur - la première étape de son cycle de vie. Tout au long de son cycle de vie, un travailleur de service sera dans l'un des états suivants:

Installation: Une fois qu'un agent de service enregistré, son installation est généralement utilisée pour télécharger et mettre en cache le contenu statique.
Installée: Le travailleur est théoriquement prêt à être utilisé mais n'active pas immédiatement
Activation: Un travailleur de service installé va s'activer s'il n'y a pas de travailleur de service existant, ni certaines conditions mènent à l'expiration existante; L'activation est généralement utilisée pour effacer les anciens fichiers du contenu hors ligne mis en cache
Activé: Le travailleur du service a maintenant un contrôle sur le document et peut gérer des demandes
Redondant: Si le service de service n'a pas réussi à installer ou à être activé, ou s'il est remplacé par un nouveau service de service

04. Vérifiez que vous êtes inscrit

Enregistrons un travailleur de service. Cela pointe efficacement le navigateur vers le fichier JavaScript qui définit le comportement du travailleur du service. L'enregistrement est effectué à l'aide de l'objet Serviceworker qui est le point d'entrée à l'API. Nous allons également vérifier que l'API est réellement présente dans le navigateur avant d'essayer de le faire.

Le S'inscrire() La fonction peut être appelée en toute sécurité à chaque fois que la page chargee et que le navigateur déterminera si le travailleur de service a déjà été enregistré.

[dix]

Si (Serviceworker 'dans Navigator) {
  fenêtre.addeventlistener ('Charge', fonction () {
  navigator.serviceworker.register ('Serviceworker.js', {Scope: './'' - ").Then(Function(Recistration) {
  console.log ("travailleur de service enregistré avec succès.");
  }, fonction (erreur) {
  console.log ("Erreur lors de l'enregistrement du service de service:" + erreur);
  });
  });
}

05. Mettre en œuvre le travailleur du service

Ensuite, nous devons mettre en œuvre le travailleur de service lui-même. Les ouvriers de service peuvent écouter une gamme d'événements liés à leur propre cycle de vie et d'activité sur la page. Les plus importants sont installés, activez et récupérez.

Commençons par créer un auditeur pour le installer événement, qui déclenche une fois l'installation du travailleur terminé. Cela nous permet d'instruire le travailleur de service d'ajouter du contenu hors ligne dans le dossier actuel dans un cache. Nous devons également nommer notre cache - car les anciens caches peuvent persister, mettre à jour / la version de ce nom de cache vous permet de servir plus de nouvelles versions du contenu plus tard.

 var courantCache = 'démo-cache';
Self.addeventlistener ('install', événement = & gt; {
  événement.waituntil (
  caches.Open (couranteCache) .Chen (fonction (cache) {
  console.log ("Ajout de contenu au cache");
  retour cache.addall ([
  './index_offline.html',
  './kitty_offline.jpg',
  './CSS personnalisé'
  ]);
  })
  );
});

06. Fetch Event

Notre page mettra maintenant en cache le contenu lorsqu'il sera chargé, mais nous avons besoin d'un mécanisme pour intercepter des demandes et les rediriger dans ce cache. Pour ce faire, nous devons écouter aller chercher événements, qui sont déclenchés lorsqu'une demande comme obtention de notre index.html Le fichier est effectué sur le réseau. Nous faisons ensuite correspondre la demande contre le cache et servirons la ressource mise en cache si elle est trouvée. Sinon, nous retombons à une demande d'API de récupération au serveur.

Il vaut la peine de noter que nous avons une forte dépendance à la promesse JavaScript de travailler. Celles-ci peuvent être un peu difficiles, alors méritez la peine de vous familiariser avec si vous ne les avez pas utilisées auparavant.

 Self.addeventlistener ('Fetch', Event = & GT; {
  événement.respondavecwith (
  caches.match (événement.request) .Ce (réponse = & gt; {
  Réponse de retour || aller chercher (événement.request);
  })
   );
    });

07. Étendez l'événement de récupération

Si vous le testez maintenant (terminez le serveur HTTP et actualisez la page), vous devez constater que votre page fonctionne à la fois en ligne et hors ligne. Cependant, il est probable que vous souhaitiez un comportement hors ligne plus intelligent, avec différents contenus ou fonctionnalités disponibles lorsque le serveur est indisponible.

Pour y parvenir, nous pouvons étendre notre aller chercher Réponse d'événement En outre pour vérifier spécifiquement les demandes de navigation et répondre avec une page hors ligne différente lorsque l'on est détectée. Ce index_offline.html Le fichier peut être une variante de votre page en ligne ou quelque chose de complètement différent et peut également utiliser d'autres ressources que vous avez mises en cache telles que CSS personnalisé .

 Self.addeventlistener ('Fetch', Event = & GT; {
  if (event.request.mode === 'naviguer') {
  événement.respondavecwith (
  Fetch (Event.Request) .Catch (Error = & GT; {
  console.log ("page indisponible. Renvoyer le contenu hors ligne.");
  retourne caches.match ('./ index_offline.html');
  })
  );
  } autre {
  événement.respondavecwith (
  caches.match (événement.request) .Ce (réponse = & gt; {
  Réponse de retour || aller chercher (événement.request);
  })
  );
  }
});

08. Supprimer le cache

Il y a encore une chose dont nous avons besoin. Si vous essayez maintenant de modifier votre contenu hors ligne, vous trouverez qu'il ne met pas à jour lorsque vous testez votre page - vous obtenez toujours l'ancienne version! En effet, les fichiers plus anciens sont toujours mis en cache.

Vous devez mettre en œuvre quelque chose pour nettoyer les fichiers obsolètes du cache pour éviter qu'ils soient servis. Ceci est fait en répondant à un Activer événement et suppression de tous les caches qui ne correspondent pas au nom spécifié dans CurrentCache. Vous pouvez ensuite ajouter un numéro de version à CourdifiéCache à chaque fois que vous modifiez votre contenu hors ligne, pour vous assurer qu'il est rafraîchi.

 Ceci.addeventlistener ('Activer', Event = & GT; {
  var activeCaches = [couranteCache];
  console.log ("travailleur de service activé. Vérification du cache est à jour.");
  événement.waituntil (
  Caches.Keys (). Ensuite (Keylist = & GT; {
  retour promesse.All (keylist.map (clé = & gt; {
  Si (ActiveCaches.indexof (Key) === -1) {
  console.log ("Supprimer l'ancien cache" + touche);
  retourne caches.delete (clé);
  }
  }));
  })
  );
});

Cet article a été publié dans Web Designer Magazine Numéro 268. Abonnez-vous maintenant.

Lire la suite:

Guide du codeur des API
Commencez avec Webgl en utilisant trois.js
12 énormes tendances de conception Web pour 2018

[dix] [dix]

[dix]

Construisez des applications qui fonctionnent hors ligne

01. Un serveur HTTPS

02. Configurer une page de base

03. Enregistrer un service de service

04. Vérifiez que vous êtes inscrit

05. Mettre en œuvre le travailleur du service

06. Fetch Event

07. Étendez l'événement de récupération

08. Supprimer le cache

Comment - Most Popular Articles

Comment configurer et optimiser votre StoreFront SMUGMUG

Comment créer un effet de parallaxe superposé sur votre site

Comment masquer votre code JavaScript à partir de la source de vue

Créer des animations slick ui

Mode Modalités flexibles avec grille CSS

Comment créer des glaçures avec aquarelle

Aiguisez vos compétences de peinture nature morte

Top astuces pour affiner vos techniques d'illustration dessinées à la main

Catégories