PWACompat – Web-App-Manifest für alle Browser

Sie haben eine Webanwendung entworfen, ihren Code und Service Worker geschrieben und schließlich das Web App Manifest hinzugefügt, um zu beschreiben, wie sie sich verhalten soll, wenn sie auf dem Gerät eines Nutzers installiert ist. Dazu gehören z. B. hochauflösende Symbole, z. B. für den Launcher oder den App-Wechsler eines Smartphones, oder wie Ihre Web-App gestartet werden soll, wenn sie über den Startbildschirm des Nutzers geöffnet wird.

Viele Browser berücksichtigen das Web App Manifest, aber nicht jeder Browser lädt oder respektiert jeden von Ihnen angegebenen Wert. Geben Sie PWACompat ein. Diese Bibliothek verwendet Ihr Web-App-Manifest und fügt automatisch relevante meta- oder link-Tags für Symbole unterschiedlicher Größe, Favicon, Startmodus, Farben usw. ein.

PWACompat verwendet ein Web-App-Manifest und fügt Standard- und Nicht-Standard-Meta-, Link- usw.-Tags hinzu.
PWACompat verwendet ein Web-App-Manifest und fügt Standard- und Nicht-Standard-Meta-, Link- usw.-Tags hinzu.

Das bedeutet, dass Sie Ihren Seiten nicht mehr unzählige Standard- und Nicht-Standard-Tags wie <link rel="icon" ... /> oder <meta name="orientation" ... /> hinzufügen müssen. Und für iOS-Startbildschirmanwendungen erstellt PWACompat sogar dynamisch Startbildschirme, sodass Sie keinen Bildschirm für jede Bildschirmgröße generieren müssen.

iOS-Ladebildschirm für Emojityper, generiert von PWACompat

PWACompat verwenden

Wenn Sie PWACompat verwenden möchten, müssen Sie auf allen Seiten einen Link zu Ihrem Web-App-Manifest einfügen:

<link rel="manifest" href="manifest.webmanifest" />

Fügen Sie dann dieses Skript hinzu oder fügen Sie es einem asynchron geladenen Bundle hinzu:

<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

PWACompat ruft Ihre Manifestdatei ab und führt die für den Browser des Nutzers erforderlichen Schritte aus, unabhängig davon, ob er ein Mobilgerät oder einen Computer verwendet.

Wir empfehlen dennoch, mindestens ein hochwertiges Verknüpfungssymbol für die Suchindexierung hinzuzufügen:

<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />

Weitere Informationen finden Sie in den Best Practices.

<script type="module">
  // detect iOS Safari
  if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
  }
</script>

Ausführlicher Hintergrund

Was macht PWACompat bei unterstützten Browsern eigentlich? PWACompat lädt Ihr Web App Manifest und:

  • Meta-Symbol-Tags für alle Symbole im Manifest erstellen (z.B. für ein Favicon, ältere Browser)
  • Erstellen Sie Fallback-Meta-Tags für verschiedene Browser (z.B. iOS, WebKit/Chromium Forks), die beschreiben, wie eine Webanwendung geöffnet werden soll.
  • Legt die Designfarbe basierend auf dem Manifest fest.

Für Safari, PWACompat auch:

  • Legt apple-mobile-web-app-capable für die Anzeigemodi standalone, fullscreen oder minimal-ui fest (wird ohne Browser geöffnet)
  • Erstellt apple-touch-icon-Bilder und fügt den Manifesthintergrund transparenten Symbolen hinzu. Andernfalls rendert iOS die Transparenz schwarz.
  • Erstellt dynamische Splash-Bilder, die den Splash-Bildern sehr ähnlich sind, die für Chromium-basierte Browser generiert werden

Wenn Sie Ihren Beitrag leisten oder zusätzliche Unterstützung für den Browser benötigen, finden Sie hier weitere Informationen zu PWACompat auf GitHub.

Ausprobieren

PWACompat ist bei Airhorner, v8.dev und Emojityper live. Der HTML-Code des Headers Ihrer Website kann einfach sein: Sie geben einfach das Manifest an und überlassen den Rest von PWACompat.

📢🤣🎉