PWA-Installierbarkeit: Seite kann jetzt als App installiert werden (Desktop-Icon)

Recherche (developer.chrome.com, Lighthouse-Doku, Stand 2026): Chrome/Edge zeigen "App installieren" bei gültigem Web App Manifest (name, icons inkl. 512x512, start_url, display:standalone) UND einem registrierten Service Worker mit fetch()-Handler — reines Manifest reicht für den zuverlässigen Install-Prompt nicht mehr aus. - Neues manifest.json (Name, Theme-/Hintergrundfarbe passend zum dunklen Design, Icons 192x192 + 512x512 aus dem bestehenden Husky-Favicon erzeugt) - Neuer sw.js: minimaler Service Worker, primär für die Installierbarkeit, cached nebenbei die wichtigsten Shell-Dateien (Network-first mit Cache-Fallback, kein Offline-Vollausbau) - main.js: registriert den Service Worker nur bei http(s) (nie bei file://, damit die Seite laut Projektregel weiterhin per Doppelklick ohne Server funktioniert — stiller Fallback statt Konsolenfehler) - Alle 28 HTML-Seiten: <link rel="manifest"> + <meta name="theme-color"> im <head> ergänzt (identischer Ankerpunkt nach dem Favicon-Link geprüft und automatisiert eingefügt) Installation für Dogi: Seite in Chrome/Edge öffnen → Symbol rechts in der Adressleiste ("App installieren") oder Menü ⋮ → "DogFather Universe installieren" → landet als eigenes Fenster + Icon auf Desktop/Startmenü.
2026-08-03 01:50:56 +02:00
parent c4be588f05
commit c940538b1d
33 changed files with 172 additions and 0 deletions
@@ -4,6 +4,8 @@
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Seite nicht gefunden — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Aktion — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Detailansicht einer Aktion oder eines Projekts von Team Dogi." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Aktion — DOGFATHER UNIVERSE" />
@@ -869,4 +869,21 @@
    const sprache = getSprache();
    return feld[sprache] || feld.de || "";
  };
  /* ===================================================================
     PWA: Service-Worker-Registrierung
     Voraussetzung dafür, dass Chrome/Edge auf dem Desktop "App
     installieren" anbietet (Icon landet dann auf dem Desktop/Startmenü).
     Bewusst defensiv: registriert NUR über http(s), niemals bei file://
     (dort schlägt die Registrierung ohnehin fehl, die Seite muss aber
     laut Projektregel auch per Doppelklick funktionieren — deshalb kein
     ungefangener Fehler in der Konsole). ===================================================================== */
  if ("serviceWorker" in navigator && /^https?:$/.test(location.protocol)) {
    window.addEventListener("load", () => {
      navigator.serviceWorker.register("/sw.js").catch(() => {
        /* Stiller Fallback — Seite funktioniert auch ohne Service Worker,
           nur ohne Installierbarkeit/Offline-Cache. */
      });
    });
  }
 })();
@@ -6,6 +6,8 @@
 <title>Streamer gesucht — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Du bist Streamer und suchst einen Manager? Bewirb dich als Creator bei Spicy Media." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Streamer gesucht — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Kooperation anfragen — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Kooperationsanfrage an Manager DogFather / Spicy Media." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Kooperation anfragen — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Modi werden — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Werde Modi bei Team Dogi — DogFathers persönliches Community-Team." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Modi werden — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Scout werden — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Werde Scout für DogFather bei der Spicy Media Agentur — finde neue Talente." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Scout werden — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Bewerben — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Werde Teil vom Team: Modi bei Team Dogi, Scout oder Creator bei Spicy Media, oder Kooperation anfragen." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Bewerben — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Casper — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Der Husky an DogFathers Seite — das tierische Gesicht der HasiDog-Welt." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Casper — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Die Community — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Team Dogi ist Familie — die Community rund um DogFather und HasiDog." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Die Community — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Creator im Team — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Content Creator, die Teil von DogFather / Spicy Media sind." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Creator im Team — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Die Person, die DogFather erschuf — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Wer ist DogFather wirklich? Persönlichkeit, Werte und die Geschichte hinter dem Content." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Die Person, die DogFather erschuf — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>HasiDog-Welt — DOGFATHER UNIVERSE</title>
 <meta name="description" content="HasiDog: Maskottchen, Musikprojekt und die verspielte, familiäre Seite von Team Dogi." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="HasiDog-Welt — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>DOGFATHER UNIVERSE — Streamer. Community. HasiDog. Manager.</title>
 <meta name="description" content="DOGFATHER UNIVERSE: die Heimat von DogFather als Streamer, der HasiDog-Community und Manager DogFather bei Spicy Media." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="DOGFATHER UNIVERSE — Streamer. Community. HasiDog. Manager." />
@@ -6,6 +6,8 @@
 <title>Kontakt &amp; Rechtliches — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Kontakt, Impressum und Datenschutz von DOGFATHER UNIVERSE." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Kontakt &amp; Rechtliches — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Alle Links — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Alle Social-Media- und Musik-Links von DogFather an einem Ort — plus QR-Codes." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Alle Links — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Manager DogFather — Spicy Media — DOGFATHER UNIVERSE</title>
 <meta name="description" content="DogFather als Manager bei der Spicy Media Agency: Scouts, Creator und faire Zusammenarbeit." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Manager DogFather — Spicy Media — DOGFATHER UNIVERSE" />
@@ -0,0 +1,28 @@
 {
  "name": "DOGFATHER UNIVERSE",
  "short_name": "DogFather",
  "description": "Streamer. Community. HasiDog. Manager. Gemeinsam stark.",
  "start_url": "/index.html",
  "id": "/index.html",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#0b0d10",
  "theme_color": "#0b0d10",
  "lang": "de",
  "dir": "ltr",
  "icons": [
    {
      "src": "/assets/img/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/assets/img/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
 }
@@ -6,6 +6,8 @@
 <title>Medien — Casper — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Fotos und Videos rund um Husky Casper an einem Ort." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Medien — Casper — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Medien — DogFather — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Fotos, Videos und Events aus DogFathers Welt an einem Ort." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Medien — DogFather — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Medien — HasiDog — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Fotos, Videos und Events aus der HasiDog-Welt an einem Ort." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Medien — HasiDog — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Profil — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Team Dogi — persönliche Vorstellung." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Profil — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Stimmen über DogFather — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Was die Community und das Team über DogFather sagen." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Stimmen über DogFather — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Wer ist DogFather? — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Die persönliche Geschichte hinter DogFather — Filipe, Streamer, Manager bei Spicy Media und Hundepapa von Husky Casper." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Wer ist DogFather? — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Streamplan &amp; Livebereich — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Wann geht DogFather live? Streamplan und Livebereich." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Streamplan &amp; Livebereich — DOGFATHER UNIVERSE" />
@@ -0,0 +1,71 @@
 /* =====================================================================
   sw.js — minimaler Service Worker für DOGFATHER UNIVERSE
   Zweck: NICHT primär Offline-Funktionalität, sondern die technische
   Voraussetzung, damit Chrome/Edge auf dem Desktop den "App installieren"-
   Prompt zuverlässig anzeigt (Chrome verlangt dafür einen registrierten
   Service Worker mit fetch()-Handler, siehe developer.chrome.com/blog/
   update-install-criteria, Stand 2026). Nebenbei cached er die wichtigsten
   Shell-Dateien, damit die Seite bei Verbindungsabbruch nicht komplett
   leer bleibt — bewusst simpel gehalten (kein Offline-Vollausbau).
   ===================================================================== */
 const CACHE_NAME = "dogfather-universe-shell-v1";
 const SHELL_ASSETS = [
  "/",
  "/index.html",
  "/assets/css/main.css",
  "/assets/css/theme-dogfather.css",
  "/assets/css/theme-hasidog.css",
  "/assets/css/theme-spicymedia.css",
  "/assets/js/main.js",
  "/assets/img/favicon.png",
  "/assets/img/icon-192.png",
  "/assets/img/icon-512.png",
 ];
 self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open(CACHE_NAME)
      .then((cache) => cache.addAll(SHELL_ASSETS))
      .catch(() => {
        /* Einzelne Assets könnten fehlen (z.B. beim allerersten Deploy) —
           soll die Installation des Service Workers nicht blockieren. */
      })
  );
  self.skipWaiting();
 });
 self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches
      .keys()
      .then((keys) =>
        Promise.all(
          keys
            .filter((key) => key !== CACHE_NAME)
            .map((key) => caches.delete(key))
        )
      )
      .then(() => self.clients.claim())
  );
 });
 /* Network-first mit Cache-Fallback: liefert immer die aktuellste Version,
   greift nur bei echtem Verbindungsausfall auf den Cache zurück — damit
   Änderungen an der Seite nicht durch veraltete Caches verdeckt werden. */
 self.addEventListener("fetch", (event) => {
  if (event.request.method !== "GET") return;
  const url = new URL(event.request.url);
  if (url.origin !== self.location.origin) return;
  event.respondWith(
    fetch(event.request)
      .then((response) => {
        const copy = response.clone();
        caches.open(CACHE_NAME).then((cache) => cache.put(event.request, copy));
        return response;
      })
      .catch(() => caches.match(event.request))
  );
 });
@@ -6,6 +6,8 @@
 <title>Modi-Team — DOGFATHER UNIVERSE</title>
 <meta name="description" content="VanVan, Diene, Funny, Miss und Marina — das Modi-/Core-Team von Team Dogi." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Modi-Team — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Scout-Team — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Die Scouts von Team Dogi bei Spicy Media." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Scout-Team — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>VanVan — die rechte Hand von Dogi — DOGFATHER UNIVERSE</title>
 <meta name="description" content="VanVan erzählt ihre Geschichte: wie sie zu Team Dogi kam, wer sie ist und was DogFather und Team Dogi ihr bedeuten." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="VanVan — die rechte Hand von Dogi — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Werte als Manager — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Die Werte, nach denen DogFather als Manager bei Spicy Media arbeitet." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Werte als Manager — DOGFATHER UNIVERSE" />
@@ -6,6 +6,8 @@
 <title>Zeitreise — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Die Geschichte von DogFather in einer interaktiven Zeitleiste." />
 <link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <link rel="manifest" href="/manifest.json" />
 <meta name="theme-color" content="#0b0d10" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Zeitreise — DOGFATHER UNIVERSE" />