Freigeben über

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

  • Artikel

Eine progressive Web-App (PWA) muss über ein Web-App-Manifest verfügen, um zu definieren, wie die PWA in das Betriebssystem (Os) integriert wird. In diesem Artikel wird erläutert, was ein Web-App-Manifest ist und welche erforderlichen und optionalen Daten ein Web-App-Manifest enthält.

Die Web-App-Manifestdatei bestimmt, wie Ihre PWA aussieht und sich verhält, wenn sie auf einem Gerät installiert ist. Das Web-App-Manifest enthält Informationen wie den Namen Ihrer App, den Speicherort der Symbole, 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> Tags und </head> der HTML-Seite Ihrer Website ein, um einen Link zu Ihrer Manifestdatei zu erstellen:

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

Dateityp des Web-App-Manifests

Der Inhalt Ihres Web-App-Manifests muss gültiger JSON-Code sein, aber die Dateierweiterung kann entweder .json oder .webmanifestsein.

Wenn Sie sich für die Verwendung der .webmanifest Erweiterung entscheiden, überprüfen Sie, ob Ihr HTTP-Server sie mit dem application/manifest+json MIME-Typ bereitstellt.

Manifestmember

Eine Manifestdatei sollte mindestens die folgenden Manifestmember enthalten:

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

Im Folgenden finden Sie ein Beispiel für eine Manifestdatei, die weitere Member enthält:

{
    "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"
        }
    ]
}

Eine PWA kann mithilfe anderer Manifestmember noch weiter angepasst werden, z. B. die folgenden:

Member 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 namevorhanden ist.
description Beschreibung der App.
categories Die Liste der Kategorien, zu der die App gehört.
icons Array von Symbolbildobjekten, die vom Betriebssystem in verschiedenen Kontexten verwendet werden.
screenshots Array von Screenshotbildobjekten, die auch vom Betriebssystem in verschiedenen Kontexten verwendet werden.
start_url Die bevorzugte URL, zu der navigiert werden sollte, 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 und nicht auf eine PWA zurückgesetzt. Dies ist standardmäßig auf start_urlfestgelegt.
display Wie die App aussehen soll. Dadurch wird geändert, wie viel von der Browser-Benutzeroberfläche dem Benutzer angezeigt wird.
display_override Wird verwendet, um die bevorzugte Anzeige für die App zu bestimmen, je nachdem, was das Gerät unterstützt.
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. Quer- oder Hochformat).
protocol_handlers Die Liste der vordefinierten oder benutzerdefinierten URI-Protokollschemas, denen die App zugeordnet ist.
shortcuts Die Liste der allgemeinen Aufgaben, die Benutzer ausführen können, indem Sie mit der rechten Maustaste klicken oder lange auf das App-Symbol drücken.
share_target Der Typ der Daten, die die App akzeptiert, wenn Inhalte über das Dialogfeld "Betriebssystemfreigabe" freigegeben werden.
file_handlers Der Dateityp, mit dem die App gestartet werden kann.

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

Behandeln bestimmter Protokollschemas

Sie können Ihre PWA als Protokollhandler registrieren. Wenn ein Benutzer auf einen Link klickt, der das Protokollschema verwendet, bei dem Ihre App registriert ist, wird Ihre App automatisch gestartet. Auf diese Weise können Benutzer Links zu bestimmten Teilen oder Funktionen Ihrer App problemlos miteinander teilen.

Um sich als Protokollhandler zu registrieren, verwenden Sie den protocol_handlers Manifestmember:

{
    "protocol_handlers": [
        {
            "protocol": "mailto",
            "url": "/newEmail?to=%s"
        }
    ]
}

Weitere Informationen finden Sie unter Behandeln von Protokollen in progressiven Web-Apps.

Verwenden von Tastenkombinationen für schnellen Zugriff auf Features

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

Der folgende Code zeigt, wie Eine Verknüpfung in einem Web-App-Manifest definiert wird.

"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

Damit Benutzer Links und Dateien schnell für native Anwendungen freigeben können, verwenden Sie das share_target -Objekt im Web-App-Manifest. Eine action Seite ähnelt einem Formular. share_target Im -Objekt definieren Sie die action Seite und die Parameter, von denen Sie erwarten, dass sie an die action Seite übergeben werden.

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

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

Weitere Informationen zur Verwendung des Features "Ziel freigeben" finden Sie unter Freigeben von Inhalten für andere Apps.

Zuordnen Ihrer App zu Dateien

Wenn eine PWA als Dateihandler für bestimmte Dateitypen registriert ist, kann das Betriebssystem die App automatisch starten, wenn diese Dateien vom Benutzer geöffnet werden, ähnlich wie Microsoft Word Dateien behandelt .docx . PWAs, die Dateien verarbeiten, fühlen sich für Benutzer nativ und besser in das Betriebssystem integriert.

Um Dateien zu verarbeiten, listen Sie die Datei-MIME-Typen und Erweiterungen auf, denen Ihre App zugeordnet werden soll, und definieren Sie die URL, mit der Ihre App gestartet werden soll:

{
    "file_handlers": [
        {
            "action": "/openFile",
            "accept": {
                "text/*": [
                    ".txt"
                ]
            }
        }
    ]
}

Verarbeiten Sie dann die Dateien mithilfe der window.launchQueue() -Methode:

if ('launchQueue' in window) {
    launchQueue.setConsumer(launchParams => {
        // Do something with launchParams.files ...
    });
}

Weitere Informationen finden Sie unter Behandeln von Dateien in progressiven Web-Apps.