Cette semaine, on va encore améliorer un petit peu notre WebApp de contrôle à distance d'un chauffage que nous avions réalisée il y a quelques semaines. Nous allons transformer cette WebApp en application progressive (PWA), ce qui permet de l’installer comme une application native sous Windows.
Une Progressive Web App (PWA) est une application web qui combine les avantages d’un site internet et d’une application native. Elle s’installe directement depuis un navigateur et peut fonctionner hors ligne grâce au cache. Sous Windows, cela permet de déguiser notre web app en application native. Elle apparait dans le menu Démarrer et tourne dans sa propre fenêtre.
Une PWA est composée de deux éléments. Un manifeste qui décrit l'application et un Service Worker qui est du code JavaScript qui est démarré juste avant l'ouverture de la fenêtre et qui agit un peu comme un proxy.
Le manifeste
La première étape est de réaliser le manifeste qui décrit notre application. Il s’agit d’un simple fichier JSON composé de quelques champs. Il faut au minimum fournir:
- Le nom de l'application
- Deux icônes (512px et 192px)
- L'URL de la page principale
- Le mode d'affichage (display)
Voici, par exemple, le manifeste de notre application:
"lang": "en-us",
"name": "Remote heating control",
"description": "Yoctopuce Remote heating control Example",
"start_url": "./app.html",
"orientation": "any",
"display": "standalone",
"icons": [
{
"type": "image/svg+xml",
"src": "yocto.svg",
"sizes": "512x512"
},
{
"type": "image/svg+xml",
"src": "yocto.svg",
"sizes": "192x192"
}
]
}
La documentation complète des champs du manifeste est disponible sur MDN.
Enfin il faut ajouter une référence à l'aide du tag link à ce manifeste dans le code de note Web App.
Le Service Worker
Un Service Worker est un script exécuté en arrière-plan par le navigateur qui permet de gérer le cache des ressources, d’intercepter les requêtes réseau pour utiliser les versions cachées si le serveur de notre web app est offline. Concrètement, cela permet à la PWA de s’afficher, même sans connectivité internet, au lieu d’afficher une erreur 404.
Lors de l’événement install, le Service Worker ouvre un cache nommé "remote-heating-control" et y enregistre les fichiers utilisés par l'application:
- la page d’accueil (./app.html)
- le code JavaScript de l'application (app.min.js)
- l'icône de la page (yocto.svg).
Cela garantit que ces éléments sont disponibles immédiatement, même sans connexion internet.
Lorsque l'application est démarrée et qu'une ressource est chargée via l’événement fetch, le Service Worker vérifie d’abord si celle-ci est déjà en cache. Si c’est le cas, il la retourne directement. Sinon, il tente de la récupérer depuis le réseau, puis la stocke dans le cache pour les prochaines utilisations.
Voilà le code de notre service worker (fichier sw.js):
// Uses the install event to pre-cache all initial resources.
self.addEventListener('install', event => {
event.waitUntil((async () => {
const cache = await caches.open(CACHE_NAME);
cache.addAll([
'./app.html',
'./app.min.js',
'./yocto.svg'
]);
})());
});
self.addEventListener('fetch', event => {
event.respondWith((async () => {
const cache = await caches.open(CACHE_NAME);
// Gets the resource from the cache.
const cachedResponse = await cache.match(event.request);
if (cachedResponse) {
return cachedResponse;
} else {
try {
// If the resource was not in the cache, tries the network.
const fetchResponse = await fetch(event.request);
// Saves the resource in the cache and return it.
cache.put(event.request, fetchResponse.clone());
return fetchResponse;
} catch (e) {
// The network failed
}
}
})());
});
Il faut ensuite enregistrer ce Service Worker dans le code HTML de notre application web:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js', {scope: './'});
}
</script>
Utilisation
Une fois ces modifications effectuées, les navigateurs qui prennent en charge les applications Web progressives affichent une icône permettant d’installer l’application. Par exemple voici la page affichée sur Edge:
La page affichée avec Edge
Et Chrome:
La page affichée avec Chrome
Si on clique sur cette icône, le browser propose d'installer l'application localement.
L'installation
Une fois installée, l'application est disponible comme n'importe quelle application native. Elle a sa propre fenêtre et sa propre icône dans la barre des tâches. L'application est chargée même si le PC est n'est pas connecté à internet grâce au Service Worker. Dans ce cas, l'application n'arrivera pas à se connecter aux modules Yoctopuce distants, l'interface de l'application est utilisable et un message d'erreur est peut-être affiché correctement.
L'application
L'application est même affiché dans la liste des application Windows. Malheureusement, il n'est pour l'instant pas possible d'afficher un numéro de version dans cette fenêtre.
La PWA apparaît dans la liste des applications installées
Conclusion
Les progressive web app permettent de rendre l'utilisation d'application web proche d’une application native. L'installation est très simple et est disponible sur n'importe quel Windows (en utilisant Edge ou Chrome). Et, en bonus, cela permet d'afficher un message d'erreur correctement si la machine n'est pas connectée à internet.
Note: Le code complet de l'application est toujours disponible sur GitHub.
