dogfather-universe/workspace/sw.js

/* =====================================================================
   Service Worker des Creator Workspace.

   Er hat ZWEI Aufgaben:
     1. Benachrichtigungen entgegennehmen und anzeigen.
     2. Da sein -- damit der Browser die Seite ueberhaupt als App
        anbietet (siehe unten, 22.09.2026).

   ⚠️ BEWUSST OHNE ZWISCHENSPEICHER. Der naheliegende Zusatz waere,
   hier auch Seiten und Dateien vorzuhalten ("offline verfuegbar").
   Genau das waere hier falsch:

     * Der Workspace liegt hinter einer Anmeldung. Ein Service Worker,
       der Antworten aufhebt, hebt damit AUCH persoenliche Daten auf --
       auf einem Geraet, das jemand anderem gehoeren kann.

     * Die Seiten aendern sich haeufig. Ein Zwischenspeicher, der etwas
       Falsches zeigt, ist schlimmer als gar keiner -- man glaubt ihm
       ja. Die Versionsstempel loesen das Problem bereits.

   Das gilt weiter, und das Versprechen wird unten eingehalten: Der
   `fetch`-Zuhoerer legt NICHTS ab. Er reicht durch, und nur wenn das
   Netz weg ist, antwortet er mit einer Seite, die er selbst
   zusammensetzt -- ohne je eine Antwort des Servers aufgehoben zu
   haben.

   Wer spaeter echte Offline-Faehigkeit will, faengt hier NICHT einfach
   an, sondern klaert vorher, was zwischengespeichert werden darf.
   ===================================================================== */

/* Beim Einbauen sofort uebernehmen, statt auf das Schliessen aller
   Reiter zu warten. Ohne diese zwei Zeilen wuerde eine neue Fassung
   erst Tage spaeter aktiv -- und niemand wuesste, welche gerade laeuft. */
self.addEventListener("install", (e) => { self.skipWaiting(); });
self.addEventListener("activate", (e) => { e.waitUntil(self.clients.claim()); });

/* ---------------------------------------------------------------------
   WARUM HIER EIN `fetch`-ZUHOERER STEHT, OBWOHL NICHTS ZWISCHENGESPEICHERT
   WIRD (22.09.2026)
   ---------------------------------------------------------------------
   Filipe, mehrfach und zuletzt deutlich: "ich will einen installieren
   button. damit die leute es viel einfacher haben die seite auf dem pc
   oder auf dem handy zu installieren!!! ... das hab ich auch schon paar
   mal gefragt."

   Der Knopf gab es seit dem 10.09. Er war nur nie zu sehen, und daran
   waren ZWEI Dinge schuld, die beide hier zusammenkommen:

     1. Dieser Service Worker wurde ausschliesslich in `glocke.js`
        angemeldet -- also erst, wenn jemand Benachrichtigungen
        ERLAUBT. Auf Filipes Rechner stehen sie auf "Vom Browser
        blockiert". Damit lief nie einer.

     2. Auch mit Anmeldung haette es nicht gereicht: Chrome verlangt
        fuer sein Installationsangebot einen Service Worker MIT einem
        `fetch`-Zuhoerer. Dieser hier hatte keinen.

   Ohne Angebot des Browsers kommt `beforeinstallprompt` nie, und der
   Knopf bleibt `hidden` -- fuer immer. Die Pruefung dazu war die ganze
   Zeit gruen: Sie hat das Ereignis SELBST ausgeloest und gemessen, ob
   der Knopf darauf reagiert. Die eine Frage, auf die es ankam --
   "bietet der Browser es ueberhaupt an?" -- hat sie nie gestellt.

   DIESER ZUHOERER LEGT NICHTS AB. Er meldet sich nur bei
   Seitenaufrufen, reicht sie ans Netz weiter, und wenn das Netz weg
   ist, baut er die Antwort selbst. Keine Antwort des Servers wird
   aufgehoben, also kann auch nichts Persoenliches auf dem Geraet
   liegenbleiben.
   ------------------------------------------------------------------ */

/* Die Seite fuer den Fall ohne Netz. Sie steht HIER im Quelltext und
   nicht in einer abgelegten Datei -- eine abgelegte Datei waere ein
   Zwischenspeicher, und genau den soll es nicht geben. */
const OHNE_NETZ = `<!doctype html>
<html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gerade kein Netz</title>
<style>
  html,body{height:100%;margin:0}
  body{display:grid;place-items:center;padding:24px;
       background:#0a121e;color:#dbe4ef;
       font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  .k{max-width:26rem;text-align:center}
  h1{font-size:1.25rem;margin:0 0 12px}
  p{margin:0 0 10px;color:#94a5bb}
  button{margin-top:18px;padding:12px 20px;font:inherit;color:#fff;cursor:pointer;
         border:1px solid rgba(63,189,245,.55);border-radius:12px;background:#121926}
</style></head>
<body><div class="k">
  <h1>Gerade kein Netz</h1>
  <p>Dein Gerät ist offline — deshalb konnte die Seite nicht geladen werden.</p>
  <p>Es liegt nicht an der App. Sobald du wieder Empfang oder WLAN hast, geht es weiter.</p>
  <button type="button" onclick="location.reload()">Noch einmal versuchen</button>
</div></body></html>`;

self.addEventListener("fetch", (e) => {
  const a = e.request;
  /* NUR SEITENAUFRUFE. Bilder, Stilvorlagen und vor allem die
     Schnittstellen bleiben unangetastet -- ein Service Worker, der
     sich in eine API einmischt, ist die Sorte Fehler, die man Tage
     spaeter an unerklaerlichen Antworten sucht. */
  if (a.method !== "GET" || a.mode !== "navigate") return;
  e.respondWith(fetch(a).catch(() => new Response(OHNE_NETZ, {
    status: 503,
    headers: {
      "Content-Type": "text/html; charset=utf-8",
      /* Nicht aufheben -- auch nicht vom Browser selbst. */
      "Cache-Control": "no-store",
    },
  })));
});

/* ---------------------------------------------------------------------
   Eine Benachrichtigung kommt an.
   ------------------------------------------------------------------ */
self.addEventListener("push", (e) => {
  /* Ohne Daten trotzdem etwas anzeigen: Manche Push-Dienste schicken
     im Zweifel eine leere Nachricht, und ein Browser, der eine
     Push-Berechtigung hat, MUSS etwas anzeigen -- sonst entzieht er
     sie nach mehrmaligem Schweigen wieder. */
  let d = { titel: "Creator Workspace", text: "Es gibt etwas Neues.", ziel: "/workspace/start.html" };
  try {
    if (e.data) d = { ...d, ...e.data.json() };
  } catch {
    try { d.text = e.data.text() || d.text; } catch { /* dann die Vorgabe */ }
  }

  /* =================================================================
     EIN ANRUF IST KEINE MELDUNG WIE JEDE ANDERE (19.09.2026)

     Filipe: „irgendwas klappt mit dem telefonieren nicht."

     Nachgemessen am Protokoll des Servers: 24 Anrufe gestartet, jeder
     nach 7 bis 39 Sekunden beendet, und im Chat steht danach jedes Mal
     „Verpasster Anruf". Die Gegenseite schrieb: „Hab keinen
     Anrufeingang gehabt und keine Benachrichtigung."

     Die Benachrichtigung WAR zugestellt -- `zuletzt_ok` am Geraet
     stand auf genau die Anrufminute. Sie hat nur nicht geklingelt, und
     der Grund stand hier:

       tag: d.art        alle Anrufe teilen sich die Kennung „anruf"
       renotify: false   eine zweite Meldung mit derselben Kennung
                         ersetzt die erste LAUTLOS -- kein Ton, keine
                         Vibration
       kein vibrate      das Handy zuckt nicht
       kein requireInteraction   der Kasten verschwindet von selbst

     Fuer „Aufgabe ueberfaellig" ist das genau richtig -- der Satz
     daneben stimmt, eine Meldung, die stehen bleibt, ist eine
     Zumutung. Fuer ein klingelndes Telefon ist es das Gegenteil.

     Also: Alles bleibt, wie es war -- ausser beim Anruf.
     ============================================================== */
  /* ==== DAS ABZEICHEN AM APP-SYMBOL (30.09.2026) ==================

     Die Zahl auf dem Symbol des Startbildschirms. Sie ist genau dann
     etwas wert, wenn die App GESCHLOSSEN ist — steht sie offen,
     sieht man die Zahl ohnehin am Chat-Knopf.

     NUR, WENN EINE ZAHL DABEI IST. Eine Aufgabenerinnerung trägt
     keine; würde sie das Abzeichen auf null setzen, wären die
     ungelesenen Nachrichten vom Startbildschirm verschwunden, ohne
     dass jemand sie gelesen hätte.

     `setAppBadge` gibt es nicht überall (Firefox kennt es nicht,
     Safari nur für installierte Apps). Deshalb still versuchen: Ein
     Abzeichen ist Zugabe, kein Grund für eine Fehlermeldung — und
     erst recht keiner, die Benachrichtigung daran scheitern zu
     lassen. */
  if (Number.isFinite(d.zahl) && self.navigator?.setAppBadge) {
    try {
      if (d.zahl > 0) self.navigator.setAppBadge(d.zahl);
      else self.navigator.clearAppBadge?.();
    } catch { /* kann dieses Gerät nicht */ }
  }

  const istAnruf = d.art === "anruf";

  /* =================================================================
     ZWEI HAEUSER, ZWEI GESICHTER (29.09.2026)

     Hier stand fest `workspace-192.png` -- das Symbol der Agentur.
     Gemessen am Live-Bestand: von acht Menschen mit angemeldetem
     Geraet gehoeren fuenf ins Crew-Haus (vier Modis, eine rechte
     Hand). Die sahen auf JEDER Benachrichtigung das Symbol des
     Hauses, in dem sie nicht arbeiten.

     WELCHES HAUS ES IST, SAGT DER SERVER. Hier `self.location.hostname`
     zu lesen waere zweierlei falsch gewesen: Es stuende die verborgene
     Crew-Adresse in einer Datei, die ohne Anmeldung abrufbar ist
     (genau der Befund vom 21.09. bei crew-haus.css) -- und es waere
     eine zweite Fassung der Hausteilung, die beim naechsten Umzug von
     der ersten abweicht.

     IM ZWEIFEL DIE AGENTUR. Das ist der Stand von vorher; eine
     Nachricht ohne `haus` (etwa eine, die noch unterwegs war, als
     diese Fassung kam) sieht damit aus wie bisher, statt gar kein
     Symbol zu haben. */
  const SYMBOL = {
    crew: "/assets/img/app-symbole/crew-192.png",
    agentur: "/assets/img/app-symbole/workspace-192.png",
  };

  e.waitUntil(self.registration.showNotification(d.titel, {
    body: d.text,
    icon: SYMBOL[d.haus] || SYMBOL.agentur,
    /* DAS ABZEICHEN IST ETWAS ANDERES ALS DAS SYMBOL.

       Es ist das winzige Zeichen oben in der Statusleiste, 24 dp
       gross, und Android benutzt davon AUSSCHLIESSLICH den
       Alphakanal -- gemalt wird es einfarbig weiss.

       Hier stand dasselbe `workspace-192.png`: ein vollflaechiges
       Quadrat ohne Transparenz. Dessen Alphakanal ist ueberall voll,
       in der Statusleiste erschien deshalb ein ausgefuellter Klotz
       und kein Zeichen. Es stuerzt nichts ab, es sieht nur billig aus
       -- und deshalb faellt es auch niemandem als Fehler auf.

       `abzeichen-96.png` ist der gefuellte Umriss des Huskys, weiss
       auf durchsichtig, gebaut von `tools/abzeichen-bauen.mjs`.

       EIN ABZEICHEN FUER BEIDE HAEUSER, und das ist keine vergessene
       Trennung: Der Unterschied zwischen den zwei Symbolen ist die
       Chili der Agentur -- bei 24 Pixeln ein Fleck von zweien, der
       nicht als Chili lesbar ist, sondern als Schmutz neben dem Kopf.
       Der Husky ist die Marke beider Haeuser; ihn zu teilen verraet
       nichts ueber das jeweils andere. */
    badge: "/assets/img/abzeichen-96.png",
    /* Gleiche Art ersetzt sich gegenseitig, statt sich zu stapeln --
       drei Meldungen "Aufgabe ueberfaellig" untereinander helfen
       niemandem.

       BEIM ANRUF EINE EIGENE KENNUNG JE ANRUF: Sonst haette der
       zweite Versuch den ersten stillschweigend ersetzt, und zwar
       genau in dem Moment, in dem jemand noch einmal anruft, WEIL
       nicht abgehoben wurde. */
    tag: istAnruf ? ("anruf-" + Date.now()) : (d.art || "workspace"),
    /* Und er meldet sich hoerbar, auch wenn schon einer dasteht. */
    renotify: istAnruf,
    /* ZWEIMAL LANG, WIE EIN TELEFON. Kurze Stupser gehen im Alltag
       unter; dieses Muster kennt man. */
    vibrate: istAnruf ? [400, 200, 400, 200, 400] : undefined,
    /* Der einzige Fall, in dem eine Meldung stehen bleiben SOLL:
       Ein Anruf, den man nicht sieht, ist keiner. Sie verschwindet,
       sobald man sie antippt oder wegwischt. */
    requireInteraction: istAnruf,
    data: { ziel: d.ziel || "/workspace/start.html" },
  }));
});

/* ---------------------------------------------------------------------
   Jemand tippt die Benachrichtigung an.

   Ist der Workspace schon offen, wird DIESES Fenster benutzt und dort
   hingesteuert -- sonst sammeln sich mit der Zeit fuenf Reiter mit
   derselben Seite. Nur wenn keines offen ist, wird eines geoeffnet.
   ------------------------------------------------------------------ */
self.addEventListener("notificationclick", (e) => {
  e.notification.close();
  const ziel = e.notification.data?.ziel || "/workspace/start.html";

  e.waitUntil((async () => {
    const fenster = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
    for (const f of fenster) {
      if (f.url.includes("/workspace/")) {
        await f.focus();
        if ("navigate" in f) { try { await f.navigate(ziel); } catch { /* schon dort */ } }
        return;
      }
    }
    await self.clients.openWindow(ziel);
  })());
});