Mit App-Verknüpfungen Dinge schnell erledigen

Mit App-Verknüpfungen können Sie schnell auf einige häufige Aktionen zugreifen, die Nutzer häufig benötigen.

François Beaufort

Jungkee Song

Um die und die erneute Interaktion mit wichtigen Aufgaben, Webplattform unterstützt jetzt App-Verknüpfungen. Sie ermöglichen es Webentwicklern, schnell auf Aktionen zugreifen können, die Nutzer häufig benötigen.

In diesem Artikel erfahren Sie, wie Sie App-Verknüpfungen definieren. Außerdem lernen Sie Best Practices kennen.

App-Verknüpfungen

Mit App-Verknüpfungen können Nutzer schnell gängige oder empfohlene Aufgaben in der Web-App. Einfacher Zugriff auf diese Aufgaben von überall aus, wo das App-Symbol angezeigt wird die zu steigern und mehr Interaktionen

Das Menü mit den App-Verknüpfungen wird aufgerufen, wenn Sie in der Taskleiste mit der rechten Maustaste auf das App-Symbol klicken (Windows) oder Dock (macOS) auf dem Desktop des Nutzers an oder tippen Sie auf & der App-Erweiterung Launcher-Symbol unter Android.

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph> .

Das Menü mit App-Verknüpfungen wird nur für progressive Web-Apps angezeigt, die die auf dem Desktop oder Mobilgerät des Nutzers installiert sind. Dann lies den Artikel Installation. in unserer Lern-PWA um mehr über die Anforderungen an die Installierbarkeit zu erfahren.

Jede App-Verknüpfung drückt eine Nutzerabsicht aus, die jeweils mit einem URL im Geltungsbereich Ihrer Webanwendung. Die URL wird geöffnet, wenn ein Nutzer die die App-Verknüpfung. 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, 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, einer JSON-Datei, die informiert den Browser über Ihre Webanwendung und wie sie sich verhalten soll, die auf dem Desktop oder Mobilgerät des Nutzers installiert sind. Genauer gesagt sind sie im Array-Mitglied shortcuts deklariert. Unten sehen Sie eine 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 Element des shortcuts-Arrays ist ein Wörterbuch, das mindestens ein name und url. Weitere Mitglieder sind optional.

name

Das visuell lesbare Label für die App-Verknüpfung, wenn angezeigt wird.

short_name (optional)

Das visuell lesbare Label, das verwendet wird, wenn der Platz begrenzt ist. Es wird empfohlen, auch wenn es sich um optional.

description (optional)

Der visuell lesbare Zweck der App-Verknüpfung. Sie wurde noch nicht verwendet, ist aber möglicherweise mit Hilfstechnologien verbunden. zu erhalten.

url

Die URL, die geöffnet wird, wenn ein Nutzer die App aktiviert . Diese URL muss im Gültigkeitsbereich des Web-App-Manifests vorhanden sein. Falls ja relative URL ist, ist die Basis-URL die URL des Web-App-Manifests.

icons (optional)

Ein Array von Bildressourcenobjekten. Jedes Objekt muss enthalten die Property src und sizes. Im Gegensatz zu Symbolen für Manifeste der Web-App type des Bildes ist optional. SVG-Dateien werden zum Zeitpunkt der Erstellung dieses Dokuments nicht unterstützt. Verwenden Sie stattdessen PNG.

Ideale Pixel-Symbole sollten in Schritten von 48 dp (36 x 36, 48 × 48, 72 × 72, 96 × 96, 144 × 144 und 192 × 192 Pixel). Andernfalls wird empfohlen, ein einzelnes Symbol mit 192 x 192 Pixeln.

Aus Qualitätsgründen müssen Symbole auf dem Gerät mindestens die Hälfte der Idealgröße Android mit 48 dp. Für die Anzeige auf einem xxhdpi-Bildschirm muss das Symbol muss mindestens 72 x 72 Pixel groß sein. (Diese wird abgeleitet aus dem Formel zur Umrechnung von dp-Einheiten für Pixeleinheiten)

App-Verknüpfungen testen

Wenn Sie prüfen möchten, ob Ihre App-Verknüpfungen richtig eingerichtet sind, verwenden Sie den Bereich Manifest im Anwendung der Entwicklertools.

</ph>

Dieser Bereich enthält eine visuell lesbare Version vieler Ihres Manifests. einschließlich App-Verknüpfungen. So können Sie ganz einfach prüfen, Verknüpfungssymbole, sofern angegeben, werden ordnungsgemäß geladen.

App-Verknüpfungen sind möglicherweise nicht sofort für alle Nutzer verfügbar, da die progressive Funktion Aktualisierungen von Webanwendungen sind auf einmal täglich beschränkt. Weitere Informationen zu Wie Chrome Updates am Web-App-Manifest verarbeitet.

Best Practices

App-Verknüpfungen nach Priorität sortieren

Verknüpfungen werden in der Reihenfolge angezeigt, in der sie im Manifest definiert wurden. Wir empfehlen, App-Verknüpfungen nach Priorität zu sortieren, da die Begrenzung der Die Anzahl der angezeigten App-Verknüpfungen hängt von der Plattform ab. Chrome und Edge an Windows beispielsweise begrenzt die Anzahl der App-Verknüpfungen auf 10, während Chrome für Anzeige nur für Android 3. Vor Chrome 92 für Android 7 waren es vier erlaubt. Google Chrome 92 hat den Website-Einstellungen eine Verknüpfung hinzugefügt, mit einer der verfügbaren Verknüpfungen für die App.

Unterschiedliche Namen von App-Verknüpfungen verwenden

Du solltest dich nicht auf Symbole verlassen, um App-Verknüpfungen zu unterscheiden, da diese möglicherweise nicht immer sichtbar sein. macOS unterstützt beispielsweise keine Symbole im Dock Menü mit den Tastenkombinationen ein. Verwenden Sie für jede App-Verknüpfung einen eigenen Namen.

Nutzung von App-Verknüpfungen messen

Sie sollten url-Einträge für App-Verknüpfungen so annotieren, wie Sie das machen würden start_url für Analysezwecke (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.

</ph>

Unterstützung von vertrauenswürdigen Web-Aktivitäten

Bubblewrap, das empfohlene Tool zum Erstellen von Android-Apps, die das vertrauenswürdige Web nutzen Aktivität, liest App-Verknüpfungen aus dem Manifest der Web-App und liest die entsprechende Konfiguration für die Android-App generiert. Beachten Sie, dass Symbole für App-Verknüpfungen sind erforderlich und müssen mindestens 96 × 96 Pixel groß sein Luftpolsterfolie.

PWABuilder, ein großartiges Tool, um eine progressive Web-App in eine vertrauenswürdige Web-Aktivitäten: unterstützt App-Verknüpfungen mit einigen Einschränkungen.

Für Entwickler, die vertrauenswürdige Webaktivitäten manuell in ihre Android-Apps einbinden können Sie mit Tastenkombinationen für Android-Apps die gleichen Verhaltensweisen.

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