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.
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.
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 Anzeigemodistandalone
,fullscreen
oderminimal-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.
📢🤣🎉