shortcuts

shortcuts

Ein Array von Objekten. Jedes Objekt repräsentiert eine wichtige Aufgabe oder Seite in der Web-App.

Jedes Objekt kann eine oder mehrere Eigenschaften haben. Davon sind nur name und url erforderlich. Die möglichen Eigenschaften umfassen:

name

Ein String, der den Namen der Verknüpfung darstellt, welcher den Benutzern in einem Kontextmenü angezeigt wird.

short_name Optional

Ein String, der eine kurze Version des Namens der Verknüpfung darstellt. Browser können dies in Kontexten verwenden, in denen nicht genug Platz ist, um den vollständigen Namen anzuzeigen.

description Optional

Ein String, der den Zweck der Verknüpfung beschreibt. Browser können diese Information assistiver Technologie zugänglich machen, wie z.B. Screenreadern, die den Benutzern helfen können, den Zweck der Verknüpfung zu verstehen.

url

Eine App-URL, die geöffnet wird, wenn die zugehörige Verknüpfung aktiviert wird. Die URL muss innerhalb des scope des Web-App-Manifests liegen. Wenn der Wert absolut ist, sollte er gleiche Ursprünge mit der Seite haben, die auf die Manifest-Datei verweist. Wenn der Wert relativ ist, wird er relativ zur URL der Manifest-Datei aufgelöst.

icons Optional

Ein Array von Icon-Objekten, die die Verknüpfung in verschiedenen Kontexten darstellen. Dies hat dasselbe Format wie das icons Manifestmitglied.

Das shortcuts-Mitglied ermöglicht es Ihnen, Benutzern direkten Zugang zu wichtigen Funktionen Ihrer Web-App zu bieten. Verknüpfungen werden Benutzern in der Regel in einem Kontextmenü präsentiert, wenn sie mit dem Icon der Web-App interagieren, z.B. durch Rechtsklick oder langes Drücken. Wenn Benutzer eine Verknüpfung aus diesem Menü aktivieren, navigieren Browser sie zu der in der url der Verknüpfung angegebenen Adresse.

Browser rendern Verknüpfungen in der Regel in der Reihenfolge, in der sie in der Manifest-Datei der App bereitgestellt werden.

Verknüpfungen können das Benutzererlebnis verbessern, indem sie:

• Direkte Navigation zu häufig verwendeten Funktionen oder Seiten innerhalb der Web-App bieten
• Ihre Web-App für die Benutzer plattformnäher und vertrauter erscheinen lassen.

Zum Beispiel können Verknüpfungen verwendet werden, um direkt auf die Timeline eines Benutzers innerhalb einer Social-Media-App zu verlinken oder schnellen Zugriff auf die letzten Bestellungen eines Benutzers in einem E-Commerce-Kontext zu bieten.

Beim Erstellen von Verknüpfungen für Ihre Web-App sollten Sie die folgenden Richtlinien beachten:

• Halten Sie die Namen der Verknüpfungen kurz, aber beschreibend genug, um den Benutzern ihren Zweck klar zu vermitteln.
• Stellen Sie sicher, dass Verknüpfungs-URLs innerhalb des Bereichs Ihrer Web-App liegen.
• Fügen Sie Icons für Verknüpfungen hinzu, um die visuelle Erkennung zu verbessern. Stellen Sie Icons in mehreren Größen bereit, um eine qualitativ hochwertige Anzeige auf verschiedenen Geräten und in verschiedenen Kontexten zu gewährleisten.
• Ordnen Sie die Verknüpfungen von der wichtigsten bis zur am wenigsten wichtigen, basierend auf der Relevanz und Nutzung der Funktionen, zu denen sie verlinken.
• Bevorzugen Sie das Hinzufügen weniger wichtiger Verknüpfungen. Eine lange Liste kann Benutzer nicht nur überwältigen, sondern möglicherweise auch von einigen Plattformen oder Browsern gekürzt werden.

Betrachten Sie eine Aufgabenverwaltungs-App. Dieses Beispiel zeigt, wie zwei Verknüpfungen hinzugefügt werden. Die "Neue Aufgabe"-Verknüpfung führt die Benutzer direkt auf die Aufgabenerstellungsseite, und die "Aufgaben von heute"-Verknüpfung bietet schnellen Zugriff auf ihre Liste von Aufgaben für den aktuellen Tag.

{
  "name": "TaskPro",
  "short_name": "Tasks",
  "start_url": "/dashboard",
  "display": "standalone",
  "shortcuts": [
    {
      "name": "New Task",
      "short_name": "Add",
      "description": "Quickly add a new task",
      "url": "/tasks/new"
    },
    {
      "name": "Today's Tasks",
      "short_name": "Today",
      "description": "View your tasks for today",
      "url": "/tasks/today"
    }
  ]
}

Aufbauend auf dem vorherigen Beispiel fügt der folgende Code Icons zu den beiden Verknüpfungen hinzu und zeigt die Verwendung einer relativen URL in einer zusätzlichen dritten Verknüpfung. Die ../projects-URL wird relativ zur URL des App-Manifests aufgelöst. Wenn sich beispielsweise die Manifest-Datei der App unter /dashboard/manifest.json befindet, würde diese Verknüpfung auf /projects navigieren.

{
  "name": "TaskPro",
  "short_name": "Tasks",
  "start_url": "/dashboard",
  "display": "standalone",
  "shortcuts": [
    {
      "name": "New Task",
      "short_name": "Add",
      "description": "Quickly add a new task",
      "url": "/tasks/new",
      "icons": [
        {
          "src": "/images/add.png",
          "sizes": "192x192"
        }
      ]
    },
    {
      "name": "Today's Tasks",
      "short_name": "Today",
      "description": "View your tasks for today",
      "url": "/tasks/today",
      "icons": [
        {
          "src": "/images/calendar.png",
          "sizes": "192x192"
        }
      ]
    },
    {
      "name": "All Projects",
      "short_name": "Projects",
      "description": "View all your projects",
      "url": "../projects"
    }
  ]
}

• icons Manifestmitglied
• scope Manifestmitglied
• start_url Manifestmitglied
• Same-origin policy
• Anleitung zum Exponieren häufiger Aktionen als Verknüpfungen in PWAs