NetworkInformation.saveData — Eigenschaft · JavaScript-Referenz

Signatur

NetworkInformation.saveData

Beschreibung

Die schreibgeschützte Eigenschaft saveData der Schnittstelle NetworkInformation (erreichbar über navigator.connection) zeigt an, ob der Benutzer ausdrücklich weniger Daten verbrauchen möchte. Das ist z. B. der Fall bei aktiviertem „Lite-Modus“ bzw. Datensparmodus im Browser oder bei einer entsprechenden Systemeinstellung auf Android.

Anders als effectiveType oder downlink beschreibt saveData nicht die gemessene Netzqualität, sondern eine Benutzerpräferenz. Auch bei schnellem WLAN kann der Wert true sein. Diese Präferenz sollten Sie respektieren: Laden Sie Bilder in niedrigerer Auflösung, verzichten Sie auf automatisch startende Videos, Prefetching und nicht zwingend nötige Webfonts oder Skripte von Drittanbietern.

Serverseitig kommt dieselbe Information als HTTP-Request-Header Save-Data: on an. Clientseitig lässt sich die Eigenschaft beim Laden auswerten und über das Ereignis change auf navigator.connection überwachen.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Benutzer den Datensparmodus aktiviert hat, sonst false.

Beispiele

Datensparmodus mit Feature-Detection abfragen

// Fallback auf false, wenn die API fehlt (Firefox, Safari)
const saveData = navigator.connection?.saveData ?? false;

console.log(saveData ? 'Datensparmodus aktiv' : 'Normaler Modus');

Datensparmodus aktiv

Bilder abhängig von der Präferenz laden

const prefersLowData = () => navigator.connection?.saveData === true;

document.querySelectorAll('img[data-src-hd]').forEach((img) => {
  // Hochaufgelöste Variante nur ohne Datensparmodus laden
  img.src = prefersLowData() ? img.dataset.srcLow : img.dataset.srcHd;
});

Autoplay und Prefetching unterlassen

const connection = navigator.connection;

const applyDataPolicy = () => {
  const save = connection?.saveData ?? false;
  const video = document.querySelector('#hero-video');
  if (video) {
    video.autoplay = !save;
    video.preload = save ? 'none' : 'auto';
  }
  if (!save) {
    const link = document.createElement('link');
    link.rel = 'prefetch';
    link.href = '/naechste-seite.html';
    document.head.append(link);
  }
  console.log(`saveData = ${save}`);
};

applyDataPolicy();
// Auf Änderungen der Verbindungseinstellungen reagieren
connection?.addEventListener('change', applyDataPolicy);

saveData = false

Serverseitig: Save-Data-Header in Node.js auswerten

import http from 'node:http';

http.createServer((req, res) => {
  const saveData = req.headers['save-data'] === 'on';
  res.setHeader('Vary', 'Save-Data'); // wichtig für Caches
  res.end(saveData ? 'Leichte Version' : 'Volle Version');
}).listen(3000);

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Network Information API gibt es nur in Chromium-Browsern. Firefox und Safari kennen navigator.connection nicht. Prüfen Sie deshalb immer mit optionaler Verkettung (navigator.connection?.saveData) und nehmen Sie als Fallback false an.
Die Spezifikation ist ein experimenteller Entwurf (WICG) und kein Web-Standard. Verhalten und Verfügbarkeit können sich ändern.
Chrome hat seinen eigenen „Lite-Modus“ für Desktop und Android entfernt. Der Wert kommt heute meist aus Betriebssystem-Einstellungen (z. B. Android-Datensparmodus) oder Erweiterungen, ist also häufig false.
Das ist eine Präferenz, keine Aussage über die Bandbreite. Für die Verbindungsqualität gibt es effectiveType und downlink.
In CSS gibt es die Media-Query prefers-reduced-data, die bisher aber kaum ein Browser unterstützt.
Wenn Sie serverseitig mit dem Save-Data-Header arbeiten, setzen Sie Vary: Save-Data. Sonst liefern Caches womöglich die falsche Variante aus.
Datenschutz: Der Wert trägt zum Browser-Fingerprinting bei. Werten Sie ihn deshalb nur funktional aus.

Siehe auch

Navigator.connection MediaTrackSettings.sampleRate NetworkInformation.downlinkMax NetworkInformation.rtt NetworkInformation.type