Prednalaganje sklopov Blazor WASM na prijavno stran z navadnim HTML

Izboljšanje Blazor WASM z brezhibno integracijo prijave

Predstavljajte si, da odprete spletno aplikacijo, kjer je stran za prijavo bliskovito hitra, lahka in preprosta, vendar še vedno vodi do aplikacije Blazor WASM s polnimi funkcijami. 🚀 Ta vrsta nastavitve združuje sodobna ogrodja, kot je Blazor, z brezčasno preprostostjo HTML in JavaScript. Toda ali lahko vnaprej naložite Blazorjeve težke sklope WASM, medtem ko vaš uporabnik še vedno vnaša svoje poverilnice?

Razvijalci se pogosto srečujejo z izzivom optimizacije uporabniške izkušnje, še posebej v začetni fazi nalaganja. Navadna prijavna stran HTML omogoča hiter dostop, vendar njena integracija z Blazorjem predstavlja zapletenost. Mnogi se sprašujejo, ali lahko aplikacijo Blazor naredijo "pripravljeno za uporabo", medtem ko je stran za prijavo še aktivna. Ravno tu postane ta tema zanimiva.

Ideja je izkoristiti asinhrone operacije za prenos sklopov Blazor WASM med življenjskim ciklom prijavne strani. Ko se uporabnik prijavi, je aplikacija že vnaprej naložena in se lahko zažene skoraj v trenutku. Ta pristop ne izboljša samo zaznane zmogljivosti, ampak tudi ohranja uporabniku prijazen dizajn. 🌟

V tem članku bomo raziskali, ali je ta nastavitev izvedljiva, razpravljali o njenih morebitnih pasteh in ponudili praktične korake, kako to doseči. Na koncu boste vedeli, kako premostiti navadne prijavne strani HTML z naprednimi aplikacijami Blazor WASM za brezhibno uporabniško izkušnjo.

Optimizacija prednalaganja Blazor WASM s preprostim HTML-jem

Skripti v prejšnjih primerih so zasnovani tako, da premostijo vrzel med lahko prijavno stranjo HTML, ki se hitro nalaga, in aplikacijo Blazor WASM, ki zahteva več virov. Prvi skript zagotavlja, da so Blazorjevi sestavi WebAssembly prednaloženi asinhrono med življenjskim ciklom prijavne strani. To izboljša uporabniško izkušnjo, saj omogoča, da se glavna aplikacija naloži skoraj takoj po preverjanju pristnosti. Na primer, pridobivanje datoteke `blazor.boot.json` je kritičen korak, saj vsebuje vse metapodatke in vire, potrebne za zagon aplikacije Blazor. Na ta način uporabniki po predložitvi poverilnic za prijavo nimajo zamud. 🌐

Drugi ključni del sprednjega skripta je uporaba JavaScript promises za obravnavanje več asinhronih nalog hkrati. Medtem ko se sklopi pridobivajo, je funkcija prijave v celoti delujoča. To zagotavlja, da je aplikacija odzivna tudi med izvajanjem opravil v ozadju. Odličen primer je, kako metoda `Promise.all()` združuje postopke prenosa sklopov, zaradi česar je učinkovita in varna pred napakami. Ta pristop zmanjša morebitne točke napak med prednalaganjem in zmanjša tveganje, da bi uporabniki naleteli na pokvarjeno ali nepopolno nalaganje aplikacije.

Na zadnji strani se ASP.NET API uporablja za varno preverjanje pristnosti uporabnikov in vrnitev spletnega žetona JSON (JWT). Ta žeton ne le potrdi uporabniško sejo, temveč tudi omogoči, da aplikacija Blazor po prijavi deluje v varnem okolju. Uporaba `JwtSecurityTokenHandler` v strežniški kodi zagotavlja, da so žetoni ustvarjeni po industrijskih standardnih metodah šifriranja, kar povečuje varnost. Na primer, uporabnik, ki se prijavi z veljavnimi poverilnicami, prejme podpisan JWT, ki se lahko shrani v lokalni pomnilnik brskalnika za nadaljnje zahteve. 🔒

Z vključitvijo teh skriptov dosežete gladek in uporabniku prijazen potek dela. Ko se prijavna stran naloži, skript za prednalaganje začne prenašati datoteke Blazor. Ko uporabnik klikne »Prijava« in je overjen, se aplikacija Blazor inicializira le, če so sklopi pripravljeni. V nasprotnem primeru aplikacija počaka, da se prenos konča, preden se zažene. Ta pristop ne le optimizira zmogljivost, ampak zagotavlja tudi brezhibno izkušnjo. Razvijalec bi lahko to nastavitev primerjal z "dvomotornim" avtomobilom, kjer se en motor uporablja za osnovne naloge, drugi pa za dvigovanje težkih predmetov. To ravnovesje zagotavlja, da tako razvijalci kot uporabniki uživajo v boljši in bolj odzivni aplikaciji.

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

Poenostavitev nalaganja Blazor WASM za strani za prijavo

Eden pogosto spregledanih vidikov optimizacije aplikacije Blazor WebAssembly je izkoriščanje mehanizmov predpomnjenja brskalnika. Pri prednalaganju sklopov se lahko ti viri shranijo lokalno v predpomnilnik brskalnika za naslednje obiske, kar znatno skrajša čas nalaganja. Z uporabo glave `Cache-Control` na strani strežnika lahko razvijalci zagotovijo, da so statični viri, kot so sklopi, pravilno predpomnjeni. Na primer, lahko nastavite `max-age=31536000` za predpomnilnik sklopov za eno leto, kar je idealno za vire, ki se redko spreminjajo. Ta pristop brezhibno deluje z mehanizmom prednalaganja, kar povečuje tako hitrost kot zanesljivost. 🚀

Drug premislek je, kako Blazor upravlja posodobitve aplikacije. Uporaba vnaprej naložene strani za prijavo pomeni, da je treba s posodobitvami sklopov skrbno ravnati, da preprečite uporabo zastarelih datotek. To lahko odpravite z implementacijo sistema za preverjanje različic znotraj vaše logike pridobivanja blazor.boot.json. Z dodajanjem zgoščene vrednosti različice URL-jem sklopa zagotovite, da brskalnik pridobi posodobljene vire vsakič, ko je aplikacija znova nameščena. Na primer, dodajanje časovnega žiga ali zgoščene vrednosti Git commit zagotovi, da uporabniki vedno dobijo najnovejšo različico aplikacije, hkrati pa se izognejo nepotrebnim prenosom. 🌐

Nazadnje je ključnega pomena optimizacija uporabniške izkušnje med prenosi sklopov. Vključitev vizualnega indikatorja napredka ali animacije "nalaganja" na stran za prijavo lahko uporabnikom zagotovi povratne informacije, da se nekaj dogaja v ozadju. To zmanjša razočaranje uporabnikov in naredi izkušnjo bolj interaktivno. S kombiniranjem tehnik, kot so predpomnjenje, preverjanje različic in vizualni znaki, lahko razvijalci zagotovijo bolj gladko in bolj profesionalno uvedbo aplikacije Blazor WASM.