Utiliser un manifeste d’application web pour intégrer une PWA au système d’exploitation

  • Article

Une application web progressive (PWA) doit avoir un manifeste d’application web pour définir la façon dont la PWA s’intègre au système d’exploitation. Cet article explique ce qu’est un manifeste d’application web et les données requises et facultatives qu’un manifeste d’application web contient.

Le fichier manifeste de l’application web régit l’apparence et le comportement de votre PWA lorsqu’il est installé sur un appareil. Le manifeste de l’application web fournit des informations telles que le nom de votre application, l’emplacement du fichier des icônes qui représentent votre application dans les menus système et les couleurs de thème que le système d’exploitation utilise dans la barre de titre.

Un manifeste d’application web est un fichier JSON qui doit être référencé à partir de la page HTML de votre site web à l’aide d’un lien de manifeste. Insérez le code suivant entre les balises et </head> de la <head> page HTML de votre site web pour créer un lien vers votre fichier manifeste :

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

Type de fichier manifeste d’application web

Le contenu de votre manifeste d’application web doit être json valide, mais l’extension de fichier peut être ou .json.webmanifest.

Si vous choisissez d’utiliser l’extension .webmanifest , vérifiez que votre serveur HTTP la sert avec le application/manifest+json type MIME.

Membres du manifeste

Au minimum, un fichier manifeste doit contenir les membres de manifeste suivants :

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

Voici un exemple de fichier manifeste qui contient davantage de membres :

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

Une PWA peut être personnalisée encore plus en utilisant d’autres membres de manifeste, tels que les suivants :

Member Description
name Nom de l’application, utilisé par le système d’exploitation pour s’afficher en regard de l’icône de l’application.
short_name Vous pouvez l’utiliser pour afficher le nom de l’application lorsqu’il n’y a pas assez d’espace pour name.
description Description de l’application.
categories Liste des catégories auxquelles appartient l’application.
icons Tableau d’objets image d’icône utilisés par le système d’exploitation dans différents contextes.
screenshots Tableau d’objets image de capture d’écran, également utilisés par le système d’exploitation dans différents contextes.
start_url URL par défaut à laquelle vous devez accéder lorsque le système d’exploitation lance votre application.
scope Définit l’étendue de navigation de l’application. En dehors de cette étendue, la page visitée revient à une page web normale, et non à une PWA. Cette valeur est start_urldéfinie par défaut sur .
display À quoi doit ressembler l’application. Cela modifie la quantité de l’interface utilisateur du navigateur affichée à l’utilisateur.
display_override Permet de déterminer l’affichage préféré de l’application, en fonction de ce que l’appareil prend en charge.
theme_color Couleur de thème par défaut de l’application. Cela affecte la façon dont le système d’exploitation affiche le site.
background_color Couleur d’arrière-plan de la fenêtre où l’application est lancée, avant l’application de la feuille de style.
orientation Sur les appareils pris en charge, cela définit l’orientation par défaut de l’application (par exemple, paysage ou portrait).
protocol_handlers Liste des schémas de protocole d’URI prédéfinis ou personnalisés auxquels l’application est associée.
shortcuts La liste des tâches courantes que les utilisateurs pourront effectuer en cliquant avec le bouton droit ou en appuyant longuement sur l’icône de l’application.
share_target Type de données que l’application accepte lorsque du contenu est partagé via la boîte de dialogue de partage du système d’exploitation.
file_handlers Type de fichiers avec lequel l’application peut être lancée.

Pour en savoir plus sur les membres du manifeste, consultez Manifestes d’application web sur MDN.

Gérer des schémas de protocole spécifiques

Vous pouvez inscrire votre PWA en tant que gestionnaire de protocole. Lorsqu’un utilisateur clique sur un lien qui utilise le schéma de protocole pour lequel votre application est inscrite, votre application est lancée automatiquement. Cela permet aux utilisateurs de partager facilement des liens vers des parties ou des fonctionnalités spécifiques de votre application entre eux.

Pour vous inscrire en tant que gestionnaire de protocole, utilisez le membre de protocol_handlers manifeste :

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

Pour plus d’informations, consultez Gérer les protocoles dans Progressive Web Apps.

Utiliser des raccourcis pour fournir un accès rapide aux fonctionnalités

La plupart des systèmes d’exploitation fournissent un accès rapide aux principales fonctionnalités de l’application à l’aide de raccourcis dans le menu contextuel connecté à l’icône de l’application. Pour utiliser des raccourcis dans votre PWA, incluez le membre dans le shortcuts manifeste de votre application web.

Le code suivant montre comment définir un raccourci dans un manifeste d’application web.

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

Pour plus d’informations, consultez Définir des raccourcis d’application.

Identifier votre application en tant que cible de partage

Pour permettre aux utilisateurs de partager rapidement des liens et des fichiers avec des applications natives, utilisez l’objet share_target dans le manifeste de l’application web. Une action page est similaire à un formulaire. Dans l’objet share_target , vous définissez la action page et les paramètres que vous prévoyez d’être passés dans la action page.

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

L’objet ci-dessus share_target établit /share.html comme page action pour un partage. Cet exemple définit également trois paramètres qui seraient passés à cette action page : title, textet url.

Pour en savoir plus sur l’utilisation de la fonctionnalité Partager la cible, consultez Partager du contenu avec d’autres applications.

Associer votre application à des fichiers

Lorsqu’une PWA est inscrite en tant que gestionnaire de fichiers pour certains types de fichiers, le système d’exploitation peut lancer automatiquement l’application lorsque ces fichiers sont ouverts par l’utilisateur, comme Microsoft Word gère les .docx fichiers. Les PWA qui gèrent les fichiers sont plus natives pour les utilisateurs et mieux intégrées au système d’exploitation.

Pour gérer les fichiers, répertoriez les types mime de fichier et les extensions auxquels vous souhaitez associer votre application, puis définissez l’URL avec laquelle votre application doit être lancée :

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

Gérez ensuite les fichiers à l’aide de la window.launchQueue() méthode :

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

Pour plus d’informations, consultez Gérer des fichiers dans Progressive Web Apps.