Pramuat Blazor WASM Assemblies pada Halaman Log Masuk HTML Biasa

Mempertingkatkan Blazor WASM dengan Integrasi Log Masuk Lancar

Bayangkan membuka apl web di mana halaman log masuk adalah sepantas kilat, ringan dan ringkas, tetapi masih membawa kepada aplikasi Blazor WASM berciri penuh. 🚀 Persediaan jenis ini menggabungkan rangka kerja moden seperti Blazor dengan kesederhanaan HTML dan JavaScript yang abadi. Tetapi bolehkah anda pramuat pemasangan WASM berat Blazor semasa pengguna anda masih menaip bukti kelayakan mereka?

Pembangun sering menghadapi cabaran untuk mengoptimumkan pengalaman pengguna, terutamanya semasa fasa pemuatan awal. Halaman log masuk HTML biasa membolehkan akses pantas, tetapi mengintegrasikannya dengan Blazor memperkenalkan kerumitan. Ramai yang tertanya-tanya sama ada mereka boleh menjadikan aplikasi Blazor "bersedia untuk digunakan" semasa halaman log masuk masih aktif. Di sinilah topik ini menjadi menarik.

Ideanya adalah untuk memanfaatkan operasi tak segerak untuk memuat turun pemasangan Blazor WASM semasa kitaran hayat halaman log masuk. Pada masa pengguna log masuk, aplikasi sudah dipramuat dan boleh bermula hampir serta-merta. Pendekatan ini bukan sahaja meningkatkan prestasi yang dirasakan tetapi juga mengekalkan reka bentuk yang mesra pengguna. 🌟

Dalam artikel ini, kami akan meneroka sama ada persediaan ini boleh dilaksanakan, membincangkan potensi perangkapnya dan menawarkan langkah praktikal untuk mencapainya. Pada akhirnya, anda akan tahu cara merapatkan halaman log masuk HTML biasa dengan aplikasi Blazor WASM lanjutan untuk pengalaman pengguna yang lancar.

Mengoptimumkan Pramuat Blazor WASM dengan HTML Mudah

Skrip yang disediakan dalam contoh terdahulu direka untuk merapatkan jurang antara halaman log masuk HTML yang ringan dan dimuatkan dengan pantas dan aplikasi Blazor WASM yang lebih intensif sumber. Skrip pertama memastikan bahawa Perhimpunan WebAssembly Blazor dipramuat secara tidak segerak semasa kitaran hayat halaman log masuk. Ini meningkatkan pengalaman pengguna dengan membenarkan apl utama dimuatkan hampir serta-merta selepas pengesahan. Sebagai contoh, mengambil fail `blazor.boot.json` ialah langkah kritikal, kerana ia mengandungi semua metadata dan sumber yang diperlukan untuk bootstrap apl Blazor. Dengan cara ini, pengguna tidak mengalami kelewatan selepas menyerahkan bukti kelayakan log masuk mereka. 🌐

Satu lagi bahagian penting skrip bahagian hadapan ialah penggunaan JavaScript promises untuk mengendalikan berbilang tugas tak segerak secara serentak. Semasa perhimpunan sedang diambil, fungsi log masuk beroperasi sepenuhnya. Ini memastikan bahawa apl responsif walaupun semasa menjalankan tugas latar belakang. Contoh yang bagus ialah cara kaedah `Promise.all()` menggabungkan proses muat turun pemasangan, menjadikannya cekap dan selamat gagal. Pendekatan ini meminimumkan kemungkinan titik kegagalan semasa pramuat, mengurangkan risiko pengguna menghadapi beban apl yang rosak atau tidak lengkap.

Di bahagian belakang, ASP.NET API digunakan untuk mengesahkan pengguna dengan selamat dan mengembalikan JSON Web Token (JWT). Token ini bukan sahaja mengesahkan sesi pengguna tetapi juga membolehkan apl Blazor berfungsi dalam persekitaran yang selamat selepas log masuk. Penggunaan `JwtSecurityTokenHandler` dalam kod pelayan memastikan token dijana mengikut kaedah penyulitan standard industri, meningkatkan keselamatan. Sebagai contoh, pengguna log masuk dengan bukti kelayakan yang sah menerima JWT yang ditandatangani, yang boleh disimpan dalam storan setempat penyemak imbas untuk permintaan seterusnya. 🔒

Menggabungkan skrip ini mencapai aliran kerja yang lancar dan mesra pengguna. Apabila halaman log masuk dimuatkan, skrip pramuat mula memuat turun fail Blazor. Setelah pengguna mengklik "Log Masuk" dan disahkan, apl Blazor dimulakan hanya jika pemasangan sudah sedia. Jika tidak, apl menunggu muat turun selesai sebelum dilancarkan. Pendekatan ini bukan sahaja mengoptimumkan prestasi tetapi juga memberikan pengalaman yang lancar. Pembangun boleh membandingkan persediaan ini dengan kereta "dwi-enjin", di mana satu enjin digunakan untuk tugas asas dan yang kedua untuk mengangkat berat. Keseimbangan ini memastikan kedua-dua pembangun dan pengguna menikmati aplikasi yang lebih baik dan lebih responsif.

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

Memperkemas Pemuatan Blazor WASM untuk Halaman Log Masuk

Satu aspek yang sering diabaikan dalam mengoptimumkan aplikasi Blazor WebAssembly ialah memanfaatkan mekanisme caching penyemak imbas. Apabila pramuat perhimpunan, sumber ini boleh disimpan secara setempat dalam cache penyemak imbas untuk lawatan seterusnya, dengan ketara mengurangkan masa muat. Dengan menggunakan pengepala `Cache-Control` pada bahagian pelayan, pembangun boleh memastikan sumber statik seperti himpunan dicache dengan betul. Sebagai contoh, anda mungkin menetapkan `max-age=31536000` kepada himpunan cache selama setahun, yang sesuai untuk sumber yang jarang berubah. Pendekatan ini berfungsi dengan lancar dengan mekanisme pramuat, meningkatkan kedua-dua kelajuan dan kebolehpercayaan. 🚀

Pertimbangan lain ialah cara Blazor menguruskan kemas kini pada aplikasi. Menggunakan halaman log masuk pramuat bermakna kemas kini pemasangan mesti dikendalikan dengan teliti untuk mengelakkan fail lapuk daripada digunakan. Melaksanakan sistem semakan versi dalam logik pengambilan `blazor.boot.json` anda boleh menangani perkara ini. Dengan menambahkan cincang versi pada URL pemasangan, anda memastikan penyemak imbas mengambil sumber yang dikemas kini apabila apl itu diatur semula. Sebagai contoh, menambah cap masa atau cincang komit Git memastikan pengguna sentiasa mendapat versi terkini apl sambil mengelakkan muat turun yang tidak perlu. 🌐

Akhir sekali, mengoptimumkan pengalaman pengguna semasa muat turun pemasangan adalah penting. Menggabungkan penunjuk kemajuan visual atau animasi "memuatkan" pada halaman log masuk boleh memberikan maklum balas kepada pengguna bahawa sesuatu sedang berlaku di latar belakang. Ini mengurangkan kekecewaan pengguna dan menjadikan pengalaman lebih interaktif. Dengan menggabungkan teknik seperti caching, semakan versi dan isyarat visual, pembangun boleh memastikan penggunaan aplikasi Blazor WASM yang lebih lancar dan profesional.