Über App-Verknüpfungen können Nutzer schnell auf eine Reihe häufig verwendeter Aktionen zugreifen.
Die Webplattform unterstützt jetzt App-Verknüpfungen, um die Produktivität der Nutzer zu verbessern und die Nutzerinteraktion für wichtige Aufgaben zu erleichtern. Sie ermöglichen es Webentwicklern, schnell auf eine Handvoll häufiger Aktionen zuzugreifen, die Nutzer häufig benötigen.
In diesem Artikel erfahren Sie, wie Sie App-Verknüpfungen definieren. Außerdem lernen Sie einige zugehörige Best Practices kennen.
App-Verknüpfungen
Mit App-Verknüpfungen können Nutzer gängige oder empfohlene Aufgaben in Ihrer Webanwendung schnell starten. Einfacher 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, indem Sie auf dem Desktop des Nutzers mit der rechten Maustaste auf das App-Symbol in der Taskleiste (Windows) oder im Dock (macOS) klicken oder unter Android das Launcher-Symbol der App gedrückt 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 finden Sie unter Installation im Modul „Weitere Informationen zu PWAs“.
Jede App-Verknüpfung drückt einen Nutzer-Intent aus, der jeweils mit einer URL im Bereich der Web-App verknüpft ist. Die URL wird geöffnet, wenn ein Nutzer die App-Verknüpfung aktiviert. Hier einige Beispiele für App-Tastenkombinationen:
- Navigationselemente der obersten Ebene (z.B. Startseite, Zeitachse, letzte Bestellungen)
- Suche
- Aufgaben zur Dateneingabe (z.B. E-Mail oder Tweet 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. Das ist eine JSON-Datei, die den Browser über Ihre Web-App informiert und darüber, wie sie sich verhalten soll, wenn sie auf dem Desktop oder Mobilgerät des Nutzers installiert wird. Genauer gesagt werden sie im Array-Mitglied shortcuts deklariert. Unten sehen Sie ein Beispiel für ein potenzielles Manifest einer Web-App.
{
"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 shortcuts-Arrays ist ein Wörterbuch, das mindestens einen name und einen url enthält. Andere Mitglieder sind optional.
name- Das visuell lesbare Label der App-Verknüpfung, das dem Nutzer angezeigt wird.
short_name(optional)- Das visuell lesbare Label, das bei begrenztem Speicherplatz verwendet wird. Es wird empfohlen, sie anzugeben, auch wenn dies optional ist.
description(optional)- Der visuell lesbare Zweck der App-Verknüpfung. Sie wird zum Zeitpunkt der Erstellung dieses Dokuments nicht verwendet, kann jedoch in Zukunft mit Hilfstechnologien genutzt werden.
url- Die URL, die geöffnet wird, wenn ein Nutzer die App-Verknüpfung aktiviert. Diese URL muss im Manifest der Web-App vorhanden sein. Wenn es sich um eine relative URL handelt, ist die Basis-URL die URL des Manifests der Web-App.
icons(optional)Ein Array von Bildressourcenobjekten. Jedes Objekt muss die Attribute
srcundsizesenthalten. Im Gegensatz zu Manifest-Symbolen für Webanwendungen ist dietypedes Bildes optional. SVG-Dateien werden derzeit nicht unterstützt. Verwende stattdessen PNG.Pixel-Pixel-Symbole sind ideal, wenn Sie sie in Schritten von 48 dp bereitstellen, also Symbole der Größe 36 × 36, 48 × 48, 72 × 72, 96 × 96, 144 × 144 und 192 × 192 Pixel. Andernfalls wird empfohlen, ein einzelnes Symbol mit 192 × 192 Pixeln zu verwenden.
Aus Qualitätsgründen müssen Symbole mindestens die Hälfte der idealen Größe von Android-Geräten, also 48 dp, ausmachen. Zur Anzeige auf einem xxhdpi-Bildschirm muss das Symbol beispielsweise mindestens 72 x 72 Pixel groß sein. Es wird von der Formel zum Konvertieren dp-Einheiten für Pixeleinheiten abgeleitet.
App-Verknüpfungen testen
Über den Bereich Manifest im Bereich Anwendung der Entwicklertools können Sie prüfen, ob die Tastenkombinationen für Ihre App korrekt eingerichtet sind.
Dieser Bereich enthält eine menschenlesbare Version vieler Eigenschaften des Manifests, einschließlich Anwendungsverknüpfungen. So lässt sich leicht prüfen, ob alle Verknüpfungssymbole, falls vorhanden, korrekt geladen werden.
App-Verknüpfungen sind möglicherweise nicht sofort für alle Nutzer verfügbar, da progressive Web-App-Updates auf einmal pro Tag beschränkt sind. Weitere Informationen dazu, wie Chrome mit Updates des Web-App-Manifests umgeht
Best Practices
App-Verknüpfungen nach Priorität sortieren
Verknüpfungen werden in der Reihenfolge angezeigt, in der du sie im Manifest definiert hast. Wir empfehlen, die App-Verknüpfungen nach Priorität zu ordnen, da das Limit für die Anzahl der angezeigten App-Verknüpfungen je nach Plattform variiert. In Chrome und Edge unter Windows sind beispielsweise maximal zehn App-Verknüpfungen möglich, in Chrome für Android dagegen nur drei. Vor Chrome 92 waren 4 für Android 7 zulässig. Chrome 92 hat eine Verknüpfung zu den Website-Einstellungen hinzugefügt, die eine der verfügbaren Verknüpfungsslots für die App nutzt.
Unterschiedliche Namen für App-Verknüpfungen verwenden
Sie sollten sich nicht auf Symbole zur Unterscheidung von App-Verknüpfungen verlassen, da diese möglicherweise nicht immer sichtbar sind. macOS unterstützt beispielsweise keine Symbole im Menü für Tastenkombinationen des Docks. Verwenden Sie für jede App-Verknüpfung einen eigenen Namen.
Nutzung von App-Verknüpfungen messen
Sie sollten zu Analysezwecken url-Einträge von App-Verknüpfungen mit Anmerkungen versehen, wie Sie es bei start_url tun würden (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 für vertrauenswürdige Webaktivitäten
Bubblewrap, das empfohlene Tool zum Erstellen von Android-Apps, die vertrauenswürdige Webaktivitäten verwenden, liest App-Verknüpfungen aus dem Web-App-Manifest 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 ist ein praktisches Tool, mit dem Sie eine progressive Web-App ganz einfach in eine vertrauenswürdige Web-Aktivität umwandeln können. Es unterstützt App-Verknüpfungen mit einigen Vorbehalten.
Entwickler, die Trusted Web Activity manuell in ihre Android-App integrieren, können mit Tastenkombinationen für Android-Apps die gleichen Verhaltensweisen implementieren.
Beispiel
Sehen Sie sich das Beispiel für App-Verknüpfungen und die entsprechende Quelle an.