Commencer avec les travailleurs du service

Travailleurs de services: applications Web hors ligne et au-delà de

Cet article explore les travailleurs du service, les scripts de fond permettant des fonctionnalités telles que les notifications push et les fonctionnalités hors ligne en interceptant les demandes de réseau. Nous couvrirons les techniques d'enregistrement, de mise en cache, de mise à jour et de débogage.

Concepts clés:

• Fonctionnement d'arrière-plan: Les travailleurs du service exécutent indépendamment des pages Web, même lorsque le site est fermé. Ils communiquent avec les pages via postMessage.
• Origines sécurisées: Les travailleurs du service ont besoin de HTTPS (ou localhost) pour des raisons de sécurité. Plusieurs inscriptions sont gérées automatiquement par le navigateur. (chrome://serviceworker-internals pour l'inspection).
• Gestion des événements: Ils répondent à des événements comme install, activate, et fetch, permettant le contrôle de la mise en cache et des demandes de réseau.
• CACHING: Les travailleurs du service Cache Page Web Composants, permettant un accès hors ligne lors des visites suivantes.
• Débogage: Le débogage est une caractéristique expérimentale (activer dans Chrome Devtools). Le non-enregistrement manuel est possible via chrome://serviceworker-internals/.

Début: Enregistrement

L'enregistrement d'un service de service implique la vérification du support du navigateur et l'utilisation navigator.serviceWorker.register(). Le paramètre scope définit les chemins d'URL que le travailleur contrôle.

<code class="language-javascript">if (navigator.serviceWorker) {
    navigator.serviceWorker.register('./service-worker.js', {scope: './about'})
        .then(registration => console.log(registration))
        .catch(e => console.error(e));
} else {
    console.log('Service Worker not supported.');
}</code>

Installation et activation:

L'événement install déclenche lors de la première rencontre. activate signifie que le travailleur prendra le contrôle. Notez que la journalisation au sein du service du service nécessite l'activation de débogage dans Devtools.

<code class="language-javascript">self.addEventListener('install', event => console.log(event));
self.addEventListener('activate', event => console.log(event));</code>

Intercepter les demandes de réseau:

L'événement fetch permet d'intercepter les demandes. Nous pouvons servir du contenu en cache ou transférer des demandes au serveur. importScripts() charge des scripts externes (par exemple, le cache-polyfill pour une compatibilité plus large).

<code class="language-javascript">importScripts('js/cache-polyfill.js');
const CACHE_VERSION = 'app-v1';
const CACHE_FILES = [ '/', 'images/background.jpeg', 'js/app.js', 'css/styles.css', 'https://fonts.googleapis.com/css?family=Roboto:100' ];

self.addEventListener('install', event => {
    event.waitUntil(caches.open(CACHE_VERSION).then(cache => cache.addAll(CACHE_FILES)));
});

self.addEventListener('fetch', event => {
    event.respondWith(caches.match(event.request).then(res => res || requestBackend(event)));
});

function requestBackend(event) {
    const url = event.request.clone();
    return fetch(url).then(res => {
        if (!res || res.status !== 200 || res.type !== 'basic') return res;
        const response = res.clone();
        caches.open(CACHE_VERSION).then(cache => cache.put(event.request, response));
        return res;
    });
}</code>

Mises à jour du cache:

La mise à jour du cache nécessite l'incrémentation CACHE_VERSION. Le nouveau travailleur de service attend que toutes les pages contrôlées se ferment avant de l'activer, nettoyant les anciennes versions de cache dans l'événement activate.

<code class="language-javascript">self.addEventListener('activate', event => {
    event.waitUntil(caches.keys().then(keys => Promise.all(keys.map(key => (key !== CACHE_VERSION ? caches.delete(key) : null)))));
});</code>

Débogage:

Activer le débogage des travailleurs de service dans Chrome Devtools (drapeaux, expériences). Le panneau Ressources affiche des travailleurs enregistrés, permettant un désirgalisation manuelle.

Questions fréquemment posées:

Cette section comprend des réponses aux questions courantes sur les travailleurs des services, couvrant les différences des travailleurs Web, les stratégies de test, la gestion des demandes HTTP, les mécanismes de mise à jour, l'aptitude aux données en temps réel, les méthodes de débogage, la compatibilité des API, procédures.

Cette sortie révisée maintient les emplacements et les formats d'image d'origine, tout en reformulant considérablement le texte pour une clarté et un flux améliorés, en évitant le plagiat direct. Les informations clés restent les mêmes.

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!