Signatur
Beschreibung
Die schreibgeschützte Eigenschaft uploadTotal einer BackgroundFetchRegistration gibt an, wie viele Bytes die Anfragen eines Hintergrund-Abrufs insgesamt an den Server senden. Der Browser berechnet den Wert aus der Summe der Anfrage-Körper (Request-Bodies) aller Request-Objekte, die an BackgroundFetchManager.fetch() übergeben wurden.
Zusammen mit uploaded können Sie den Upload-Fortschritt berechnen, zum Beispiel für eine Fortschrittsanzeige beim Hochladen großer Dateien wie Videos oder Backups. Das funktioniert auch dann, wenn die Seite zwischenzeitlich geschlossen wurde. Anders als bei downloadTotal legen Sie den Wert nicht selbst fest, denn der Browser kennt die Größe der Anfrage-Körper bereits.
Enthalten die Anfragen keinen Body (etwa reine GET-Anfragen), ist der Wert 0. Den Fortschritt überwachen Sie über das Ereignis progress der Registrierung.
Rückgabewert
unsigned long long), die Gesamtzahl der hochzuladenden Bytes. 0, wenn keine Anfrage einen Body hat.Beispiele
Upload-Größe einer neuen Registrierung auslesen
// Im Fenster-Kontext: große Datei im Hintergrund hochladen
const uploadVideo = async (file) => {
const reg = await navigator.serviceWorker.ready;
const request = new Request('/api/upload', {
method: 'POST',
body: file
});
const bgFetch = await reg.backgroundFetch.fetch('video-upload', [request], {
title: 'Video wird hochgeladen'
});
console.log(`Hochzuladen: ${bgFetch.uploadTotal} Bytes`);
return bgFetch;
};Upload-Fortschritt in Prozent anzeigen
const trackUpload = async (id) => {
const reg = await navigator.serviceWorker.ready;
const bgFetch = await reg.backgroundFetch.get(id);
if (!bgFetch) return;
const bar = document.querySelector('#upload-progress');
bgFetch.addEventListener('progress', () => {
if (bgFetch.uploadTotal === 0) return; // nichts hochzuladen
const percent = Math.round((bgFetch.uploaded / bgFetch.uploadTotal) * 100);
bar.value = percent;
console.log(`Upload: ${percent} %`);
});
};
trackUpload('video-upload');Alle laufenden Hintergrund-Uploads auflisten
const listUploads = async () => {
const reg = await navigator.serviceWorker.ready;
const ids = await reg.backgroundFetch.getIds();
for (const id of ids) {
const f = await reg.backgroundFetch.get(id);
if (f.uploadTotal > 0) {
console.log(`${id}: ${f.uploaded}/${f.uploadTotal} Bytes`);
}
}
};
listUploads();// Wichtig · Fallstricke
- Experimentelle API: Die Background Fetch API gibt es nur in Chromium-basierten Browsern (Chrome, Edge, Opera). Prüfen Sie vorher mit
'BackgroundFetchManager' in self, ob sie verfügbar ist. - Die API steht nur in einem sicheren Kontext (HTTPS) und nur mit registriertem Service Worker zur Verfügung.
uploadTotalkann0sein. Prüfen Sie das vor der Division, sonst erhalten SieNaN.- Anfragen, deren Body ein
ReadableStreamist, werden von Background Fetch nicht unterstützt. Der Aufruf vonfetch()wird dann mit einemTypeErrorabgelehnt. - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert bzw. löst im Strict Mode einen
TypeErroraus.