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 des Shortcuts darstellt, der den Benutzern in einem Kontextmenü angezeigt wird.

short_name Optional

Ein String, der eine Kurzversion des Shortcut-Namens darstellt. Browser können dies in Kontexten verwenden, in denen nicht genügend Platz vorhanden ist, um den vollständigen Namen anzuzeigen.

description Optional

Ein String, der den Zweck des Shortcuts beschreibt. Browser können diese Information zugänglich machen, zum Beispiel für assistive Technologien wie Bildschirmlesegeräte, die Benutzern helfen können, den Zweck des Shortcuts zu verstehen.

url

Eine App-URL, die geöffnet wird, wenn der zugehörige Shortcut aktiviert wird. Die URL muss innerhalb des Geltungsbereichs des Web-App-Manifests liegen. Wenn der Wert absolut ist, sollte er gleichen Ursprungs wie die Seite sein, die auf die Manifestdatei verlinkt. Wenn der Wert relativ ist, wird er relativ zur URL der Manifestdatei aufgelöst.

icons Optional

Ein Array von Icon-Objekten, das den Shortcut in verschiedenen Kontexten darstellt. Dies hat dasselbe Format wie das icons Manifestmitglied.

Das shortcuts-Mitglied ermöglicht es Ihnen, Benutzern direkten Zugriff auf wichtige Funktionen Ihrer Web-App zu geben. Shortcuts werden Benutzern normalerweise in einem Kontextmenü angezeigt, wenn sie mit dem Symbol der Web-App interagieren, z.B. durch Rechtsklick oder langes Drücken. Wenn Benutzer einen Shortcut aus diesem Menü aktivieren, navigieren Browser sie zu der im url des Shortcuts angegebenen Adresse.

Browser stellen Shortcuts in der Regel in der Reihenfolge dar, in der sie in der Manifestdatei der App angegeben sind.

Shortcuts können die Benutzererfahrung verbessern, indem sie:

• Direktes Navigieren zu häufig genutzten Funktionen oder Seiten innerhalb der Web-App ermöglichen
• Ihre Web-App plattformnäher und den Benutzern vertrauter erscheinen lassen.

Zum Beispiel können Shortcuts verwendet werden, um direkt zur Timeline eines Benutzers innerhalb einer Social-Media-App zu verlinken oder schnellen Zugriff auf die kürzlich getätigten Bestellungen eines Benutzers in einem E-Commerce-Kontext zu ermöglichen.

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

• Halten Sie die Namen der Shortcuts kurz, aber ausreichend beschreibend, um ihren Zweck für die Benutzer klar zu vermitteln.
• Stellen Sie sicher, dass Shortcut-URLs innerhalb des Geltungsbereichs Ihrer Web-App liegen.
• Fügen Sie Icons für Shortcuts hinzu, um die visuelle Erkennung zu verbessern. Bieten Sie Icons in mehreren Größen an, um eine qualitativ hochwertige Anzeige auf verschiedenen Geräten und in verschiedenen Kontexten sicherzustellen.
• Ordnen Sie die Shortcuts in der Reihenfolge ihrer Wichtigkeit, basierend auf der Relevanz und Nutzung der Funktionen, auf die sie verlinken.
• Bevorzugen Sie das Hinzufügen einiger wichtiger Shortcuts. Eine lange Liste kann Benutzer nicht nur überfordern, sondern könnte auch von einigen Plattformen oder Browsern gekürzt werden.

Betrachten Sie eine Aufgabenverwaltungs-App. Dieses Beispiel zeigt, wie zwei Shortcuts hinzugefügt werden. Der "Neue Aufgabe"-Shortcut führt Benutzer direkt zur Task-Erstellungsseite, und der "Aufgaben von heute"-Shortcut bietet schnellen Zugriff auf ihre Aufgabenliste 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 Shortcuts hinzu und zeigt die Verwendung einer relativen URL in einem zusätzlichen dritten Shortcut. Die ../projects URL wird relativ zur URL des App-Manifests aufgelöst. Zum Beispiel würde dieser Shortcut zu /projects navigieren, wenn sich die App-Manifestdatei unter /dashboard/manifest.json befindet.

{
  "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 Darstellen von häufig genutzten Aktionen als Shortcuts in PWAs