Der Installieren-Knopf war nie zu sehen — jetzt schon
Filipe, 22.09.2026: "und nochmal, ich will einen installieren button.
damit die leute es viel einfacher haben die seite auf dem pc oder auf
dem handy zu installieren!!! bitte das hab ich auch schon paar mal
gefragt. mach das es ist seeeeeeeehr wichtig."
Er hatte recht, und der Knopf war seit dem 20.09. gebaut. Er konnte
nur nie erscheinen. ZWEI URSACHEN, beide ausserhalb dessen, was
geprueft wurde:
1. DER SERVICE WORKER LIEF NIE. Er wurde ausschliesslich in glocke.js
angemeldet -- also erst, wenn jemand Benachrichtigungen ERLAUBT.
Auf Filipes Rechner stehen sie auf "Vom Browser blockiert"; das
steht sogar in seiner Kopfleiste auf dem Bildschirmfoto von heute
frueh. Ohne Service Worker macht Chrome kein Installationsangebot.
2. UND AUCH MIT WAERE ES NICHT GEGANGEN: Chrome verlangt einen Service
Worker MIT `fetch`-Zuhoerer. Dieser hatte keinen.
Ohne Angebot kommt `beforeinstallprompt` nie, und der Knopf bleibt
`hidden`. Fuer immer.
WAS SICH GEAENDERT HAT
- Der Service Worker wird jetzt auf JEDER Seite angemeldet, unabhaengig
von Benachrichtigungen. Das gehoert zum Installieren, nicht zur
Glocke.
- sw.js bekommt einen `fetch`-Zuhoerer, der NICHTS ablegt. Das
Versprechen im Kopf der Datei ("bewusst ohne Zwischenspeicher, der
Workspace liegt hinter einer Anmeldung") bleibt damit wortwoertlich
gueltig: Er reicht Seitenaufrufe durch und baut nur dann selbst eine
Antwort, wenn das Netz weg ist. Keine Serverantwort wird aufgehoben.
- Der Knopf zeigt sich, sobald der Browser installieren KANN, statt
erst nach dem Angebot. Geprueft wird die Faehigkeit
(`'onbeforeinstallprompt' in window`), nicht der Name des Browsers.
- DIE ANMELDEWAND BEKOMMT IHN AUCH. Sie hat keine Kopfleiste und
deshalb bisher gar kein Angebot -- dabei ist sie die Seite, auf der
jeder zuerst landet. Genau die Leute, um die es Filipe geht.
- Dafuer steht der Knopf jetzt in einer eigenen Datei
(assets/js/installieren.js) statt in kopf.js, das die Wand nicht
laedt. Und sein Stil in gate.css statt in module.css -- vierter Fall
derselben Art nach .knopf-still, dem Schalter und .feld-hinweis.
- Ohne `nachfrage.js` (also auf der Wand) erklaert er den Weg als
Absatz unter sich. Der erste Entwurf rief `window.frageNach?.()`
auf: Auf dem iPhone steht der Knopf dort von Anfang an da, und er
haette beim Antippen stumm nichts getan.
- Der Aufruf haengt nicht mehr an der Reihenfolge der Skriptzeilen.
chat.html und leistung.html laden kopf.js OHNE `defer`, dort waere
installieren.js immer zu spaet gekommen -- zwei von 37 Seiten ohne
Knopf, ohne Meldung.
- Chromes Manifest-Warnung zum `share_target` behoben (enctype).
WARUM DIE PRUEFUNG DAS NICHT GEFUNDEN HAT -- und was jetzt anders ist
Sie war gruen, die ganze Zeit. Sie hat `beforeinstallprompt` SELBST
zugestellt und gemessen, ob der Knopf darauf reagiert. Die eine Frage,
auf die es ankam -- "bietet der Browser es ueberhaupt an?" -- hat sie
nie gestellt.
Jetzt fragt sie Chrome direkt (`Page.getInstallabilityErrors`, sein
eigenes Urteil) und misst die Voraussetzungen statt der Reaktion:
laeuft ein Service Worker, OBWOHL Benachrichtigungen auf "denied"
stehen; hat sw.js einen fetch-Zuhoerer; legt er wirklich nichts ab;
steht der Knopf auf der Wand und tut er dort auch etwas.
Gemessen, mit Benachrichtigungen auf "denied":
Service Worker: activated
Chromes Urteil: kein einziges Hindernis
Manifest: nichts beanstandet
Knopf: 124x45 px, sichtbar, genau einer
pruef-installieren 29/0 (von 14). Dazu gruen: pruef-css-klassen,
pruef-struktur, pruef-crew-adresse, pruef-start-ansicht.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+88
-4
@@ -1,8 +1,10 @@
|
||||
/* =====================================================================
|
||||
Service Worker des Creator Workspace.
|
||||
|
||||
Er hat GENAU EINE Aufgabe: Benachrichtigungen entgegennehmen und
|
||||
anzeigen.
|
||||
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").
|
||||
@@ -16,8 +18,14 @@
|
||||
Falsches zeigt, ist schlimmer als gar keiner -- man glaubt ihm
|
||||
ja. Die Versionsstempel loesen das Problem bereits.
|
||||
|
||||
Wer spaeter Offline-Faehigkeit will, faengt hier NICHT einfach an,
|
||||
sondern klaert vorher, was zwischengespeichert werden darf.
|
||||
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
|
||||
@@ -26,6 +34,82 @@
|
||||
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.
|
||||
------------------------------------------------------------------ */
|
||||
|
||||
Reference in New Issue
Block a user