Verwenden eines Web App-Manifests zum Integrieren einer progressiven Web App in das Betriebssystem

Ein Web App-Manifest einer Website bestimmt, wie Ihre Progressive Web App (PWA) aussieht und sich bei der Installation auf einem Gerät verhält. Das Web App-Manifest enthält Informationen wie den Namen Ihrer App, den Dateispeicherort von Symbolen, die Ihre App in Systemmenüs darstellen, und die Designfarben, die das Betriebssystem in der Titelleiste verwendet.

Ein Web App-Manifest ist eine JSON-Datei, auf die von der HTML-Seite Ihrer Website mithilfe eines Manifestlinks verwiesen werden muss. Fügen Sie den folgenden Code zwischen den <head> </head> Tags der HTML-Seite Ihrer Website ein, um einen Link zu Ihrer Manifestdatei zu erstellen:

<link rel="manifest" href="/manifest.json">

Hinweis

Der Inhalt der Manifestdatei muss ein gültiger JSON-Code sein, die Datei kann jedoch auch wie folgt benannt app_name.webmanifest werden: Wenn Sie die Erweiterung verwenden webmanifest möchten, stellen Sie sicher, dass sie vom HTTP-Server mit dem application/manifest+json MIME-Typ bedient wird.

Eine Manifestdatei sollte mindestens die folgenden Informationen enthalten:

{
    "name": "My Sample PWA",
    "lang": "en-US",
    "start_url": "/"
}

Ein PWA kann mit anderen Manifestmembern, z. B. den folgenden, weiter angepasst werden:

Mitglied Beschreibung
name Der Name der App, der vom Betriebssystem verwendet wird, um neben dem Symbol der App anzuzeigen.
short_name Dies kann verwendet werden, um den Namen der App anzuzeigen, wenn nicht genügend Speicherplatz für vorhanden name ist.
lang Die primäre Sprache der App.
start_url Die bevorzugte URL, zu der navigiert werden soll, wenn das Betriebssystem Ihre App startet.
scope Definiert den Navigationsbereich für die App. Außerhalb dieses Bereichs wird die besuchte Seite auf eine normale Webseite zurückgesetzt, nicht auf eine PWA. Dieser Standardwert ist start_url .
display So sollte die App aussehen. Dies ändert, wie viel der Benutzeroberfläche des Browsers dem Benutzer angezeigt wird.
theme_color Die Standarddesignfarbe für die App. Dies wirkt sich darauf aus, wie das Betriebssystem die Website anzeigt.
background_color Die Hintergrundfarbe des Fensters, in dem die App gestartet wird, bevor das Stylesheet angewendet wird.
orientation Auf unterstützenden Geräten definiert dies die Standardausrichtung für die App (z. B. Querformat oder Hochformat).
icons Array von Symbolbildobjekten, die vom Betriebssystem in unterschiedlichen Kontexten verwendet werden.
description Worum es bei der App geht.

In der folgenden Manifestdatei werden die oben genannten Manifestmember verwendet:

{
    "name": "My Sample PWA",
    "lang": "en-us",
    "short_name": "SamplePWA",
    "description": "A sample PWA for testing purposes",
    "start_url": "/",
    "scope": "/",
    "display": "standalone",
    "theme_color": "#2f3d58",
    "background_color": "#2f3d58",
    "orientation": "any",
    "icons": [
        {
            "src": "/icon512.png",
            "sizes": "512x512"
        }
    ]
}

Weitere Informationen zu Manifestmitgliedern finden Sie unter Web App-Manifeste auf MDN.

Mithilfe eines Manifests können Sie auch leistungsstarke Features entsperren, die es Ihrer App ermöglichen, sich wie systemeigene Apps zu verhalten, z. B. Das Hinzufügen von App-Verknüpfungen oder das Identifizieren als Freigabeziel.

Verwenden von Tastenkombinationen, um schnellen Zugriff auf Features zu ermöglichen

Die meisten Betriebssysteme bieten schnellen Zugriff auf wichtige App-Features mithilfe von Verknüpfungen im Kontextmenü, das mit dem Symbol der App verbunden ist. Um Verknüpfungen in Ihrer PWA zu verwenden, schließen Sie die shortcuts Eigenschaft in Ihr Web App-Manifest ein.

Der folgende Code zeigt, wie Sie eine Verknüpfung in einem Web-App-Manifest definieren.

"shortcuts": [
    {
        "name": "Play Later",
        "description": "View the list of podcasts you saved for later",
        "url": "/play-later",
        "icons": [
            {
                "src": "/icons/play-later.svg",
                "type": "image/svg+xml",
                "purpose": "any"
            }
        ]
    },
    {
        "name": "Subscriptions",
        "description": "View the list of podcasts available in your subscription",
        "url": "/subscriptions?sort=desc"
    }
]

Weitere Informationen finden Sie unter Definieren von App-Verknüpfungen.

Identifizieren Ihrer App als Freigabeziel

Um Benutzern das schnelle Freigeben von Links und Dateien für systemeigene Anwendungen zu ermöglichen, verwenden Sie das share_target Objekt im Web App-Manifest. Eine action Seite ähnelt einem Formular. In dem share_target Objekt definieren Sie die Seite und die action Parameter, die voraussichtlich an die Seite übergeben action werden.

"share_target": {
    "action": "/share.html",
    "params": {
        "title": "name",
        "text": "description",
        "url": "link"
    }
}

Das obige share_target Objekt wird als Seite für eine Freigabe /share.html action eingerichtet. In diesem Beispiel werden außerdem drei Parameter definiert, die an diese Seite übergeben action werden: title , und text url .

Weitere Informationen zur Verwendung des Features "Ziel freigeben" finden Sie unter Freigeben von Inhalten mit anderen Apps.

Weitere Informationen