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

Artikel
03/15/2023

Die Web-App-Manifestdatei bestimmt, wie Ihre progressive Web-App (PWA) aussieht und wie sie 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 `name`vorhanden 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_url`festgelegt.
`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.

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 behandeln, 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 Verarbeiten von Dateien in progressiven Web-Apps.