LocalToolsSammlung offline nutzbarer Browser-Tools

Kategorie: Entwicklung

Web-App-Manifest-Generator

Eigene IdeeTool fehlt?

Erstellen Sie ein manifest.webmanifest für installierbare Web-Apps

Geben Sie Name, Start-URL, Anzeigemodus, Themen- und Hintergrundfarbe sowie die Icon-Liste Ihrer App ein und erhalten Sie eine fertige manifest.webmanifest-JSON-Datei, die eine Seite als Progressive Web App installierbar macht. Lokal in Ihrem Browser erstellt.

manifest.webmanifest
{
  "name": "LocalTools",
  "short_name": "LocalTools",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1f6f4a",
  "background_color": "#faf8f3",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.

Wozu dieses Werkzeug dient

Ein Web-App-Manifest ist die JSON-Datei, die einem Browser mitteilt, wie sich Ihre Seite nach der Installation verhalten soll: Name und Icon auf einem Homescreen, die Farbe der Statusleiste, ob sie in einem eigenständigen Fenster oder einem normalen Browser-Tab geöffnet wird, und wo sie startet. Ohne ein solches Manifest wird "Zum Startbildschirm hinzufügen" entweder gar nicht angeboten oder fällt auf ein einfaches Lesezeichen statt eines app-ähnlichen Erlebnisses zurück.

So funktioniert es

  1. Geben Sie Namen, Kurznamen und Start-URL Ihrer App ein.
  2. Wählen Sie Anzeigemodus, Themenfarbe und Hintergrundfarbe.
  3. Listen Sie Ihre Icons auf, eine pro Zeile, als Pfad und Größe wie "/icon-192.png 192x192".
  4. Kopieren Sie das JSON in eine manifest.webmanifest-Datei und verlinken Sie sie im <head> Ihrer Seite mit <link rel="manifest" href="/manifest.webmanifest">.

Datenschutz

Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.

Häufig gestellte Fragen

Welche Icon-Größen brauche ich?
Mindestens ein 192x192- und ein 512x512-PNG decken die meisten Installationsaufforderungen und App-Icon-Verwendungen ab; fügen Sie weitere Größen hinzu, wenn Sie schärfere Icons auf bestimmten Plattformen möchten.
Was ist der Unterschied zwischen theme_color und background_color?
theme_color färbt die Browser-Oberfläche (etwa Adressleiste oder Statusleiste) rund um Ihre App ein; background_color wird kurz als Splashscreen-Hintergrund angezeigt, während die App lädt, bevor ihr eigener Inhalt gerendert wird.
Brauche ich das auch, wenn ich keine PWA baue?
Ein Manifest verbessert auch, wie Icon und Name einer Seite erscheinen, wenn Besucher sie als Lesezeichen speichern oder zum Startbildschirm hinzufügen, auch ohne vollständige Offline-/Service-Worker-Unterstützung.

Zurück zu allen Werkzeugen