Was ist eine PWA?

Progressive Web Apps (PWA) sind Webanwendungen, die sich wie native Apps installieren lassen und Offline-Funktionen sowie ein einheitliches Erscheinungsbild (Theme-Farbe, Splash-Screen) nutzen. Mit einem Web App Manifest und den passenden Icons kann jede Regenfass-Webapp als PWA angeboten werden – mit Installierbarkeit, Brand-Farben und konsistenten App-Icons.

Im Folgenden findest du ein Beispiel-Manifest, die nötigen HTML-Snippets und alle Grafiken zum Download. Das komplette PWA-Bundle (Manifest + Icons) ist zudem in jedem Release als ZIP verfügbar.

Beispiel manifest.json

Das Web App Manifest definiert Name, Start-URL, Anzeigemodus, Theme- und Hintergrundfarbe sowie die App-Icons. Passe start_url und ggf. name / short_name an deine App an. Die Icon-Pfade sollten zu den unten verlinkten Assets passen (z. B. im Root oder unter logos/tabler/). Für 192×192 und 512×512 PNGs das primäre Icon-SVG exportieren oder die Legacy-PNGs nutzen. 

{
  "name": "Regenfass - Corporate Identity & Corporate Design",
  "short_name": "Regenfass CI/CD",
  "description": "Brand assets, logos, colors, fonts, and guidelines for Regenfass",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#1E2A45",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/favicon.svg",
      "sizes": "any",
      "type": "image/svg+xml",
      "purpose": "any"
    },
    {
      "src": "/logos/tabler/regenfass-tabler-concept2-icon-light.svg",
      "sizes": "any",
      "type": "image/svg+xml",
      "purpose": "any"
    },
    {
      "src": "/logos/solo/regenfass-solo-light-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/logos/solo/regenfass-solo-light-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "categories": ["business", "design", "productivity"],
  "lang": "de",
  "dir": "ltr"
}

Integration im HTML

Binde das Manifest und die Meta-Angaben im <head> deiner App ein. Ersetze / bzw. den Base-Pfad durch deinen tatsächlichen Pfad (z. B. ../). 

<!-- Web App Manifest -->
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#1E2A45" />

<!-- Favicon und App-Icons -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/logos/tabler/regenfass-tabler-concept2-icon-light.svg" />

Grafiken zum Download

Primäres Icon: Tabler bucket-droplet (Tropfen in Markenfarbe Grün). SVG für Favicon und Apple Touch; für Manifest 192×512 PNGs aus dem SVG exportieren oder Legacy-PNGs nutzen.

Asset Format Größe / Verwendung Download
Favicon SVG Skalierbar, Browser-Tab / PWA favicon.svg
Primäres Icon SVG Favicon, Apple Touch, Manifest (any) regenfass-tabler-concept2-icon-light.svg
PWA-Icon (Legacy) PNG 192×192 (Manifest, Android) regenfass-solo-light-192.png
PWA-Icon (Legacy) PNG 512×512 (Manifest, Splash, maskable) regenfass-solo-light-512.png
Apple Touch (Legacy PNG) PNG Fallback (bevorzuge SVG) regenfass-solo-light.png

PWA-Bundle herunterladen

Das PWA-Paket enthält manifest.json, favicon.svg und die App-Icons (192×192, 512×512) und ist in jedem Release als ZIP verfügbar.