PreferenceManager.reducedData — Eigenschaft · JavaScript-Referenz

Signatur

get PreferenceManager.reducedData

Beschreibung

Die schreibgeschützte Eigenschaft reducedData der Schnittstelle PreferenceManager (erreichbar über navigator.preferences) gibt ein PreferenceObject zurück. Es bildet die Nutzereinstellung zum reduzierten Datenverbrauch ab, die in CSS über die Media-Query prefers-reduced-data abgefragt wird.

Über das zurückgegebene Objekt kann eine Website:

mit value den gerade wirksamen Wert lesen ("no-preference" oder "reduce"),
mit override prüfen, ob die Website den Wert selbst überschrieben hat (null, wenn nicht),
mit validValues die erlaubten Werte abfragen,
mit requestOverride(value) einen eigenen Wert für diese Website setzen und mit clearOverride() wieder entfernen,
über das change-Ereignis auf Änderungen reagieren.

Sinnvoll ist das zum Beispiel für einen „Datensparmodus“-Schalter in der eigenen Oberfläche: Nutzer können dort für genau diese Website den Datensparmodus aktivieren, ohne die Einstellung im Betriebssystem oder Browser zu ändern. Alle CSS-Regeln mit @media (prefers-reduced-data: reduce) und alle Abfragen über matchMedia() berücksichtigen den überschriebenen Wert dann automatisch.

Rückgabewert

Typ

PreferenceObject

Beschreibung

Ein PreferenceObject für die Einstellung reduzierter Datenverbrauch mit den Eigenschaften override, value und validValues, den Methoden requestOverride() und clearOverride() sowie dem Ereignis change.

Beispiele

Aktuellen Wert mit Feature-Erkennung auslesen

const reducedData = navigator.preferences?.reducedData;

if (reducedData) {
  console.log('Wirksamer Wert:', reducedData.value);
  console.log('Überschrieben:', reducedData.override);
  console.log('Erlaubte Werte:', reducedData.validValues);
} else {
  // Rückfall auf die Media-Query (falls unterstützt)
  const mq = matchMedia('(prefers-reduced-data: reduce)');
  console.log('Datensparmodus laut Media-Query:', mq.matches);
}

Wirksamer Wert: no-preference Überschrieben: null Erlaubte Werte: ["no-preference", "reduce"]

Datensparmodus-Schalter für die eigene Website

const toggle = document.querySelector('#datensparen');
const pref = navigator.preferences?.reducedData;

if (pref) {
  toggle.checked = pref.value === 'reduce';

  toggle.addEventListener('change', async () => {
    try {
      if (toggle.checked) {
        await pref.requestOverride('reduce');
      } else {
        // Zurück zur Einstellung von System/Browser
        await pref.clearOverride();
      }
    } catch (err) {
      console.error('Überschreiben fehlgeschlagen:', err);
      toggle.checked = pref.value === 'reduce';
    }
  });
} else {
  toggle.disabled = true;
}

Auf Änderungen reagieren und Bildqualität anpassen

const pref = navigator.preferences?.reducedData;

const applyImageQuality = () => {
  const sparen = pref.value === 'reduce';
  document.querySelectorAll('img[data-src-low]').forEach((img) => {
    img.src = sparen ? img.dataset.srcLow : img.dataset.srcHigh;
  });
  console.log(`Bildqualität: ${sparen ? 'niedrig' : 'hoch'}`);
};

if (pref) {
  applyImageQuality();
  pref.addEventListener('change', applyImageQuality);
  // alternativ: pref.onchange = applyImageQuality;
}

Bildqualität: hoch

// Wichtig · Fallstricke

Experimentell: Die Web Preferences API ist ein Entwurf. navigator.preferences ist in keinem Browser standardmäßig verfügbar (in Chromium nur testweise hinter Flags bzw. Origin Trials). Auch die Media-Query prefers-reduced-data wird bisher praktisch nicht unterstützt. Deshalb immer mit Feature-Erkennung arbeiten (navigator.preferences?.reducedData) und einen Rückfall vorsehen.
Die Eigenschaft ist schreibgeschützt: Eine Zuweisung wie navigator.preferences.reducedData = 'reduce' hat keine Wirkung. Werte werden nur über requestOverride() geändert.
requestOverride() gibt ein Promise zurück und kann abgelehnt werden, z. B. bei ungültigen Werten (nicht in validValues) oder wenn der Browser das Überschreiben verweigert. Fehler daher immer abfangen.
Ein Override gilt nur für die eigene Origin und kann vom Browser später zurückgesetzt werden. Den Zustand deshalb nicht dauerhaft voraussetzen, sondern bei jedem Laden erneut aus value lesen.
Beim Überschreiben wird der Wunsch der Nutzer übergangen. Eine Überschreibung sollte nur durch eine ausdrückliche Aktion der Nutzer ausgelöst werden, nie automatisch.

Siehe auch

PerformanceTiming.fetchStart PreferenceManager.reducedMotion PreferenceManager.contrast PreferenceManager.reducedTransparency PreferenceManager.colorScheme