Applications Web progressives avec Blazor WebAssembly

avril 15, 2025

Applications Web progressives avec Blazor WebAssembly

Découvrez ce que sont les applications Web progressives (PWAS) et comment ajouter le support PWA à une application Blazor WebAssembly.

Applications Web progressives (PWA) sont une alternative aux applications natives, avec l’avantage principal de ne pas nécessiter de regroupement ou de distribution distincts pour différentes plateformes. Au lieu de cela, ils sont une extension des applications Web fournissant capacités hors ligne et mise en cache avancéeAmélioration des performances de démarrage d’une application Web.

Les PWA sont pris en charge par les principaux navigateurs, notamment Google Chrome, Firefox pour Android, Microsoft Edge et Apple Safari, mais pas par Firefox pour Desktop.

Dans cet article, vous apprendrez les principes fondamentaux des applications Web progressives et comment créer un PWA à l’aide de Blazor WebAssembly.

Tu peux accéder au code utilisé dans cet exemple sur github.

Comment fonctionnent les applications Web progressives?

Les applications Web progressives utilisent des technologies de plate-forme Web pour fournir une expérience utilisateur au-delà d’une application Web ordinaire.

Les PWA peuvent être installés sur la machine client, exécuter du code en arrière-plan (support hors ligne) et s’intégrer à l’appareil ou à d’autres PWA. Par exemple, les PWA peuvent gérer les messages push à partir du serveur ou afficher des notifications à l’aide du système de notifications du système d’exploitation.

UN manifeste d’application Web Le fichier définit les métadonnées requises pour un PWA. Il définit le nom de l’application (pertinent pour l’installation de l’application) et une icône.

Employés de service sont des composants facultatifs qui permettent au PWA de traiter les informations en arrière-plan et de fournir un support hors ligne.

Par exemple, un travailleur de service pourrait envoyer les données au serveur lorsque l’appareil est en ligne après avoir été déconnecté.

Caractéristiques clés d’un PWA

Concentrons-nous sur les caractéristiques clés fourni par un PWA:

Support hors ligne: Utilise des travailleurs de service pour mettre en cache des actifs essentiels, permettant à l’application de fonctionner sans une connexion Internet (stable).
Installation: Les utilisateurs peuvent «installer» l’application directement à partir du navigateur sur leur appareil.
Notifications push: PWAS peut envoyer des notifications aux utilisateurs même lorsque le navigateur est fermé.
Performance: Les ressources en cache réduisent les temps de chargement et améliorent les performances.

Vous pouvez choisir. Un PWA n’a pas à implémenter toutes ces fonctionnalités clés.

Qui utilise les PWA en 2024/2025?

Les grandes entreprises telles que Uber, Pinterest, Housing.com et Forbes fournissent des applications PWA.

Regardons l’Uber Pwa. Vous pourriez penser qu’Uber a une application dans le Google Play Store et le Apple App Storealors pourquoi ont-ils besoin d’un PWA?

L’objectif d’Uber est de connecter les coureurs et les conducteurs du monde entier. À l’échelle mondiale, seules certaines personnes utilisent l’un des derniers smartphones officiellement soutenus. Google et Apple établissent leurs propres règles sur les appareils accès aux applications. Par exemple, ils exigent que les développeurs d’applications ciblent des versions de plate-forme spécifiques, qui exclut finalement les appareils plus anciens de l’utilisation de leurs applications.

Tirant parti de PWA, Uber est en mesure de fournir une meilleure expérience utilisateur à l’aide d’un PWA par rapport à une application Web traditionnelle pour les utilisateurs exclues de l’utilisation d’applications mobiles.

Création d’une application Blazor WebAssembly en tant que PWA

Maintenant que nous savons ce qu’est un PWA, quels avantages il a et pourquoi vous voudrez peut-être implémenter un PWA, concentrons-nous sur la création d’un PWA à l’aide de Blazor WebAssembly.

Le Application autonome Blazor WebAssembly Le modèle de projet offre la possibilité de sélectionner la case à cocher progressive de l’application Web lors de la création du projet.

Lorsque vous utilisez la CLI .NET, le blazorwasm Le modèle de projet offre le --pwa Option pour ajouter les mêmes fonctionnalités à votre application d’assemblage Web Blazor.

dotnet new blazorwasm -o BlazorPWA --pwa

Le modèle de projet crée une application Blazor WebAssembly (sans projet d’hébergement ASP.NET Core), avec les fichiers PWA suivants à l’intérieur du wwwroot dossier:

icon-192.png
icon-512.png
manifeste.webmanifest
service-travailleur.js
service-travailleur.published.js

Le service-worker.js fichier, le fichier mainfest et les icônes sont référencées dans le index.html déposer:

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

<head>
  
  <link href="manifest.webmanifest" rel="manifest" />
  <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
  <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
</head>
<body>
  
  <script src="_framework/blazor.webassembly.js"></script>
  <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>

Le fichier manifeste généré (manifest.webmanifest) contient la configuration du PWA. Il fait référence aux fichiers d’icônes et spécifie le nom de l’application.

{
  "name": "BlazorPWA",
  "short_name": "BlazorPWA",
  "id": "./",
  "start_url": "./",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#03173d",
  "prefer_related_applications": false,
  "icons": [
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ]
}

Vous pouvez en savoir plus sur les paramètres disponibles dans le Spécification manifeste PWA.

Le service-worker.js Le fichier utilisé pendant le développement de l’application est vide par défaut. Le service-worker.published.js Le fichier contient le code pour l’environnement de production.

Il gère les événements d’installation, d’activation et de récupération en enregistrant un fonction de rappel.

self.addEventListener('install', event => event.waitUntil(onInstall(event)));
self.addEventListener('activate', event => event.waitUntil(onActivate(event)));
self.addEventListener('fetch', event => event.respondWith(onFetch(event)));

J’expliquerai la principale fonctionnalité de l’implémentation. Pour une référence complète, regardez le projet Référentiel GitHub ou générer une application Blazor WebAssembly PWA vous-même.

async function onInstall(event) {
    console.info('Service worker: Install');

    
    const assetsRequests = self.assetsManifest.assets
        .filter(asset => offlineAssetsInclude
            .some(pattern => pattern.test(asset.url)))
        .filter(asset => !offlineAssetsExclude
            .some(pattern => pattern.test(asset.url)))
        .map(asset => new Request(asset.url, 
            { integrity: asset.hash, cache: 'no-cache' }));

    await caches.open(cacheName)
        .then(cache => cache.addAll(assetsRequests));
}

La fonction de rappel pour l’événement d’installation cache les actifs trouvés dans la définition manifeste.

async function onActivate(event) {
    console.info('Service worker: Activate');

    
    const cacheKeys = await caches.keys();
    await Promise.all(cacheKeys
        .filter(key => key.startsWith(cacheNamePrefix) && key !== cacheName)
        .map(key => caches.delete(key)));
}

La fonction de rappel pour le activer L’événement supprime les caches inutilisées en obtenant les clés du cache et en les comparant à la version actuelle de l’application.

async function onFetch(event) {
    let cachedResponse = null;
    if (event.request.method === 'GET') {
        
        
        
        
        const shouldServeIndexHtml = event.request.mode === 'navigate'
            && !manifestUrlList.some(url => url === event.request.url);

        const request = shouldServeIndexHtml ? 'index.html' : event.request;
        const cache = await caches.open(cacheName);
        cachedResponse = await cache.match(request);
    }

    return cachedResponse || fetch(event.request);
}

Le rappel pour le aller chercher L’événement agit comme un intercepteur. Cette fonction de rappel est appelée pour chacun demander la demande exécuté dans le code d’application.

L’implémentation recherche la ressource demandée dans le cache. S’il ne peut pas le trouver dans le cache, il transmet la demande à la fonction de récupération régulière, qui effectue un Demande HTTP.

Cette mise en œuvre standard du travailleur des services est souvent suffisante pour les PWA simples. Cependant, vous pouvez personnaliser le code si nécessaire.

Par exemple, l’implémentation standard ne cache pas les informations récupérées en exécutant la demande HTTP via la fonction Fetch. Vous pouvez ajouter cela pour cache la réponse et le fournir à partir du cache pour les appels futurs.

Cependant, cela n’a de sens que dans les cas où vous ne comptez pas sur des informations à jour d’un serveur. Sinon, cette implémentation renverrait toujours les mêmes informations, bien que le serveur ait une version de données plus récente.

Chargement des données dans un PWA

Dans la génération Weather Composant, nous voyons le code suivant:

protected override async Task OnInitializedAsync()
{
    forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>(
        "sample-data/weather.json");
}

Le sample-data/weather.json Le chemin fait référence à un fichier fourni avec le PWA. Dans le wwwroot dossier, nous avons un sample-data dossier contenant un weather.json fichier avec les données suivantes:

[
  {
    "date": "2022-01-06",
    "temperatureC": 1,
    "summary": "Freezing"
  },
  {
    "date": "2022-01-07",
    "temperatureC": 14,
    "summary": "Bracing"
  },
  {
    "date": "2022-01-08",
    "temperatureC": -13,
    "summary": "Freezing"
  },
  {
    "date": "2022-01-09",
    "temperatureC": -16,
    "summary": "Balmy"
  },
  {
    "date": "2022-01-10",
    "temperatureC": -2,
    "summary": "Chilly"
  }
]

Dans une application de production, vous pouvez compter sur des données par défaut chargées à partir du wwwroot dossier dans un scénario hors ligneou cache Les données ont récupéré lors de la dernière application en ligne. Tout dépend du cas d’utilisation.

Ajout de la prise en charge de PWA aux applications existantes Blazor WebAssembly

Il est également possible d’ajouter une prise en charge PWA à une application Blazor WebAssembly existante.

Tout d’abord, nous devons ajouter le ServiceWorkerAssetsManifest propriété et un ServiceWorker Élément du fichier du projet:

<PropertyGroup>
  <ServiceWorkerAssetsManifest>
    service-worker-assets.js
  </ServiceWorkerAssetsManifest>
</PropertyGroup>

<ItemGroup>
  <ServiceWorker Include="wwwroot\service-worker.js" 
    PublishedContent="wwwroot\service-worker.published.js" />
</ItemGroup>

Ensuite, vous devez créer et ajouter les fichiers requis pour un PWA à l’application. Il est préférable de créer une nouvelle application Blazor WebAssembly avec la prise en charge de PWA (voir ci-dessus) et de copier les actifs générés du nouveau projet à l’application existante.

Vous devez copier les fichiers suivants dans le wwwroot Dossier de l’application Blazor WebAssembly existante:

icon-192.png
icon-512.png
manifeste.webmanifest
service-travailleur.js
service-travailleur.published.js

Vous devez également référencer les icônes et le PWA se manifeste dans le document HTML racine de l’application, très probablement le index.html déposer:

<link href="manifest.webmanifest" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
<link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />

Pour référencer le script du travailleur du service, vous devez également ajouter le code suivant après le blazor.webassembly.js Référence du script:

<script>navigator.serviceWorker.register('service-worker.js');</script>

Installation d’un PWA dans un navigateur

Chaque application Web fournissant un manifeste PWA sera installée dans le navigateur. Par exemple, l’application de démonstration utilisée dans cet article peut être installée sur Google Chrome à l’aide du bouton de la barre d’adresse.

L’installation d’une application PWA sur Windows à l’aide de Google Chrome entraîne un raccourci de bureau et, éventuellement, une icône dans la barre des tâches.

Lors du lancement de l’application, nous utilisons le raccourci de bureau (sans fournir d’URL à la barre d’adresse du navigateur). L’application lancée ne montre pas la barre d’adresse.

Cela ressemble beaucoup plus à une application native, même s’il s’agit toujours d’une application Web.

Notifications push

L’envoi de notifications push d’un serveur vers le système de notification natif dépend de la technologie backend, par exemple si vous utilisez un backend Core ASP.NET.

Le mécanisme du côté client pour recevoir et afficher des notifications push est indépendant de Blazor WebAssembly et est implémenté par le travailleur des services.

La mise en œuvre des notifications push est hors de portée de cet article. Cependant, Microsoft en a un excellent exemple, Fournir un exemple de mise en œuvre pour les notifications push Dans leur application de pizza flamboyante.

Support PWA manquant dans Firefox pour ordinateur

Bien que le navigateur officiel de Firefox ne prenne actuellement en charge PWA, il y a un Projet communautaire qui permet l’installation, la gestion et l’utilisation des PWA dans Firefox pour le bureau.

Si vous ciblez les utilisateurs ayant des restrictions sur l’utilisation de Firefox comme seule option ou souhaitez aider les utilisateurs qui souhaitent utiliser Firefox, cet outil pourrait être une solution bienvenue.

Clause de non-responsabilité: Installez et utilisez des extensions non officielles du navigateur à vos propres risques.

Conclusion

Les applications Web progressives (PWAS) offrent des fonctionnalités utiles qui améliorent l’expérience utilisateur, telles que le support hors ligne, l’intégration dans le système de notification natif et la possibilité d’exécuter l’application à partir de l’écran de démarrage d’un smartphone sans entrer l’URL dans la barre d’adresse d’un navigateur.

Les PWA sont largement pris en charge et les développeurs peuvent choisir et choisir les fonctionnalités PWA qu’ils souhaitent implémenter pour leurs applications Web.

Microsoft fournit des modèles de démarrage pour créer des applications Blazor WebAssembly avec la prise en charge de PWA dans Visual Studio et le .NET CLI.

Au moment de la rédaction de cet article, le seul navigateur majeur qui ne prend pas en charge PWAS est Firefox pour le bureau.