Càrrega prèvia de conjunts de Blazor WASM en una pàgina d'inici de sessió HTML senzilla

Millora de Blazor WASM amb la integració d'inici de sessió perfecta

Imagineu-vos obrir una aplicació web on la pàgina d'inici de sessió és ràpida, lleugera i senzilla, però encara condueix a una aplicació Blazor WASM amb totes les funcions. 🚀 Aquest tipus de configuració combina marcs moderns com Blazor amb la senzillesa atemporal d'HTML i JavaScript. Però podeu carregar prèviament els pesats conjunts WASM de Blazor mentre el vostre usuari encara està escrivint les seves credencials?

Els desenvolupadors sovint s'enfronten al repte d'optimitzar l'experiència de l'usuari, especialment durant la fase de càrrega inicial. Una pàgina d'inici de sessió HTML senzilla permet un accés ràpid, però integrar-la amb Blazor introdueix complexitats. Molts es pregunten si poden fer que l'aplicació Blazor estigui "a punt per funcionar" mentre la pàgina d'inici de sessió encara està activa. Aquí és precisament on aquest tema esdevé intrigant.

La idea és aprofitar les operacions asíncrones per descarregar els conjunts de Blazor WASM durant el cicle de vida de la pàgina d'inici de sessió. Quan l'usuari inicia sessió, l'aplicació ja està precarregada i es pot iniciar gairebé a l'instant. Aquest enfocament no només millora el rendiment percebut, sinó que també manté un disseny fàcil d'utilitzar. 🌟

En aquest article, explorarem si aquesta configuració és viable, parlarem dels seus possibles inconvenients i oferirem passos pràctics per aconseguir-ho. Al final, sabreu com connectar pàgines d'inici de sessió HTML senzilles amb aplicacions avançades de Blazor WASM per a una experiència d'usuari perfecta.

Optimització de la precàrrega de Blazor WASM amb HTML simple

Els scripts que es proporcionen als exemples anteriors estan dissenyats per salvar la bretxa entre una pàgina d'inici de sessió HTML lleugera i de càrrega ràpida i l'aplicació Blazor WASM que consumeix més recursos. El primer script garanteix que els conjunts WebAssembly de Blazor es carreguen prèviament de manera asíncrona durant el cicle de vida de la pàgina d'inici de sessió. Això millora l'experiència de l'usuari permetent que l'aplicació principal es carregui gairebé a l'instant després de l'autenticació. Per exemple, obtenir el fitxer `blazor.boot.json` és un pas crític, ja que conté totes les metadades i recursos necessaris per arrencar l'aplicació Blazor. D'aquesta manera, els usuaris no experimenten retards després d'enviar les seves credencials d'inici de sessió. 🌐

Una altra part clau de l'script frontal és l'ús de promeses de JavaScript per gestionar múltiples tasques asíncrones simultàniament. Mentre s'obtenen els conjunts, la funcionalitat d'inici de sessió està completament operativa. Això garanteix que l'aplicació respon fins i tot mentre realitza tasques en segon pla. Un bon exemple és com el mètode `Promise.all()` consolida els processos de descàrrega de muntatge, fent-lo eficient i segur. Aquest enfocament minimitza els possibles punts de fallada durant la precàrrega, reduint el risc que els usuaris es trobin amb càrregues d'aplicacions trencades o incompletes.

A la part posterior, l'ASP.NET API s'utilitza per autenticar els usuaris de manera segura i retornar un testimoni web JSON (JWT). Aquest testimoni no només valida la sessió de l'usuari, sinó que també permet que l'aplicació Blazor funcioni en un entorn segur després de la sessió. L'ús d'un "JwtSecurityTokenHandler" al codi del servidor garanteix que els testimonis es generin seguint mètodes de xifratge estàndards del sector, millorant la seguretat. Per exemple, un usuari que inicie sessió amb credencials vàlides rep un JWT signat, que es pot emmagatzemar a l'emmagatzematge local del navegador per a sol·licituds posteriors. 🔒

La incorporació d'aquests scripts aconsegueix un flux de treball suau i fàcil d'utilitzar. Quan es carrega la pàgina d'inici de sessió, l'script de precàrrega comença a descarregar els fitxers Blazor. Un cop l'usuari fa clic a "Iniciar sessió" i s'ha autenticat, l'aplicació Blazor només s'inicializa si els conjunts estan preparats. En cas contrari, l'aplicació espera que finalitzi la descàrrega abans d'iniciar-se. Aquest enfocament no només optimitza el rendiment, sinó que també ofereix una experiència perfecta. Un desenvolupador podria comparar aquesta configuració amb un cotxe de "doble motor", on un motor s'utilitza per a tasques bàsiques i el segon per a l'aixecament de peces pesades. Aquest equilibri garanteix que tant els desenvolupadors com els usuaris gaudeixin d'una aplicació millor i més sensible.

// 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; }
}

Racionalització de la càrrega de Blazor WASM per a les pàgines d'inici de sessió

Un aspecte que sovint es passa per alt de l'optimització d'una aplicació Blazor WebAssembly és aprofitar els mecanismes de memòria cau del navegador. Quan es precarreguen muntatges, aquests recursos es poden emmagatzemar localment a la memòria cau del navegador per a visites posteriors, reduint significativament els temps de càrrega. Mitjançant l'ús de la capçalera "Cache-Control" al costat del servidor, els desenvolupadors poden assegurar-se que els recursos estàtics com els conjunts s'emmagatzemen correctament a la memòria cau. Per exemple, podeu establir `max-age=31536000` per emmagatzemar a la memòria cau els conjunts durant un any, cosa que és ideal per als recursos que rarament canvien. Aquest enfocament funciona perfectament amb el mecanisme de precàrrega, millorant tant la velocitat com la fiabilitat. 🚀

Una altra consideració és com Blazor gestiona les actualitzacions de l'aplicació. L'ús d'una pàgina d'inici de sessió carregada prèviament significa que les actualitzacions del conjunt s'han de gestionar amb cura per evitar que s'utilitzin fitxers obsolets. La implementació d'un sistema de verificació de versions dins de la vostra lògica d'obtenció de `blazor.boot.json' pot solucionar-ho. Si afegiu un hash de versió als URL del conjunt, us assegureu que el navegador obtingui recursos actualitzats sempre que l'aplicació es torni a desplegar. Per exemple, afegir una marca de temps o un hash de commit de Git garanteix que els usuaris sempre tinguin la darrera versió de l'aplicació i eviten descàrregues innecessàries. 🌐

Finalment, optimitzar l'experiència de l'usuari durant les descàrregues de muntatge és fonamental. La incorporació d'un indicador visual de progrés o una animació de "càrrega" a la pàgina d'inici de sessió pot proporcionar comentaris als usuaris que alguna cosa està passant en segon pla. Això redueix la frustració dels usuaris i fa que l'experiència sigui més interactiva. En combinar tècniques com la memòria cau, les comprovacions de versions i les indicacions visuals, els desenvolupadors poden garantir un desplegament de l'aplicació Blazor WASM més fluid i professional.