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

Sie haben eine Webanwendung entworfen, deren Code und Service Worker geschrieben und Web-App-Manifest ein, das beschreibt, wie es sich verhalten soll, wenn „installiert“ auf dem Gerät eines Nutzers. Dazu gehören beispielsweise hochauflösende Symbole, die z. B. für den Launcher oder App-Schnellzugriff eines Smartphones verwendet werden, oder wie Ihre Webanwendung gestartet werden soll, wenn sie über den Startbildschirm des Nutzers geöffnet wird.

Obwohl viele Browser das Web App Manifest berücksichtigen, wird nicht jeder Browser jeden von Ihnen angegebenen Wert. Geben Sie PWACompat ein, einen Bibliothek, die anhand Ihres Web-App-Manifests automatisch relevante meta- oder link-Tags einfügt für Symbole unterschiedlicher Größe, das Favicon, den Startmodus, Farben usw.

PWACompat verwendet ein Web-App-Manifest und fügt Standard- und Nicht-Standard-Meta-, Link- und andere Tags hinzu.
„PWACompat“ nimmt ein Web-App-Manifest und fügt Standard- und nicht standardmäßige Meta-, Link- und andere Tags hinzu.

Das bedeutet, dass Sie keine unzähligen Standard- und Nicht-Standard-Tags wie <link rel="icon" ... /> oder <meta name="orientation" ... />) zu Ihren Seiten hinzufügen. Für iOS-Startbildschirmanwendungen erstellt PWACompat sogar dynamisch Splashscreens, sodass Sie nicht für jede Bildschirmgröße einen erstellen müssen.

iOS-Startbildschirm 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 dieses Script dann entweder ein 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 erforderlichen Schritte für den Browser des Nutzers aus, unabhängig davon, ob er sich auf einem Mobilgerät oder Computer befindet.

Wir empfehlen dennoch, mindestens ein hochwertiges Verknüpfungssymbol für die Indexierung der Suche 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ührlich

Was macht PWACompat in unterstützten Browsern? PWACompat lädt dein Web-App-Manifest und:

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

Für Safari bietet PWACompat außerdem folgende Funktionen:

  • Legt apple-mobile-web-app-capable (Öffnen ohne Chrome-Browser) fest für Anzeigemodi standalone, fullscreen oder minimal-ui
  • Erstellt apple-touch-icon-Bilder und fügt transparenten Symbolen den Manifesthintergrund hinzu: Andernfalls wird Transparenz unter iOS als Schwarz dargestellt.
  • Erstellt dynamische Splash-Bilder, die den für Chromium generierten Splash-Bildern ähnlich sind Browser

Wenn Sie weitere Beiträge leisten oder bei der Unterstützung weiterer Browser mitwirken möchten, finden Sie PWACompat auf GitHub.

Jetzt ausprobieren

PWACompat ist jetzt auf Airhorner, v8.dev und Emojityper: Der HTML-Header Ihrer Website kann einfach sein: Geben Sie einfach das Manifest an und lassen Sie PWACompat den Rest erledigen.

📢🤣🎉