Ajoutez un employé de service à votre site

Améliorez les performances et la résilience de votre site Web en 2022 en ajoutant un travailleur de service (si vous ne l'avez pas déjà fait). Ce puissant outil JavaScript offre des avantages importants. Explorons ses capacités et fournissons un guide de mise en œuvre simple.

Comprendre les travailleurs du service

Un agent de service agit comme un middleware pour votre site Web. Toutes les demandes et réponses le font passer. Il gère également un cache local pour stocker les actifs et les réponses. Cela permet:

• Performances améliorées: servez les actifs fréquemment accessibles à partir du cache, réduisant l'utilisation des données et les temps de chargement.
• Fonctionnalité hors ligne: donnez un accès au contenu essentiel même en dehors de la ligne.
• Préfecture: Chargez de manière proactive des actifs importants et des API.
• Gestion des erreurs: offrez des actifs de secours en cas d'erreurs HTTP.

Essentiellement, les travailleurs du service créent des expériences Web plus rapides et plus fiables. Contrairement à JavaScript ordinaire, ils manquent d'accès DOM, exécutent sur un fil séparé (ne bloquant pas d'autres scripts) et sont entièrement asynchrones.

Considérations de sécurité

En raison de leur rôle dans l'interception des demandes et des réponses, les travailleurs du service ont des limitations de sécurité:

• Politique d'origine homosexuelle: doit être hébergé sur le même domaine que le site Web. L'hébergement CDN ou tiers n'est pas autorisé.
• Exigence de certificat SSL: nécessite un certificat SSL (des exceptions existent pour les tests localhost , mais pas pour file:// protocole).

De nombreux fournisseurs d'hébergement proposent des certificats SSL au minimum ou sans frais.

Intégrer un employé de service

L'enregistrement d'un employé de services implique d'utiliser navigator.serviceWorker.register() , fournissant le chemin du fichier du travailleur des services:

 Navigator.ServiceWorker.Register ('Sw.js');

Idéalement, placez-le dans une ligne

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

0

3

2980

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

0

11

3193

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

0

1

2598

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

0

1

2562

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

2591

Rubriques connexes

Plus>

• Comment éliminer le code HTML
• La signification de div en CSS
• Comment vérifier les liens morts d'un site Web
• Introduction à l'emplacement d'ouverture d'exécution de Windows 10
• Fonctions de la commande tracert
• Pourquoi ne puis-je pas ouvrir Pinterest ?
• Comment supprimer des éléments de tableau en JavaScript
• Introduction à la syntaxe de vitesse