Die Interaktion mit der IndexedDB (siehe Datenspeicher) ist asynchron und kann die Performance deiner Anwendung beeinträchtigen. Um dies zu vermeiden, delegieren wir die Arbeit an einen Web-Worker. Der Web-Worker läuft in einem separaten Thread. Er kommuniziert über Nachrichten mit dem Haupt-Thread. Dadurch können wir Daten im Hintergrund laden, speichern und aktualisieren, ohne die Benutzeroberfläche zu beeinträchtigen.
Schauen wir uns das im Detail an.
Das Konzept der Web-Komponenten sollte dir bekannt sein. Auch solltest du wissen, was eine IndexedDB ist.
Zur Kommunikation mit dem Web-Worker verwenden wir die Klasse WorkerProxy. Diese Klasse stellt Methoden zur Verfügung, um den Web-Worker zu starten und Daten an den Web-Worker zu senden respektive vom Web-Worker zu empfangen. Wir laden die Klasse über die default.js, die im HTML eingebunden ist. Ich sammle die Klassen im Unterordner modules und nenne die Dateien wie die Klasse, aber mit Kleinbuchstaben beginnend.
// Modules namespace
const Modules = {};
Modules.coreReady = (async () => {
const { WorkerProxy } = await import('./modules/workerProxy.js');
const { DataStore } = await import('./modules/dataStore.js');
Modules.workerProxy = new WorkerProxy();
await Modules.workerProxy.init();
Modules.dataStore = new DataStore({ webWorker: Modules.workerProxy });
})();
document.addEventListener('DOMContentLoaded', async () => {
await Modules.coreReady;
});
Du kannst dir alle Javascripte herunterladen.
Die Klasse WorkerProxy startet den Web-Worker und stellt Methoden zur Verfügung, um Nachrichten an den Worker zu senden und Nachrichten vom Worker zu empfangen. Der Web-Worker empfängt die Nachrichten, verarbeitet sie und sendet die Ergebnisse zurück an den Haupt-Thread.
Die Kommunikation erfolgt über das PostMessage-API. Nachrichten werden als Objekte gesendet, die einen Typ und die zugehörigen Daten enthalten. Der Web-Worker verarbeitet die Nachrichten basierend auf ihrem Typ und führt die entsprechenden Aktionen aus, wie z.B. das Laden von Daten aus der IndexedDB oder das Speichern von Daten in der IndexedDB.
Du hast es geschafft. Abonniere meine Benachrichtigungen, um weitere News und Anleitungen von mir zu erhalten.