Progressive web apps

23.1.23

Progressive web apps

Le code de l'application

Le code d'une application progressive ne diffère pas de celui d'une application web.

Un fichier .webmanifest est ajouté à la page web :

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

Le code global de l'application :

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="manifest.webmanifest" />
    <title>App</title>
</head>

<body>
    <input id="inputName" type="text" placeholder="Nom"><button onclick="sayHello()">Dire "bonjour"</button>
    <p id="outputHello"></p>
    <script>
        function sayHello() {
            var inputNameElement = document.getElementById("inputName");
            outputHello.innerHTML = "Bonjour " + inputNameElement.value + " !";
        }
    </script>
</body>

</html>

Manifest

Le manifest est un fichier JSON

{
    "lang": "fr-fr",
    "name": "Mon application",
    "short_name": "Mon app",
    "description": "Mon application pour dire bonjour",
    "start_url": "/",
    "background_color": "#ffffff",
    "theme_color": "#424242",
    "orientation": "any",
    "display": "standalone",
    "icons": [{
        "src": "icon/icons8-app-192.png",
        "sizes": "192x192"
    }, {
        "src": "icon/icons8-app-512.png",
        "sizes": "512x512"
    }]
}

start_url correspond à l'URL de l'application - Ici correspond à index.html

background_color est la couleur de fond pour l'application au démarrage et/ou icône de la fenêtre sur Android

theme_color permet d'avoir une autre couleur de fond pour les icônes - Non compatible avec Firefox sur Android

orientation force l'application à être en paysage ou en portrait

display correspond au type d'affichage de l'application. l'option standalone permet d'avoir une application qui ressemble à une application native

icons contient les différents icônes et les tailles des icônes de l'application

Vous pouvez consulter la documentation du manifeste des applications web