Préchargement des assemblys Blazor WASM sur une page de connexion HTML simple

Amélioration de Blazor WASM avec une intégration transparente de la connexion

Imaginez ouvrir une application Web où la page de connexion est ultra-rapide, légère et simple, mais mène toujours à une application Blazor WASM complète. 🚀 Ce type de configuration combine des frameworks modernes comme Blazor avec la simplicité intemporelle du HTML et du JavaScript. Mais pouvez-vous précharger les lourds assemblys WASM de Blazor pendant que votre utilisateur est encore en train de saisir ses informations d'identification ?

Les développeurs sont souvent confrontés au défi d'optimiser l'expérience utilisateur, en particulier lors de la phase de chargement initiale. Une page de connexion HTML simple permet un accès rapide, mais son intégration avec Blazor introduit des complexités. Beaucoup se demandent s'ils peuvent rendre l'application Blazor « prête à l'emploi » alors que la page de connexion est toujours active. C’est précisément là que ce sujet devient intrigant.

L'idée est d'exploiter les opérations asynchrones pour télécharger les assemblys Blazor WASM pendant le cycle de vie de la page de connexion. Au moment où l'utilisateur se connecte, l'application est déjà préchargée et peut démarrer presque instantanément. Cette approche améliore non seulement les performances perçues, mais maintient également une conception conviviale. 🌟

Dans cet article, nous explorerons si cette configuration est réalisable, discuterons de ses pièges potentiels et proposerons des étapes pratiques pour y parvenir. À la fin, vous saurez comment relier les pages de connexion HTML simples avec les applications Blazor WASM avancées pour une expérience utilisateur transparente.

Optimisation du préchargement Blazor WASM avec du HTML simple

Les scripts fournis dans les exemples précédents sont conçus pour combler le fossé entre une page de connexion HTML légère et à chargement rapide et l'application Blazor WASM, plus gourmande en ressources. Le premier script garantit que les assemblys WebAssembly de Blazor sont préchargés de manière asynchrone pendant le cycle de vie de la page de connexion. Cela améliore l'expérience utilisateur en permettant à l'application principale de se charger presque instantanément après l'authentification. Par exemple, la récupération du fichier « blazor.boot.json » est une étape critique, car il contient toutes les métadonnées et ressources nécessaires au démarrage de l'application Blazor. De cette façon, les utilisateurs ne subissent aucun retard après avoir soumis leurs informations de connexion. 🌐

Un autre élément clé du script frontal est l'utilisation des promesses JavaScript pour gérer plusieurs tâches asynchrones simultanément. Pendant la récupération des assemblys, la fonctionnalité de connexion est pleinement opérationnelle. Cela garantit que l'application est réactive même lors de l'exécution de tâches en arrière-plan. Un bon exemple est la manière dont la méthode `Promise.all()` consolide les processus de téléchargement d'assembly, les rendant efficaces et sécurisés. Cette approche minimise les points de défaillance potentiels lors du préchargement, réduisant ainsi le risque que les utilisateurs soient confrontés à des chargements d'applications interrompus ou incomplets.

Côté back-end, l'API ASP.NET est utilisée pour authentifier les utilisateurs en toute sécurité et renvoyer un jeton Web JSON (JWT). Ce jeton valide non seulement la session utilisateur, mais permet également à l'application Blazor de fonctionner dans un environnement sécurisé après la connexion. L'utilisation d'un « JwtSecurityTokenHandler » dans le code du serveur garantit que les jetons sont générés selon les méthodes de cryptage standard de l'industrie, améliorant ainsi la sécurité. Par exemple, un utilisateur se connectant avec des informations d'identification valides reçoit un JWT signé, qui peut être stocké dans le stockage local du navigateur pour les demandes ultérieures. 🔒

L'intégration de ces scripts permet d'obtenir un flux de travail fluide et convivial. Lorsque la page de connexion est chargée, le script de préchargement commence à télécharger les fichiers Blazor. Une fois que l'utilisateur clique sur « Connexion » et est authentifié, l'application Blazor n'est initialisée que si les assemblys sont prêts. Sinon, l'application attend la fin du téléchargement avant de se lancer. Cette approche optimise non seulement les performances, mais offre également une expérience transparente. Un développeur pourrait comparer cette configuration à une voiture « à deux moteurs », où un moteur est utilisé pour les tâches de base et le second pour le levage de charges lourdes. Cet équilibre garantit que les développeurs et les utilisateurs bénéficient d'une application meilleure et plus réactive.

// Front-End: HTML + JavaScript solution for preloading Blazor WASM assemblies
document.addEventListener("DOMContentLoaded", async () => {
  // Step 1: Define the Blazor assemblies URL
  const wasmBasePath = "/_framework/blazor.boot.json";
  const preloadAssemblies = async () => {
    try {
      const response = await fetch(wasmBasePath);
      if (response.ok) {
        const data = await response.json();
        const assemblyPromises = data.resources.assembly.map((asm) => fetch(asm));
        await Promise.all(assemblyPromises);
        console.log("Blazor assemblies preloaded successfully.");
      }
    } catch (error) {
      console.error("Failed to preload Blazor assemblies:", error);
    }
  };
  preloadAssemblies();
});
// Login button handler
document.getElementById("login-btn").addEventListener("click", async () => {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  try {
    const response = await fetch("/api/authenticate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username, password })
    });
    if (response.ok) {
      const token = await response.json();
      localStorage.setItem("jwtToken", token);
      console.log("Authentication successful.");
      // Optionally, trigger Blazor WASM now
      if (typeof Blazor !== "undefined") Blazor.start();
    } else {
      alert("Invalid credentials.");
    }
  } catch (error) {
    console.error("Error during login:", error);
  }
});

using Microsoft.AspNetCore.Mvc;
using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
[ApiController]
[Route("api/[controller]")]
public class AuthenticateController : ControllerBase
{
    private readonly string key = "Your_Secret_Key_Here";

    [HttpPost]
    public IActionResult Authenticate([FromBody] LoginRequest request)
    {
        if (request.Username == "user" && request.Password == "password")
        {
            var tokenHandler = new JwtSecurityTokenHandler();
            var tokenKey = Encoding.ASCII.GetBytes(key);
            var tokenDescriptor = new SecurityTokenDescriptor
            {
                Subject = new ClaimsIdentity(new[] { new Claim(ClaimTypes.Name, request.Username) }),
                Expires = DateTime.UtcNow.AddHours(1),
                SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(tokenKey), SecurityAlgorithms.HmacSha256Signature)
            };
            var token = tokenHandler.CreateToken(tokenDescriptor);
            return Ok(tokenHandler.WriteToken(token));
        }
        return Unauthorized();
    }
}
public class LoginRequest
{
    public string Username { get; set; }
    public string Password { get; set; }
}

Rationalisation du chargement de Blazor WASM pour les pages de connexion

Un aspect souvent négligé de l'optimisation d'une application Blazor WebAssembly consiste à exploiter les mécanismes de mise en cache du navigateur. Lors du préchargement des assemblys, ces ressources peuvent être stockées localement dans le cache du navigateur pour les visites ultérieures, réduisant ainsi considérablement les temps de chargement. En utilisant l'en-tête « Cache-Control » côté serveur, les développeurs peuvent garantir que les ressources statiques telles que les assemblys sont correctement mises en cache. Par exemple, vous pouvez définir « max-age=31536000 » pour mettre en cache les assemblys pendant un an, ce qui est idéal pour les ressources qui changent rarement. Cette approche fonctionne de manière transparente avec le mécanisme de préchargement, améliorant à la fois la vitesse et la fiabilité. 🚀

Une autre considération est la manière dont Blazor gère les mises à jour de l'application. L'utilisation d'une page de connexion préchargée signifie que les mises à jour de l'assembly doivent être gérées avec soin pour empêcher l'utilisation de fichiers obsolètes. La mise en œuvre d'un système de vérification de version dans votre logique de récupération « blazor.boot.json » peut résoudre ce problème. En ajoutant un hachage de version aux URL d'assembly, vous garantissez que le navigateur récupère les ressources mises à jour chaque fois que l'application est redéployée. Par exemple, l'ajout d'un horodatage ou d'un hachage de validation Git garantit que les utilisateurs obtiennent toujours la dernière version de l'application tout en évitant les téléchargements inutiles. 🌐

Enfin, l’optimisation de l’expérience utilisateur lors des téléchargements d’assemblys est essentielle. L'intégration d'un indicateur visuel de progression ou d'une animation de « chargement » sur la page de connexion peut indiquer aux utilisateurs que quelque chose se passe en arrière-plan. Cela réduit la frustration des utilisateurs et rend l'expérience plus interactive. En combinant des techniques telles que la mise en cache, les vérifications de versions et les repères visuels, les développeurs peuvent garantir un déploiement d'application Blazor WASM plus fluide et plus professionnel.