Maison > Article > interface Web > Travailleurs des services

Travailleurs des services

WBOYoriginal: 2024-08-09 07:28:421065parcourir

Les Service Workers sont des API Web qui peuvent être utilisées à des fins « spécifiques » entre un navigateur, une application et Internet.

Service Workers

Les Service Workers sont des scripts qui s'exécutent en arrière-plan d'une application Web, distincts du thread principal du navigateur. Ils activent les notifications push, la synchronisation en arrière-plan et les fonctionnalités hors ligne. Les techniciens de service fonctionnent comme intermédiaire entre l'application Web, le navigateur et le réseau. Voici des exemples de comment et quand les techniciens de service peuvent être utilisés :

1. Assistance hors ligne :

Le Service Worker met en cache les ressources importantes (HTML, CSS, JavaScript, images) lorsqu'un utilisateur visite un site Web pour la première fois.
Peut être récupéré du cache lors de la prochaine visite, offrant une fonctionnalité hors ligne continue.

2. Notifications poussées :

Les techniciens de service vous permettent d'envoyer des notifications push même lorsque l'application Web n'est pas ouverte.
Les notifications peuvent être déclenchées par des événements externes ou des mises à jour du serveur.

3. Synchronisation en arrière-plan :

Les techniciens de service activent la synchronisation en arrière-plan, ce qui permet à une application de mettre à jour les données ou de récupérer du nouveau contenu en arrière-plan.
Ceci est utile pour les mises à jour des données en temps réel.

4. Mise en cache de contenu dynamique :

Les techniciens de service peuvent mettre en cache dynamiquement le contenu en fonction du comportement de l'utilisateur sur une page Web.
Cela permet de diffuser rapidement le contenu fréquemment consulté.

5. Optimisation des performances :

Les techniciens de service améliorent considérablement les performances des pages Web en pré-mettant en cache les actifs et les ressources.
Ils peuvent charger sélectivement les ressources en fonction du comportement de l'utilisateur en optimisant le processus de chargement.

6. Récupération en arrière-plan :

Les techniciens de service activent le chargement en arrière-plan, ce qui permet de télécharger même des fichiers ou des ressources volumineux.

Habituellement, lorsque vous visitez une page Web, la page Web envoie une requête au serveur, et le serveur vous renvoie les données :

Service Workers

Si vous avez un Service Worker enregistré, il sera ajouté comme middleware entre le navigateur Web et le serveur :

Service Workers

Il arrête la requête vers le serveur et décide si la requête est envoyée au serveur ou fonctionne hors ligne. Et au lieu de vous montrer une page 404 Not Found dans ce cas, vous pourrez voir la page entière hors ligne. Vous pouvez également créer des pages hors ligne personnalisées avec des techniciens de service.

S'il n'y a pas d'Internet sur votre ordinateur, une page d'erreur s'affichera.

Même s'il n'y a pas d'Internet, nous accéderons à la page Web avec un technicien de service.

Cycle de vie et événement du travailleur de service

ENREGISTRER → INSTALLER → ACTIVER → RÉCUPÉRER

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
    <!-- Scripts -->
    <script src="main.js" defer></script>
  </head>
  <body>
    <!-- istalgan kodlaringizni yozishingiz mumkin... -->
  </body>
</html>

nous avons connecté le fichier main.js au HTML.

main.js

// service worker browser tomonidan support qilinishini tekshirib olamiz
if ('serviceWorker' in navigator) {
  // web sahifa browserga yuklanishi bilan ishlashini aytib o'tamiz
  window.addEventListener('load', () => {
    // 1. service workerni registratsiyadan o'tkazamiz.
    navigator.serviceWorker
      .register('sw.js') // bizda sm.js file ochib olishimiz kerak bo'ladi. va bu yerdagi register ushani target qiladi.
      .then((registration) =>
        console.log('Service Worker registered with scope:', registration.scope)
      )
      .catch((error) => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

sw.js

// browser kashda qanday nom nilan saqlanishini bildirish uchun nom beramiz
const cacheName = 'my-cache-v1';

// Qaysi fayllarni kashlashini aytib o'tib ketamiz
const cacheFiles = ['index.html', 'posts.html', 'css/style.css', 'js/main.js'];

// 2. INSTALL qilamiz
self.addEventListener('install', (event) => {
  event.waitUntil(
        // kashdan biz bergan nom bilan joy ochadi va bizni fayllarimizni joylaydi.
    caches.open(cacheName).then((cache) => cache.addAll(cacheFiles))
  );
});

// 3. ACTIVATE qilish
self.addEventListener('activate', () => {
  console.log('Server worker activated');
});

// 4. FETCH, ya'ni oflayn holatimizda kashlangan fillarni ko'rsatish uchun olish
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches
      .match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

Après avoir effectué ce processus, nous pouvons voir que l'activation a eu lieu si nous allons dans la colonne Applications dans la section des outils de développement du navigateur et voyons la section Service Workers.

Service Workers

Quand nous passerons à la partie stockage du cache, nous obtiendrons les fichiers que nous avons marqués du nom que nous avons donné.

Service Workers

Et après avoir regardé ceux-ci, nous pouvons voir le résultat :

Comme vous pouvez le constater, cela fonctionne désormais hors ligne. À l'état hors ligne, le Service Worker le récupère à l'endroit qu'il nous a ouvert dans le cache Storage.

@abdulakhatov-dev
@AbdulakhatovDev

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html Error register Event Thread JS background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi TypeScript est meilleur que JavaScript : principaux avantages pour le développement Web moderneArticle suivant：Pourquoi TypeScript est meilleur que JavaScript : principaux avantages pour le développement Web moderne

Articles Liés

Voir plus