Erste Schritte mit Dienstangestellten

Servicearbeiter: Offline -Web -Apps und darüber hinaus

In diesem Artikel werden Dienstangestellte, Hintergrundskripte untersucht, die Funktionen wie Push -Benachrichtigungen und Offline -Funktionen ermöglichen, indem Netzwerkanforderungen abfangen. Wir werden die Registrierungs-, Zwischenspeicher-, Aktualisierungs- und Debugging -Techniken behandeln.

Schlüsselkonzepte:

• Hintergrundbetrieb: Servicemitarbeiter werden unabhängig von Webseiten ausgeführt, auch wenn die Website geschlossen ist. Sie kommunizieren mit Seiten über postMessage.
• Sichere Ursprünge: Servicearbeiter benötigen aus Sicherheitsgründen HTTPS (oder localhost). Mehrere Registrierungen werden vom Browser automatisch behandelt. (chrome://serviceworker-internals zur Inspektion).
• Ereignisbehandlung: Sie reagieren auf Ereignisse wie install, activate und fetch, sodass die Kontrolle über Caching- und Netzwerkanforderungen kontrolliert werden kann.
• Caching: Service -Mitarbeiter -Cache -Webseitenkomponenten, und aktivieren Sie den Offline -Zugriff bei nachfolgenden Besuchen.
• Debugging: Debugging ist ein experimentelles Merkmal (in Chrome Devtools aktiviert). Manuelle Unregistrierung ist über chrome://serviceworker-internals/.
möglich

Erste Schritte: Registrierung

Registrieren eines Servicemitarbeiters beinhaltet die Überprüfung des Browser -Supports und die Verwendung von navigator.serviceWorker.register(). Der Parameter scope definiert die URL -Pfade, die die Arbeiter kontrollieren.

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.');
}

Installation und Aktivierung:

Das Ereignis löst bei der ersten Begegnung aus. install bedeutet, dass der Arbeiter die Kontrolle übernimmt. Beachten activate

self.addEventListener('install', event => console.log(event));
self.addEventListener('activate', event => console.log(event));

Abfangen von Netzwerkanforderungen:

Das Ereignis

ermöglicht die Abnahme von Anforderungen. Wir können zwischengespeicherte Inhalte oder Anfragen an den Server leiten.

lädt externe Skripte (z. B. Cache-Polyfill für breitere Kompatibilität). fetch importScripts()

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;
    });
}

Cache -Updates:

Das Aktualisieren des Cache erfordert Inkrementierung

. Der neue Servicearbeiter wartet, bis alle kontrollierten Seiten vor dem Aktivieren geschlossen werden, und räumen Sie alte Cache -Versionen im Ereignis

auf. CACHE_VERSION activate

self.addEventListener('activate', event => {
    event.waitUntil(caches.keys().then(keys => Promise.all(keys.map(key => (key !== CACHE_VERSION ? caches.delete(key) : null)))));
});

Debugging:

Debuggen von Service Worker in Chrome Devtools (Flags, Experimente) aktivieren. Das Ressourcenbereich zeigt registrierte Arbeitnehmer an, sodass eine manuelle Unregistrierung.

ermöglicht.

häufig gestellte Fragen:

Dieser Abschnitt enthält Antworten auf gemeinsame Fragen zu Dienstangestellten, die Unterschiede von Webangestellten, Teststrategien, HTTP-Anforderungsbearbeitung, Aktualisierungsmechanismen, Echtzeit-Dateneignung, Debugging-Methoden, API-Kompatibilität, Sicherheitsaspekte, Browserunterstützung und Unregistrierung umfasst Verfahren.

Diese überarbeitete Ausgabe behält die Originalbildorte und -formate bei, während der Text erheblich umformuliert wird, um die Klarheit und den Fluss zu verbessern, wodurch direkter Plagiat vermieden wird. Die Schlüsselinformationen bleiben gleich.

Das obige ist der detaillierte Inhalt vonErste Schritte mit Dienstangestellten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!