Blazor WASM-i komplektide eellaadimine tavalisele HTML-i sisselogimislehele

Blazor WASM-i täiustamine sujuva sisselogimise integreerimisega

Kujutage ette, et avate veebirakenduse, mille sisselogimisleht on välkkiire, kerge ja lihtne, kuid viib siiski täisfunktsionaalsusega Blazor WASM-i rakenduseni. 🚀 Selline seadistus ühendab kaasaegsed raamistikud, nagu Blazor, HTML-i ja JavaScripti ajatu lihtsusega. Kuid kas saate Blazori raskeid WASM-kooste eellaadida, kui kasutaja alles kirjutab oma mandaate?

Arendajad seisavad sageli silmitsi kasutajakogemuse optimeerimise väljakutsega, eriti alglaadimise etapis. Lihtne HTML-i sisselogimisleht võimaldab kiiret juurdepääsu, kuid selle integreerimine Blazoriga toob kaasa keerukuse. Paljud mõtlevad, kas nad suudavad Blazori rakenduse "töövalmis" teha, kui sisselogimisleht on veel aktiivne. Just siin muutub see teema intrigeerivaks.

Idee on kasutada asünkroonseid toiminguid Blazor WASM-i koostude allalaadimiseks sisselogimislehe elutsükli jooksul. Selleks ajaks, kui kasutaja sisse logib, on rakendus juba eellaaditud ja saab käivituda peaaegu kohe. See lähenemisviis mitte ainult ei paranda tajutavat jõudlust, vaid säilitab ka kasutajasõbraliku disaini. 🌟

Selles artiklis uurime, kas see seadistus on teostatav, arutame selle võimalikke lõkse ja pakume praktilisi samme selle saavutamiseks. Lõpuks saate teada, kuidas lihtsaid HTML-i sisselogimislehti täiustatud Blazor WASM-rakendustega ühendada, et kasutajakogemus oleks sujuv.

Blazor WASM-i eellaadimise optimeerimine lihtsa HTML-iga

Varasemates näidetes toodud skriptid on loodud selleks, et ületada lõhet kerge ja kiiresti laaditava HTML-i sisselogimislehe ja ressursimahukama Blazor WASM-rakenduse vahel. Esimene skript tagab, et Blazori WebAssembly komplektid eellaaditakse sisselogimislehe elutsükli jooksul asünkroonselt. See parandab kasutajakogemust, võimaldades põhirakendusel pärast autentimist peaaegu kohe laadida. Näiteks faili „blazor.boot.json” toomine on kriitiline samm, kuna see sisaldab kõiki Blazori rakenduse alglaadimiseks vajalikke metaandmeid ja ressursse. Nii ei teki kasutajatel pärast sisselogimismandaatide esitamist viivitusi. 🌐

Teine esiotsa skripti oluline osa on JavaScripti lubaduste kasutamine mitme asünkroonse ülesande samaaegseks käsitlemiseks. Koosluste toomise ajal töötab sisselogimisfunktsioon täielikult. See tagab, et rakendus reageerib ka taustaülesannete täitmisel. Suurepärane näide on see, kuidas meetod "Promise.all()" koondab koostu allalaadimise protsessid, muutes selle tõhusaks ja tõrkekindlaks. See lähenemine minimeerib võimalikud tõrkepunktid eellaadimise ajal, vähendades ohtu, et kasutajad puutuvad kokku katkiste või mittetäielike rakenduste laadimisega.

Tagaküljel kasutatakse kasutajate turvaliseks autentimiseks ja JSON-i veebimärgi (JWT) tagastamiseks ASP.NET API-t. See tunnus mitte ainult ei kinnita kasutaja seanssi, vaid võimaldab ka Blazori rakendusel pärast sisselogimist turvalises keskkonnas töötada. JwtSecurityTokenHandleri kasutamine serveri koodis tagab, et žetoonid luuakse tööstusharu standarditele vastavate krüpteerimismeetodite järgi, mis suurendab turvalisust. Näiteks kasutaja, kes logib sisse kehtivate mandaatidega, saab allkirjastatud JWT, mille saab salvestada brauseri kohalikku salvestusruumi järgmiste päringute jaoks. 🔒

Nende skriptide kaasamine tagab sujuva ja kasutajasõbraliku töövoo. Kui sisselogimisleht on laaditud, alustab eellaadimisskript Blazori failide allalaadimist. Kui kasutaja klõpsab "Logi sisse" ja on autentitud, lähtestatakse rakendus Blazor ainult siis, kui koostud on valmis. Vastasel juhul ootab rakendus enne käivitamist allalaadimise lõpetamist. See lähenemisviis mitte ainult ei optimeeri jõudlust, vaid pakub ka sujuvat kogemust. Arendaja võiks seda seadistust võrrelda "kahe mootoriga" autoga, kus ühte mootorit kasutatakse põhiülesannete täitmiseks ja teist raskete tõstmiseks. See tasakaal tagab, et nii arendajad kui ka kasutajad naudivad paremat ja reageerivamat rakendust.

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

Blazor WASM-i sujuvamaks muutmine sisselogimislehtede jaoks

Üks sageli tähelepanuta jäetud aspekt Blazor WebAssembly rakenduse optimeerimisel on brauseri vahemällu salvestamise mehhanismide võimendamine. Koostude eellaadimisel saab neid ressursse järgmisteks külastusteks lokaalselt brauseri vahemällu salvestada, mis vähendab oluliselt laadimisaega. Kasutades serveri poolel päist "Cache-Control", saavad arendajad tagada, et staatilised ressursid, nagu sõlmed, salvestatakse korralikult vahemällu. Näiteks võite määrata aastaks vahemällu kooste vahemällu väärtuse „max-age=31536000”, mis sobib ideaalselt harva muutuvate ressursside jaoks. See lähenemine töötab sujuvalt eellaadimismehhanismiga, suurendades nii kiirust kui ka töökindlust. 🚀

Teine kaalutlus on see, kuidas Blazor rakenduse värskendusi haldab. Eellaaditud sisselogimislehe kasutamine tähendab, et koostu värskendusi tuleb hoolikalt käsitleda, et vältida aegunud failide kasutamist. Versioonikontrollisüsteemi rakendamine 'blazor.boot.json' laadimisloogikas võib selle probleemi lahendada. Kooste URL-idele versiooniräsi lisamisega tagate, et brauser toob värskendatud ressursse alati, kui rakendust ümber paigutatakse. Näiteks ajatempli või Git Commit räsi lisamine tagab, et kasutajad saavad alati rakenduse uusima versiooni, vältides samas tarbetuid allalaadimisi. 🌐

Lõpuks on kriitilise tähtsusega kasutajakogemuse optimeerimine kooste allalaadimise ajal. Visuaalse edenemise indikaatori või "laadimisanimatsiooni" lisamine sisselogimislehele võib anda kasutajatele tagasisidet, et taustal midagi toimub. See vähendab kasutajate frustratsiooni ja muudab kasutuskogemuse interaktiivsemaks. Kombineerides selliseid tehnikaid nagu vahemällu salvestamine, versioonikontroll ja visuaalsed näpunäited, saavad arendajad tagada Blazor WASM-i rakenduse sujuvama ja professionaalsema juurutamise.