Créez une PWA avec Blazor en un rien de temps !

Pwa blazor SQLI

Les applications web progressive (ou progressive web app, PWA) ont le vent en poupe ! Après avoir fait le tour des nouveautés de Blazor Webassembly dans mon précédent article, je vous invite à présent à découvrir comment créer une PWA avec Blazor.

 

Pwa logo

Une application web progressive est une application qui se consulte par le biais d’une URL. Il est possible de la consulter hors connexion et même de l’installer sur un terminal (ordinateur ou smartphone). Elle est alors directement accessible depuis son icône de raccourci et se lance en plein écran. Il ne s’agit pas d’une application native, mais elle se comporte comme telle.

Un des points forts de la PWA est son interopérabilité permettant de faire fonctionner la même application quelle que soit la plateforme (il s’agit après tout d’un site web) et de ne pas dépendre des magasins d’application propre à chaque écosystème sur smartphone.

 

CREATION D’UNE PWA avec Blazor

Initialisation

Pour réaliser une application web progressive, il est nécessaire d’utiliser Blazor WebAssembly.

Blazor pwa

Il faut cocher la case « Progressive Web Application ».

Le fait d’avoir choisi PWA apporte une petite nouveauté au projet qui se trouve dans le dossier wwwroot. Tout d’abord l’icône par défaut du projet (icon-512.png), un fichier manifest.json et le fichier service-worker.js.

Si vous lancez l’application, vous verrez une page Blazor classique, à une petite exception près. Un petit plus est disponible en haut de la fenêtre.

Blazor pwa sqli 2

Et lorsque l’on clique dessus, on nous propose d’installer l’application.

Blazor pwa sqli

Si vous l’installez, vous aurez alors la même application, mais qui fonctionne en tant que PWA.

 

Blazor pwa 4

L’application s’exécute alors dans sa propre fenêtre et en plein écran. Sa propre icône est également disponible.

Blazor pwa 5

On dispose ainsi d’une application qui se comporte comme une application classique, mais qui tourne en réalité dans un navigateur.

 

Manifest.json

Le fichier manifest.json est un fichier important qui est une partie du standard des PWA : il contient les informations concernant l’application et son installation. On y retrouve par exemple le nom, l’icône, l’emplacement de démarrage de l’application, etc.

{
"short_name": "BlazorWebAssembly",
"name": "BlazorWebAssembly",
"icons": [
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6"
}

« start_url »: « ./ » : signifie que l’on démarre l’application dans le répertoire racine.

Index.html

Le fichier index.html va permettre au navigateur de savoir qu’il s’agit d’une application web progressive.

C’est dans ce fichier que l’on référence le manifeste : <link href= »manifest.json » rel= »manifest » />.

On référence également icône de l’application pour les appareils Apple : <link rel= »apple-touch-icon » sizes= »512×512″ href= »icon-512.png » />. À la différence des autres appareils, Apple a besoin d’avoir l’icône référencée dans le header de l’application.

Et pour finir, la page référence également le script service-worker.js : <script>navigator.serviceWorker.register(‘service-worker.js’);</script>.

Service Worker

Blazor utilise une MSBuild ServiceWorkerAssetsManifest qui liste tous les fichiers utiles pour une utilisation hors ligne, produit un hash et résume le tout dans le fichier service-worker-assets.js.

N.B. Le mode hors ligne n’est pas activé lors du développement. Il ne s’active qu’avec la publication de l’application. Cette publication remplace alors le fichier service-worker.js par service-worker.published.js.

Le fichier service-worker.published.js contient du code JavaScript qui permet, pour faire simple, de définir la stratégie de gestion du cache nécessaire pour le fonctionnement hors ligne. Ce fichier permet de gérer le cache de l’application. En effet, l’application va d’abord interroger ce fichier avant d’éventuellement faire une requête sur le web. Dans le cas de l’utilisation hors ligne, ce fichier permet de savoir comment afficher les pages et comment répondre à une demande sans consulter le web.

Pour résumer, il s’agit d’une sorte de centre de contrôle pour la gestion du mode hors ligne. Le fonctionnement du service-worker.published.js est assez simple.

Lors de l’installation d’une nouvelle version de la PWA, la fonction onInstall est appelée. Le service worker crée une nouvelle version du cache et l’alimente avec les informations listées dans service-worker-assets.js.

Le processus d’installation se termine quand toutes les ressources sont chargées sans erreurs et que les hash coïncident. Il entre alors dans une phase waiting for activation. Il attend alors que toutes les instances de l’application soient fermées pour s’activer. Lorsque la nouvelle version passe au statut « active », l’ancien worker et son cache sont supprimés.

La stratégie par défaut du worker est une stratégie cache-first (le cache à la priorité). Cela signifie que chaque fois qu’une ressource est demandée, le worker vérifie si elle se trouve dans le cache. Si tel est le cas, la ressource est retournée sans requête réseau. Sinon, la requête HTTP est effectuée.

 

Pour conclure

Il s’agit là d’un aperçu quant à la réalisation d’une application web progressive avec Blazor. Nous avons vu comment mettre en place une PWA facilement avec Visual Studio et son fonctionnement hors connexion. Pour aller plus loin, n’hésitez pas à consulter le site blazor.net qui contient l’essentiel pour vous lancer dans la réalisation d’application avec Blazor.

 

Retrouvez mon précédent article sur Blazor Webassembly.

 

0 commentaires

votre commentaire

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Inscription newsletter

Ne manquez plus nos derniers articles !