Share
L'API Service Worker pour les navigateurs permet aux concepteurs Web d'offrir aux visiteurs quelque chose qu'ils n'avaient jamais eu auparavant: accès à des sites ou à des applications Web même en mode hors connexion, que ce soit pour de courtes ou de longues durées..
Que vous souhaitiez vous assurer qu'un visiteur peut toujours lire votre site tout en empruntant un tunnel ferroviaire ou que vous souhaitiez créer des applications ne nécessitant pas de connexion Internet, les techniciens de maintenance constituent la solution idéale..
Même si les agents de service sont formidables, lorsque vous commencez à les coder pour la première fois, quelques accrocs peuvent ralentir vos progrès - à moins que vous ne sachiez à quoi ils servent. Ce tutoriel vous fournira cinq conseils essentiels pour le développement du personnel de service. Nous espérons qu'ils vous aideront à éviter ces hoquets et à vous éviter des problèmes de dépannage associés..
Si vous débutez dans le service après-vente, consultez notre cours pour débutants intitulé Ouvriers du service simple pour sites Web hors ligne et le livre de Jeremy Keith, Going Offline, tous deux disponibles sur Envato Elements..
Le problème le plus ancien qui puisse vous inquiéter lorsque vous écrivez votre premier technicien de maintenance est que vous ferez probablement ce que vous faites toujours et que vous placerez votre script dans un sous-répertoire nommé js ou des scripts. Cependant, avec les travailleurs des services, cette action banale peut être problématique.
La raison en est que la portée de votre prestataire de services est, par défaut, définie par son emplacement. Qu'est-ce que ça veut dire? Cela signifie que si vous mettez votre script dans un / js répertoire sa portée est maintenant limitée à celle / js annuaire. De ce fait, il ne peut gérer que les demandes de page provenant de www.votresite.com/js/, et ignorera complètement les autres demandes, telles que celles émanant de www.votresite.com ou www.votresite.com/news/ par exemple.
Cette portée limitée à son tour signifie que vous ne serez pas en mesure de fournir des solutions de secours hors ligne pour la plupart de votre site. Pour que votre technicien de service puisse traiter toutes les demandes émanant de n'importe quelle partie de votre site, son champ d'application doit être exhaustif..
Remarque: vous pouvez en réalité remplacer la portée par défaut de votre prestataire de services lors de son enregistrement, par exemple.
Accentsconagua
navigator.serviceWorker.register ('/ sw.js', scope: '/'); Avec cette approche, vous pouvez toujours stocker tous vos scripts dans un sous-répertoire si cela est très important pour votre projet..
Mais en règle générale, l’approche la plus simple consiste à placer votre prestataire de services dans le répertoire racine, ce qui permet de définir automatiquement son étendue pour couvrir l’ensemble du site..
Bien que les techniciens de maintenance soient pris en charge par tous les principaux navigateurs, à l’heure actuelle, Chrome ou Chromium est sans doute le meilleur navigateur pour les développer. Ceci est dû au très utile panneau d’application, disponible dans les outils de développement. Lorsque vous suivez le processus de développement, vous allez quasiment vivre dans cet onglet:
Dans cet onglet, vous trouverez une section dédiée aux techniciens de maintenance dans laquelle vous pouvez vérifier que votre script est enregistré, actif et en cours d'exécution. Vous pouvez également utiliser cet onglet pour simuler le fait d'être hors ligne, contourner temporairement vos agents de maintenance et désenregistrer manuellement les scripts précédents dont vous n'avez plus besoin..
En plus de ne pas mettre de scripts dans un sous-répertoire, une autre habitude de développement que vous devrez mettre de côté pour mettre en place des agents de service consiste à utiliser “Hard Reload” ou “Vider Cache and Hard Reload”. Vous l'avez probablement déjà fait des milliers de fois lorsque vous avez testé des sites, en utilisant cette fonctionnalité pour purger votre cache et vous assurer de refléter avec précision vos modifications en matière de développement. Mais avec les travailleurs du service, cela ne produira pas l'effet souhaité.
Lorsque vous avez un technicien inscrit et actif, toute utilisation de “Hard Reload” l’ignorera complètement. Vous pourriez avoir du mal à recharger votre site, voir que votre code n'a pas fonctionné comme prévu et penser que vous avez commis une erreur, pour vous rendre compte plus tard que le script n'a jamais été exécuté en premier lieu.
La mauvaise nouvelle est donc que “Hard Reload” et “Empty Cache and Hard Reload” sont interdits pendant le développement du personnel de service, ce qui nous amène à notre prochaine question:
Comment actualiser correctement votre page et tester vos modifications dans le code du technicien de service si vous ne pouvez pas utiliser «Hard Reload» ou «Vider Cache and Hard Reload»?
La réponse à cette question réside dans les deux conseils suivants:
Par défaut, lorsque vous actualisez une page sur laquelle vous testez un agent de service, vous ne verrez pas réellement les résultats de vos modifications de code. En effet, la version du script que vous avez initialement enregistrée est celle qui reste active dans le navigateur, même après le rechargement de la page, sauf si vous prenez des mesures explicites pour le mettre à jour..
Ici encore, nous sommes dans une situation où vous pourriez actualiser votre page et vous demander pourquoi vos modifications de code ne prennent pas effet, à moins que vous ne soyez au courant des bizarreries des techniciens de maintenance..
Pour vous assurer de toujours charger la dernière version de votre script, accédez à la section Applications onglet et vérifiez la Mise à jour sur le rechargement boîte. Cela garantit que chaque fois que vous rechargez la page (et rappelez-vous, utilisez uniquement un rechargement normal, pas un rechargement dur), le navigateur mettra automatiquement à jour le technicien de maintenance pour vous..
Remarque: il y a l'option supplémentaire de cliquer sur le Mettre à jour lien affiché à côté de votre technicien de service inscrit, mais l'utilisation de l'approche automatisée lors du rechargement est généralement plus facile.
La dernière fonctionnalité, très pratique, de la Applications L'onglet que nous allons aborder est la possibilité de jeter un coup d'œil à l'intérieur des objets stockés dans le cache et de les supprimer manuellement si nécessaire. Étant donné que nous ne voulons pas utiliser Cache vide et rechargement dur, cette fonctionnalité deviendra une partie essentielle du processus de développement du service worker.
Dans la colonne de gauche du Applications onglet, vous verrez une zone étiquetée Stockage en cache. Si vous développez cette zone, vous pourrez voir tous les objets de cache stockés en relation avec l'URL actuelle..
Cliquez sur n'importe lequel de ces éléments pour en examiner le contenu, ce qui est très utile pour vérifier que les ressources que vous souhaitez servir hors connexion sont correctement ajoutées au cache par votre technicien..
Pour vous débarrasser des objets du cache dont vous n’avez plus besoin, il suffit de cliquer avec le bouton droit de la souris sur un objet et de choisir Effacer.
Entre cette fonction de suppression d’objet de cache et le Mise à jour sur le rechargement case à cocher, vous êtes prêt à utiliser le rechargement normal des pages tout en veillant à bien tester les dernières modifications apportées à votre travail.
Pour en savoir plus sur les ouvriers du service, consultez notre nouveau cours intitulé Ouvriers du service simple pour sites Web hors connexion et le livre de Jeremy Keith intitulé Going Offline, disponible sur Envato Elements..
