Hatten Sie eine Situation, in der das Laden einer Website zu lange dauerte, wie in diesem GIF unten?

? Haben Sie von Servicemitarbeitern gehört?

In diesem Beitrag befassen wir uns damit, was Servicemitarbeiter sind?, wie sie arbeiten ⚙️ und wie ich sie eingesetzt habe, um die Leistung meiner Webanwendung zu verbessern.

Was ist ein Servicemitarbeiter? ?

Ein Service Worker ist ein Hintergrundskript, das separat von der Webseite ausgeführt wird und Folgendes kann:

• Assets zwischenspeichern ?️
• Netzwerkanfragen abfangen?
• Offline-Funktionalität bereitstellen?

Hauptmerkmale von Servicemitarbeitern:

1. Läuft im Hintergrund: Servicemitarbeiter sind nicht an den Lebenszyklus der Seite gebunden, was bedeutet, dass sie auch dann weiterarbeiten können, wenn die Seite geschlossen ist
2. Ereignisgesteuert: Servicemitarbeiter hören auf bestimmte Ereignisse, wie z. B. Netzwerkanfragen (Abrufereignis)
3. Kein DOM-Zugriff: Im Gegensatz zu anderen Web-Workern haben Service-Worker keinen direkten Zugriff auf das DOM. Sie agieren im Hintergrund und verwalten Ressourcen und Netzwerkverkehr

Hier ist ein einfaches Beispiel eines Service Worker-Skripts:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(error) {
      console.error('Service Worker registration failed:', error);
    });
  });
}

? In diesem Snippet wird der Service Worker (service-worker.js) beim Laden der Seite registriert. Wenn die Registrierung erfolgreich ist, wird der Umfang des Servicemitarbeiters protokolliert. andernfalls wird ein Fehler protokolliert.

Meine Herausforderung: Ein Unity WebGL-Spiel in eine Webseite integrieren

Ich habe ein Unity WebGL-Spiel in eine .NET Razor-Website integriert. Das Spiel bestand aus großen „.wasm“- und „.data“-Dateien sowie JavaScript-Dateien, die für das Laden des Spiels von entscheidender Bedeutung waren. Beim ersten Laden der Seite dauerte es jedoch über 20 Sekunden! ? Dies lag vor allem an der Größe der Dateien „.wasm“ und „.data“.

Die Lösung: Caching mit Servicemitarbeitern

Ich habe eine „ServiceWorker.js“-Datei erstellt, die alle notwendigen Spielressourcen zwischenspeichert, um die Ladezeit zu verkürzen. Folgendes enthält die Datei:

const cacheName = "$Project_name";
const contentToCache = [
    "Build/Game.loader.js",
    "Build/Game.framework.js",
    "Build/Game.data",
    "Build/Game.wasm",
    "TemplateData/game_style.css"
];

self.addEventListener('install', function (e) {
    console.log('[Service Worker] Install');

    e.waitUntil((async function () {
        try {
            const cache = await caches.open(cacheName);
            console.log('[Service Worker] Caching all: app shell and content');
            for (const resource of contentToCache) {
                try {
                    await cache.add(resource);
                } catch (error) {
                    console.error(`[Service Worker] Failed to cache: ${resource}`, error);
                }
            }
        } catch (error) {
            console.error('[Service Worker] Failed to open cache', error);
        }
    })());
});

self.addEventListener('fetch', function (e) {
     e.respondWith((async function () {
        try {
            const response = await caches.match(e.request);
            console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
            if (response) return response;

            const fetchResponse = await fetch(e.request);
            const cache = await caches.open(cacheName);
            console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
            await cache.put(e.request, fetchResponse.clone());
            return fetchResponse;
        } catch (error) {
            console.error(`[Service Worker] Error fetching resource: ${e.request.url}`, error);
            throw error;
        }
    })());
});

Was macht dieser Code?

Dieses Service-Worker-Skript führt die folgenden Aktionen aus:

• Zwischenspeichert wichtige Dateien, die für die Ausführung des Spiels erforderlich sind, einschließlich „.wasm“, „.data“ und JS-Dateien während der Installationsphase.
• Fängt Abrufanfragen ab, um zwischengespeicherte Ressourcen bereitzustellen, sofern verfügbar. Wenn sich die Ressource nicht im Cache befindet, wird sie aus dem Netzwerk abgerufen, zwischengespeichert und die Antwort zurückgegeben.

Das Ergebnis: Deutliche Leistungssteigerung

Durch das Zwischenspeichern dieser Assets wurde die Ladezeit von 20 Sekunden auf unter 3 Sekunden verkürzt? Wenn Benutzer die Seite das nächste Mal besuchen, sind die Assets bereits lokal gespeichert, was das Erlebnis drastisch beschleunigt.

⚠️ Seien Sie vorsichtig! Das Caching-Problem

Während dieser Ansatz Wunder bei der Verbesserung der Leistung bewirkt, führte er zu einem weiteren Problem: veraltete zwischengespeicherte Dateien. Da wir das Unity-Spiel aktiv weiterentwickeln und neue Versionen veröffentlichen, mussten die zwischengespeicherten Dateien jedes Mal gelöscht werden, wenn eine neue Version bereitgestellt wurde.

Um dieses Problem zu lösen, habe ich ein Pipeline-Skript erstellt, das automatisch die Registrierung des alten Service-Workers aufhebt und den Cache löscht, wann immer wir einen neuen Spiel-Build veröffentlichen. Dadurch wird sichergestellt, dass Benutzer immer die neuesten Assets laden, ohne bei alten, zwischengespeicherten Versionen hängenzubleiben.

Abschluss

Die Implementierung von Servicemitarbeitern in Ihre Webanwendung kann die Leistung erheblich verbessern, insbesondere beim Umgang mit großen Assets wie in meinem Unity WebGL-Spiel. Allerdings ist es wichtig, sorgfältig mit dem Caching umzugehen, um die Bereitstellung veralteter Dateien zu vermeiden.

Haben Sie ähnliche Erfahrungen mit der Optimierung von Ladezeiten gemacht? Haben Sie Servicemitarbeiter oder andere Techniken eingesetzt? Teilen Sie Ihre Gedanken und Erkenntnisse in den Kommentaren unten! ?

Ich hoffe, Sie haben heute etwas Neues gelernt! ✌️