Mit App-Verknüpfungen Dinge schnell erledigen

App-Verknüpfungen bieten schnellen Zugriff auf einige häufig verwendete Aktionen, die Nutzer häufig benötigen.

François Beaufort

Jungkee Song

Um die Produktivität der Nutzer zu verbessern und die Wiederaufnahme wichtiger Aufgaben zu erleichtern, unterstützt die Webplattform jetzt App-Verknüpfungen. So können Webentwickler Nutzern schnellen Zugriff auf einige gängige Aktionen bieten, die sie 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 häufig verwendete oder empfohlene Aufgaben in Ihrer Webanwendung schnell starten. Der einfache Zugriff auf diese Aufgaben überall dort, wo das App-Symbol angezeigt wird, steigert die Produktivität der Nutzer und erhöht die Interaktion mit der Webanwendung.

Das Menü mit den App-Verknüpfungen wird aufgerufen, indem Sie auf dem Computer 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 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)
• Suchen
• Aufgaben zur Dateneingabe (z. B. E-Mails oder Tweets verfassen, Belege hinzufügen)
• Aktivitäten (z. B. Chat mit den beliebtesten Kontakten starten)

App-Verknüpfungen im Manifest der Webanwendung 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-Element shortcuts deklariert. Unten finden Sie ein Beispiel für ein potenzielles Manifest für eine Webanwendung.

{
  "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 für Menschen lesbare Label für die App-Verknüpfung, das dem Nutzer angezeigt wird.

short_name (optional)

Das für Menschen lesbare Label, das verwendet wird, wenn der Platz begrenzt ist. Wir empfehlen Ihnen, diese Angabe zu machen, auch wenn sie optional ist.

description (optional)

Der für Menschen lesbare Zweck der App-Verknüpfung. Sie wird derzeit nicht verwendet, kann aber in Zukunft für Hilfstechnologien verwendet werden.

url

Die URL, die geöffnet wird, wenn ein Nutzer den App-Verknüpfungs-Shortcut aktiviert. Diese URL muss im Gültigkeitsbereich des Web-App-Manifests vorhanden sein. Bei einer relativen URL ist die Basis-URL die URL des Web-App-Manifests.

icons (optional)

Ein Array von Bildressourcenobjekten. Jedes Objekt muss die Property src und eine sizes-Property enthalten. Im Gegensatz zu Manifestsymbolen für Webanwendungen ist das type des Bildes optional. SVG-Dateien werden derzeit nicht unterstützt. Verwenden Sie stattdessen PNG.

Wenn Sie pixelgenaue Symbole benötigen, stellen Sie sie in Schritten von 48 dp bereit (d. h. 36 × 36, 48 × 48, 72 × 72, 96 × 96, 144 × 144, 192 × 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. (Dieser Wert ergibt sich aus der Formel zur Umwandlung von dp-Einheiten in Pixeleinheiten.)

App-Verknüpfungen testen

Prüfen Sie im DevTools-Steuerfeld Anwendung im Bereich Manifest, ob Ihre App-Verknüpfungen richtig eingerichtet sind.

In diesem Bereich finden Sie eine visuell lesbare Version vieler Manifesteigenschaften, einschließlich App-Verknüpfungen. So können Sie ganz einfach prüfen, ob alle Symbole für Verknüpfungen (falls vorhanden) richtig 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 Updates am Manifest der Webanwendung verarbeitet

Best Practices

App-Verknüpfungen nach Priorität sortieren

Verknüpfungen werden in der Reihenfolge angezeigt, in der Sie sie im Manifest definieren. Wir empfehlen Ihnen, App-Verknüpfungen nach Priorität zu sortieren, da die maximale Anzahl der angezeigten App-Verknüpfungen je nach Plattform variiert. In Chrome und Edge unter Windows ist beispielsweise die Anzahl der App-Verknüpfungen auf zehn begrenzt, während in Chrome für Android nur drei angezeigt werden. 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.

Verwenden Sie eindeutige Namen für App-Verknüpfungen.

Sie sollten sich nicht auf Symbole verlassen, um App-Verknüpfungen zu unterscheiden, da diese möglicherweise nicht immer sichtbar sind. Unter macOS werden beispielsweise keine Symbole im Dock-Kurztastemenü unterstützt. Verwende für jede App-Verknüpfung einen eigenen Namen.

Nutzung von App-Verknüpfungen messen

Sie sollten App-Verknüpfungen vom Typ url für Analysezwecke wie start_url annotieren (z. B. url: "/my-shortcut?utm_source=homescreen").

Unterstützte Browser

App-Shortcuts 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 Trusted Web Activity verwenden. Es liest App-Verknüpfungen aus dem Manifest der Webanwendung 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 hervorragendes Tool, mit dem Sie eine progressive Web-App ganz einfach in eine vertrauenswürdige Webaktivität umwandeln können. Es unterstützt App-Verknüpfungen mit einigen Einschränkungen.

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.

Nützliche Links

• MDN
• Spezifikation
• Beispiel für App-Verknüpfungen | Beispielquelle für App-Verknüpfungen
• Blink-Komponente: UI>Browser>WebAppInstalls