Mit App-Verknüpfungen können Sie schnell auf einige häufige Aktionen zugreifen, die Nutzer häufig benötigen.
Die Webplattform unterstützt jetzt App-Verknüpfungen, um die Produktivität der Nutzer zu steigern und die erneute Interaktion mit wichtigen Aufgaben zu erleichtern. Sie ermöglichen es Webentwicklern, schnellen Zugriff auf eine Handvoll gängiger Aktionen bereitzustellen, die Nutzer häufig benötigen.
In diesem Artikel erfahren Sie, wie Sie App-Verknüpfungen definieren. Darüber hinaus lernen Sie einige Best Practices kennen.
App-Verknüpfungen
Mit App-Verknüpfungen können Nutzer schnell häufige oder empfohlene Aufgaben in Ihrer Webanwendung starten. Der einfache Zugriff auf diese Aufgaben von überall aus, wo das App-Symbol angezeigt wird, steigert die Produktivität der Nutzer und erhöht ihre Interaktion mit der Web-App.
Das Menü für App-Verknüpfungen wird aufgerufen, wenn Sie auf dem Desktop des Nutzers in der Taskleiste (Windows) oder Dock (macOS) mit der rechten Maustaste auf das App-Symbol klicken oder unter Android das Launcher-Symbol der App berühren und halten.
Das Menü mit App-Verknüpfungen wird nur für progressive Web-Apps angezeigt, die auf dem Desktop oder Mobilgerät des Nutzers installiert sind. Weitere Informationen zu den Anforderungen an die Installierbarkeit findest du unter Installation in unserem Lernmodul „PWA“.
Jede App-Verknüpfung drückt eine Nutzerabsicht aus, die jeweils mit einer URL im Bereich Ihrer Webanwendung verknüpft ist. Die URL wird geöffnet, wenn ein Nutzer die App-Verknüpfung aktiviert. Beispiele für App-Verknüpfungen:
- Navigationselemente der obersten Ebene (z.B. Startseite, Zeitachse, letzte Bestellungen)
- Suche
- Aufgaben zur Dateneingabe (z.B. E-Mails oder Tweets verfassen, Beleg hinzufügen)
- Aktivitäten (z.B. Chat mit den beliebtesten Kontakten starten)
App-Verknüpfungen im Web-App-Manifest definieren
App-Verknüpfungen werden optional im Web-App-Manifest definiert. Dies ist eine JSON-Datei, die dem Browser Ihre Webanwendung mitteilt und wie sie sich verhalten soll, wenn sie auf dem Desktop oder Mobilgerät des Nutzers installiert ist. Genauer gesagt werden sie im Array-Mitglied shortcuts deklariert. Unten sehen Sie ein Beispiel für ein potenzielles Web-App-Manifest.
{
"name": "Player FM",
"start_url": "https://player.fm?utm_source=homescreen",
…
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list of podcasts you saved for later",
"url": "/play-later?utm_source=homescreen",
"icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
},
{
"name": "View Subscriptions",
"short_name": "Subscriptions",
"description": "View the list of podcasts you listen to",
"url": "/subscriptions?utm_source=homescreen",
"icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
}
]
}
Jedes Mitglied des Arrays shortcuts ist ein Wörterbuch, das mindestens ein name und ein url enthält. Weitere Mitglieder sind optional.
name- Das visuell lesbare Label der App-Verknüpfung, wenn es dem Nutzer angezeigt wird.
short_name(optional)- Das visuell lesbare Label, das verwendet wird, wenn der Platz begrenzt ist. Es wird empfohlen, diesen Wert anzugeben, auch wenn er optional ist.
description(optional)- Der visuell lesbare Zweck der App-Verknüpfung. Sie wurde zum Zeitpunkt der Erstellung dieses Dokuments nicht verwendet, wird aber möglicherweise in Zukunft mit Hilfstechnologien eingesetzt.
url- Die URL, die geöffnet wird, wenn ein Nutzer die Anwendungsverknüpfung aktiviert. Diese URL muss im Gültigkeitsbereich des Web-App-Manifests vorhanden sein. Wenn es sich um eine relative URL handelt, ist die Basis-URL die URL des Web-App-Manifests.
icons(optional)Ein Array von Bildressourcenobjekten. Jedes Objekt muss die Attribute
srcundsizesenthalten. Im Gegensatz zu Symbolen für Manifeste der Web-App ist dietypedes Bilds optional. SVG-Dateien werden zum Zeitpunkt des Schreibens nicht unterstützt. Verwenden Sie stattdessen PNG.Wenn Sie Pixel-perfekte Symbole wünschen, stellen Sie diese in Schritten von 48 dp bereit (36 x 36, 48 x 48, 72 x 72, 96 x 96, 144 x 144 und 192 x 192 Pixel). Andernfalls wird empfohlen, ein einzelnes Symbol mit 192 × 192 Pixel zu verwenden.
Zur Qualitätssicherung müssen Symbole mindestens die Hälfte der Idealgröße des Geräts unter Android (48 dp) betragen. Zur Darstellung auf einem xxhdpi-Bildschirm muss das Symbol mindestens 72 x 72 Pixel groß sein. (Diese wird von der Formel zum Umrechnen von dp-Einheiten für Pixeleinheiten abgeleitet.)
App-Verknüpfungen testen
Wenn du prüfen möchtest, ob deine App-Verknüpfungen korrekt eingerichtet sind, kannst du in den Entwicklertools im Bereich Anwendung den Bereich Manifest aufrufen.
Dieser Bereich enthält eine visuell lesbare Version vieler Manifest-Attribute, einschließlich App-Verknüpfungen. So lässt sich einfach prüfen, ob alle Verknüpfungssymbole, sofern angegeben, korrekt geladen werden.
App-Verknüpfungen sind möglicherweise nicht sofort für alle Nutzer verfügbar, da progressive Web-App-Updates auf einmal täglich beschränkt sind. Weitere Informationen dazu, wie Chrome Aktualisierungen des Web-App-Manifests verarbeitet
Best Practices
App-Verknüpfungen nach Priorität sortieren
Verknüpfungen werden in der Reihenfolge angezeigt, in der sie im Manifest definiert wurden. Es wird empfohlen, App-Verknüpfungen nach Priorität zu sortieren, da die Anzahl der angezeigten App-Verknüpfungen je nach Plattform variiert. Chrome und Edge unter Windows beschränken beispielsweise die Anzahl der App-Verknüpfungen auf 10, während Chrome für Android nur 3 anzeigt. Vor Chrome 92 für Android 7 waren es vier erlaubt. Chrome 92 hat den Website-Einstellungen eine Verknüpfung hinzugefügt, die einen der verfügbaren Verknüpfungsslots für die App nutzt.
Unterschiedliche Namen von App-Verknüpfungen verwenden
Sie sollten sich nicht auf Symbole verlassen, um App-Verknüpfungen zu unterscheiden, da diese möglicherweise nicht immer sichtbar sind. macOS unterstützt beispielsweise keine Symbole im Menü für Dock-Verknüpfungen. Verwenden Sie für jede App-Verknüpfung einen eigenen Namen.
Nutzung von App-Verknüpfungen messen
Sie sollten url-Einträge von App-Verknüpfungen zu Analysezwecken wie mit start_url annotieren (z.B. url:
"/my-shortcut?utm_source=homescreen").
Unterstützte Browser
App-Verknüpfungen sind auf den unten aufgeführten Plattformen und Versionen verfügbar.
Unterstützung von vertrauenswürdigen Web-Aktivitäten
Bubblewrap ist das empfohlene Tool zum Erstellen von Android-Apps, die vertrauenswürdige Web-Aktivitäten verwenden. Es liest App-Verknüpfungen aus dem Manifest der Web-App und generiert automatisch die entsprechende Konfiguration für die Android-App. Symbole für App-Verknüpfungen sind erforderlich und müssen in Bubblewrap mindestens 96 × 96 Pixel groß sein.
PWABuilder, ein Tool, mit dem sich eine progressive Web-App ganz einfach in eine vertrauenswürdige Web-Aktivität umwandeln lässt, unterstützt App-Verknüpfungen mit einigen Vorbehalten.
Entwickler, die vertrauenswürdige Webaktivitäten manuell in ihre Android-App einbinden, können dasselbe Verhalten mithilfe von Android-App-Verknüpfungen implementieren.
Beispiel
Sehen Sie sich das Beispiel für App-Verknüpfungen und die zugehörige Quelle an.