Blazor WASM komplektu iepriekšēja ielāde vienkārša HTML pieteikšanās lapā

Blazor WASM uzlabošana ar netraucētu pieteikšanās integrāciju

Iedomājieties, ka atverat tīmekļa lietotni, kurā pieteikšanās lapa ir zibenīgi ātra, viegla un vienkārša, taču tā joprojām noved pie pilnas funkcionalitātes lietojumprogrammas Blazor WASM. 🚀 Šāda veida iestatīšana apvieno modernas sistēmas, piemēram, Blazor, ar mūžīgo HTML un JavaScript vienkāršību. Bet vai varat iepriekš ielādēt Blazor smagos WASM komplektus, kamēr lietotājs joprojām raksta savus akreditācijas datus?

Izstrādātāji bieži saskaras ar izaicinājumu optimizēt lietotāja pieredzi, jo īpaši sākotnējās ielādes fāzē. Vienkārša HTML pieteikšanās lapa nodrošina ātru piekļuvi, taču tās integrēšana ar Blazor rada sarežģījumus. Daudzi domā, vai viņi var padarīt Blazor lietotni "gatavu darbam", kamēr pieteikšanās lapa joprojām ir aktīva. Tieši šeit šī tēma kļūst intriģējoša.

Ideja ir izmantot asinhronās darbības, lai lejupielādētu Blazor WASM komplektus pieteikšanās lapas dzīves cikla laikā. Brīdī, kad lietotājs piesakās, lietojumprogramma jau ir iepriekš ielādēta un var tikt startēta gandrīz uzreiz. Šī pieeja ne tikai uzlabo uztverto veiktspēju, bet arī saglabā lietotājam draudzīgu dizainu. 🌟

Šajā rakstā mēs izpētīsim, vai šī iestatīšana ir iespējama, apspriedīsim tās iespējamās nepilnības un piedāvāsim praktiskus pasākumus, lai to sasniegtu. Beigās jūs zināt, kā savienot vienkāršas HTML pieteikšanās lapas ar uzlabotajām Blazor WASM lietotnēm, lai nodrošinātu nevainojamu lietotāja pieredzi.

Blazor WASM priekšielādes optimizēšana, izmantojot vienkāršu HTML

Iepriekšējos piemēros sniegtie skripti ir paredzēti, lai pārvarētu plaisu starp vieglu, ātri ielādējamu HTML pieteikšanās lapu un resursietilpīgāko lietojumprogrammu Blazor WASM. Pirmais skripts nodrošina, ka Blazor WebAssembly komplekti tiek iepriekš ielādēti asinhroni pieteikšanās lapas dzīves cikla laikā. Tas uzlabo lietotāja pieredzi, ļaujot galvenajai lietotnei ielādēt gandrīz uzreiz pēc autentifikācijas. Piemēram, faila "blazor.boot.json" iegūšana ir kritisks solis, jo tajā ir visi metadati un resursi, kas nepieciešami lietotnes Blazor sāknēšanai. Tādā veidā lietotāji pēc pieteikšanās akreditācijas datu iesniegšanas neaizkavēs. 🌐

Vēl viena svarīga priekšgala skripta daļa ir JavaScript solījumu izmantošana, lai vienlaikus apstrādātu vairākus asinhronus uzdevumus. Kamēr komplekti tiek ielādēti, pieteikšanās funkcionalitāte darbojas pilnībā. Tas nodrošina, ka lietotne reaģē pat fona uzdevumu izpildes laikā. Lielisks piemērs ir tas, kā metode "Promise.all()" konsolidē montāžas lejupielādes procesus, padarot to efektīvu un drošu. Šī pieeja samazina iespējamos kļūmes punktus priekšielādēšanas laikā, samazinot risku, ka lietotāji saskarsies ar bojātām vai nepilnīgām lietotņu ielādēm.

Aizmugurējā pusē ASP.NET API tiek izmantota, lai droši autentificētu lietotājus un atgrieztu JSON tīmekļa pilnvaru (JWT). Šis marķieris ne tikai apstiprina lietotāja sesiju, bet arī ļauj lietotnei Blazor darboties drošā vidē pēc pieteikšanās. JwtSecurityTokenHandler izmantošana servera kodā nodrošina, ka marķieri tiek ģenerēti, ievērojot nozares standarta šifrēšanas metodes, tādējādi uzlabojot drošību. Piemēram, lietotājs, kas piesakās ar derīgiem akreditācijas datiem, saņem parakstītu JWT, ko var saglabāt pārlūkprogrammas lokālajā krātuvē turpmākiem pieprasījumiem. 🔒

Šo skriptu iekļaušana nodrošina vienmērīgu, lietotājam draudzīgu darbplūsmu. Kad pieteikšanās lapa ir ielādēta, pirmsielādēšanas skripts sāk lejupielādēt Blazor failus. Kad lietotājs noklikšķina uz "Pieteikties" un ir autentificēts, lietotne Blazor tiek inicializēta tikai tad, ja komplekti ir gatavi. Pretējā gadījumā lietotne pirms palaišanas gaida, līdz lejupielāde tiks pabeigta. Šī pieeja ne tikai optimizē veiktspēju, bet arī nodrošina nevainojamu pieredzi. Izstrādātājs varētu salīdzināt šo iestatījumu ar "divu dzinēju" automašīnu, kur viens dzinējs tiek izmantots pamata uzdevumiem, bet otrs - smaguma celšanai. Šis līdzsvars nodrošina, ka gan izstrādātāji, gan lietotāji bauda labāku, atsaucīgāku lietojumprogrammu.

// 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 ielādes racionalizēšana pieteikšanās lapām

Viens bieži aizmirsts Blazor WebAssembly lietojumprogrammas optimizēšanas aspekts ir pārlūkprogrammas kešatmiņas mehānismu izmantošana. Iepriekš ielādējot komplektus, šos resursus var lokāli saglabāt pārlūkprogrammas kešatmiņā turpmākajiem apmeklējumiem, ievērojami samazinot ielādes laiku. Izmantojot galveni "Cache-Control" servera pusē, izstrādātāji var nodrošināt, ka statiskie resursi, piemēram, komplekti, tiek pareizi saglabāti kešatmiņā. Piemēram, varat iestatīt “max-age=31536000”, lai kešatmiņā saglabātu komplektus uz gadu, kas ir ideāli piemērots resursiem, kas reti mainās. Šī pieeja nevainojami darbojas ar priekšielādēšanas mehānismu, uzlabojot gan ātrumu, gan uzticamību. 🚀

Vēl viens apsvērums ir tas, kā Blazor pārvalda lietojumprogrammas atjauninājumus. Iepriekš ielādētas pieteikšanās lapas izmantošana nozīmē, ka montāžas atjauninājumi ir rūpīgi jāapstrādā, lai novērstu novecojušu failu izmantošanu. To var novērst, ieviešot versiju pārbaudes sistēmu 'blazor.boot.json' ieneses loģikā. Pievienojot montāžas vietrāžiem URL versijas jaucējkodu, jūs nodrošināsiet, ka pārlūkprogramma ienes atjauninātus resursus ikreiz, kad lietotne tiek atkārtoti izvietota. Piemēram, pievienojot laikspiedolu vai Git commit hash, lietotāji vienmēr saņem jaunāko lietotnes versiju, vienlaikus izvairoties no nevajadzīgas lejupielādes. 🌐

Visbeidzot, ļoti svarīgi ir optimizēt lietotāja pieredzi montāžas lejupielādes laikā. Vizuāla progresa indikatora vai “ielādēšanas” animācijas iekļaušana pieteikšanās lapā var sniegt lietotājiem atgriezenisko saiti, ka kaut kas notiek fonā. Tas samazina lietotāju neapmierinātību un padara pieredzi interaktīvāku. Apvienojot tādas metodes kā kešatmiņa, versiju pārbaudes un vizuālās norādes, izstrādātāji var nodrošināt vienmērīgāku un profesionālāku Blazor WASM lietojumprogrammu izvietošanu.