Kochmodus für WordPress (Display an)

Viele Hobby-Köche nutzen Rezepte aus dem Internet. Da man aber nicht immer alles zur Hand hat, muss man das Smartphone liegen lassen, etwas holen, bereitstellen. Man kommt zurück und merkt, dass das Display aus ist – einschalten stellt aber ein Problem dar mit schmutzigen Koch-Fingern. Abhilfe schafft ein so genannter Kochmodus für WordPress Templates und Websites. Wie ihr als Seiten-Betreiber einen Kochmodus integrieren könnt, der das Display an lässt, zeigen wir hier.

Kochmodus für WordPress

Ein Kochmodus sorgt dafür, dass beim Aktivieren der Bildschirm des Besuchers an bleibt. Dies ist vor allem bei langen und komplizierten Rezepten oft ein Gamechanger. So kann dieser integriert werden:

1. Seite/Beitrag öffnen → im Block-Editor (Gutenberg) auf + klicken → Individueller HTML (Custom HTML) wählen.
2. Den folgenden Code komplett kopieren & einfügen.
3. Seite aktualisieren → im Frontend den Schalter „Kochmodus“ testen.

Funktion: Der Button versucht zuerst die offizielle Screen Wake Lock API zu nutzen (Android/Chrome & Co.). Falls das nicht geht (z. B. iPhone/Safari), springt automatisch ein bewährter Fallback (NoSleep.js) ein.

<!-- KOCHMODUS: Einfacher Ein-Knopf-Schalter für WordPress -->

<div id="cookmode" style="margin:1rem 0;">
  <button id="cookmode-btn" type="button"
          style="padding:.75rem 1rem;border-radius:.75rem;border:1px solid #ddd;cursor:pointer;">
    🍳 Kochmodus einschalten (Display bleibt an)
  </button>
  <div id="cookmode-hint" style="font-size:.9rem;color:#555;margin-top:.5rem;">
    Tipp: Erhöht den Akkuverbrauch. Zum Ausschalten einfach nochmal tippen.
  </div>
</div>

<!-- Fallback-Bibliothek für iOS/Safari -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/NoSleep.min.js"></script>

<script>
(function () {
  const btn = document.getElementById('cookmode-btn');
  const hint = document.getElementById('cookmode-hint');

  let wakeLock = null;       // Für die offizielle Wake Lock API
  let noSleep = null;        // Für den iOS/Safari-Fallback
  let active = false;

  async function enableWakeLock() {
    // 1) Versuche offizielle API
    if ('wakeLock' in navigator && navigator.wakeLock?.request) {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        wakeLock.addEventListener('release', () => {
          // Falls der Browser den Lock trennt (z. B. Tabwechsel)
          active = false;
          updateUI();
        });
        // Nach Tabwechsel reaktivieren
        document.addEventListener('visibilitychange', async () => {
          if (document.visibilityState === 'visible' && active && !wakeLock) {
            try { wakeLock = await navigator.wakeLock.request('screen'); } catch {}
          }
        });
        return true;
      } catch(e) {
        // Fällt dann auf NoSleep zurück
      }
    }
    // 2) Fallback: NoSleep.js
    try {
      if (!noSleep) noSleep = new NoSleep();
      noSleep.enable(); // startet ein stilles Video im Hintergrund
      return true;
    } catch(e) {
      console.warn('Konnte Kochmodus-Fallback nicht aktivieren:', e);
      return false;
    }
  }

  async function disableWakeLock() {
    try {
      if (wakeLock) { await wakeLock.release(); }
    } catch {}
    wakeLock = null;
    try {
      if (noSleep) { noSleep.disable(); }
    } catch {}
  }

  function updateUI() {
    btn.textContent = active
      ? '🍳 Kochmodus an – Tippen zum Ausschalten'
      : '🍳 Kochmodus einschalten (Display bleibt an)';
  }

  btn.addEventListener('click', async () => {
    if (!active) {
      const ok = await enableWakeLock();
      active = !!ok;
    } else {
      await disableWakeLock();
      active = false;
    }
    updateUI();
  });

  // Beim Verlassen der Seite wieder aufräumen
  window.addEventListener('beforeunload', () => {
    if (active) disableWakeLock();
  });
})();
</script>

Viel Spaß beim Kochen – ohne dass das Smartphone-Display aus geht! 🙂