ایک سادہ HTML لاگ ان پیج پر بلیزر WASM اسمبلیوں کو پہلے سے لوڈ کرنا

سیملیس لاگ ان انٹیگریشن کے ساتھ Blazor WASM کو بڑھانا

ایک ایسی ویب ایپ کھولنے کا تصور کریں جہاں لاگ ان صفحہ بجلی سے تیز، ہلکا پھلکا اور سادہ ہو، لیکن پھر بھی ایک مکمل خصوصیات والی Blazor WASM ایپلیکیشن کی طرف لے جاتا ہے۔ 🚀 اس قسم کا سیٹ اپ Blazor جیسے جدید فریم ورک کو HTML اور JavaScript کی لازوال سادگی کے ساتھ جوڑتا ہے۔ لیکن کیا آپ Blazor کی بھاری WASM اسمبلیوں کو پہلے سے لوڈ کر سکتے ہیں جب کہ آپ کا صارف ابھی بھی اپنے اسناد میں ٹائپ کر رہا ہے؟

ڈویلپرز کو اکثر صارف کے تجربے کو بہتر بنانے کے چیلنج کا سامنا کرنا پڑتا ہے، خاص طور پر ابتدائی لوڈنگ کے مرحلے کے دوران۔ ایک سادہ HTML لاگ ان صفحہ فوری رسائی کی اجازت دیتا ہے، لیکن اسے Blazor کے ساتھ ضم کرنے سے پیچیدگیاں متعارف ہوتی ہیں۔ بہت سے لوگ حیران ہیں کہ کیا وہ بلیزر ایپ کو "جانے کے لیے تیار" بنا سکتے ہیں جب کہ لاگ ان صفحہ ابھی بھی فعال ہے۔ یہ بالکل وہی ہے جہاں یہ موضوع دلچسپ بن جاتا ہے۔

لاگ ان پیج کے لائف سائیکل کے دوران Blazor WASM اسمبلیوں کو ڈاؤن لوڈ کرنے کے لیے غیر مطابقت پذیر آپریشنز کا فائدہ اٹھانا ہے۔ جب تک صارف لاگ ان ہوتا ہے، ایپلیکیشن پہلے سے لوڈ ہو چکی ہوتی ہے اور تقریباً فوری طور پر شروع ہو سکتی ہے۔ یہ نقطہ نظر نہ صرف سمجھی جانے والی کارکردگی کو بہتر بناتا ہے بلکہ صارف دوست ڈیزائن کو بھی برقرار رکھتا ہے۔ 🌟

اس مضمون میں، ہم دریافت کریں گے کہ آیا یہ سیٹ اپ قابل عمل ہے، اس کے ممکنہ نقصانات پر بات کریں گے، اور اسے حاصل کرنے کے لیے عملی اقدامات پیش کریں گے۔ آخر تک، آپ کو معلوم ہو جائے گا کہ سادہ HTML لاگ ان صفحات کو کس طرح جدید Blazor WASM ایپس کے ساتھ ایک ہموار صارف کے تجربے کے لیے پلایا جائے۔

سادہ ایچ ٹی ایم ایل کے ساتھ بلیزر WASM پری لوڈنگ کو بہتر بنانا

اس سے پہلے کی مثالوں میں فراہم کردہ اسکرپٹس کو ہلکا پھلکا، تیزی سے لوڈ کرنے والے HTML لاگ ان پیج اور زیادہ وسائل سے بھرپور Blazor WASM ایپلیکیشن کے درمیان فرق کو ختم کرنے کے لیے ڈیزائن کیا گیا ہے۔ پہلا اسکرپٹ یقینی بناتا ہے کہ Blazor کی WebAssembly اسمبلیاں لاگ ان پیج لائف سائیکل کے دوران متضاد طور پر پہلے سے لوڈ کی گئی ہیں۔ یہ مرکزی ایپ کو تصدیق کے بعد تقریباً فوری طور پر لوڈ ہونے کی اجازت دے کر صارف کے تجربے کو بہتر بناتا ہے۔ مثال کے طور پر، `blazor.boot.json` فائل کو بازیافت کرنا ایک اہم مرحلہ ہے، کیونکہ اس میں Blazor ایپ کو بوٹسٹریپ کرنے کے لیے درکار تمام میٹا ڈیٹا اور وسائل شامل ہیں۔ اس طرح، صارفین کو لاگ ان کی اسناد جمع کرانے کے بعد تاخیر کا سامنا نہیں کرنا پڑتا۔ 🌐

فرنٹ اینڈ اسکرپٹ کا ایک اور اہم حصہ جاوا اسکرپٹ وعدوں کا استعمال ہے تاکہ بیک وقت متعدد غیر مطابقت پذیر کاموں کو ہینڈل کیا جاسکے۔ جب اسمبلیاں حاصل کی جا رہی ہیں، لاگ ان کی فعالیت مکمل طور پر کام کر رہی ہے۔ یہ اس بات کو یقینی بناتا ہے کہ پس منظر کے کام انجام دیتے ہوئے بھی ایپ ریسپانسیو ہے۔ ایک عمدہ مثال یہ ہے کہ کس طرح `Promise.all()` طریقہ اسمبلی ڈاؤن لوڈ کے عمل کو مستحکم کرتا ہے، اسے موثر اور ناکامی سے محفوظ بناتا ہے۔ یہ نقطہ نظر پری لوڈنگ کے دوران ناکامی کے ممکنہ پوائنٹس کو کم کرتا ہے، صارفین کے ٹوٹے ہوئے یا نامکمل ایپ لوڈز کا سامنا کرنے کے خطرے کو کم کرتا ہے۔

پچھلے حصے میں، ASP.NET API کا استعمال صارفین کو محفوظ طریقے سے تصدیق کرنے اور JSON ویب ٹوکن (JWT) واپس کرنے کے لیے کیا جاتا ہے۔ یہ ٹوکن نہ صرف صارف کے سیشن کی توثیق کرتا ہے بلکہ Blazor ایپ کو لاگ ان کے بعد ایک محفوظ ماحول میں کام کرنے کے قابل بھی بناتا ہے۔ سرور کوڈ میں 'JwtSecurityTokenHandler' کا استعمال اس بات کو یقینی بناتا ہے کہ ٹوکن انڈسٹری کے معیاری انکرپشن طریقوں کے بعد بنائے جائیں، جس سے سیکیورٹی میں اضافہ ہو۔ مثال کے طور پر، درست اسناد کے ساتھ لاگ ان کرنے والے صارف کو دستخط شدہ JWT ملتا ہے، جسے بعد میں آنے والی درخواستوں کے لیے براؤزر کے مقامی اسٹوریج میں محفوظ کیا جا سکتا ہے۔ 🔒

ان اسکرپٹس کو شامل کرنے سے ہموار، صارف دوست ورک فلو حاصل ہوتا ہے۔ لاگ ان صفحہ لوڈ ہونے پر، پری لوڈنگ اسکرپٹ بلیزر فائلوں کو ڈاؤن لوڈ کرنا شروع کر دیتی ہے۔ ایک بار جب صارف "لاگ ان" پر کلک کرتا ہے اور اس کی تصدیق ہو جاتی ہے، Blazor ایپ صرف اس صورت میں شروع کی جاتی ہے جب اسمبلیاں تیار ہوں۔ بصورت دیگر، ایپ لانچ ہونے سے پہلے ڈاؤن لوڈ مکمل ہونے کا انتظار کرتی ہے۔ یہ نقطہ نظر نہ صرف کارکردگی کو بہتر بناتا ہے بلکہ ایک ہموار تجربہ بھی فراہم کرتا ہے۔ ایک ڈویلپر اس سیٹ اپ کا موازنہ "ڈبل انجن" کار سے کر سکتا ہے، جہاں ایک انجن بنیادی کاموں کے لیے اور دوسرا بھاری اٹھانے کے لیے استعمال ہوتا ہے۔ یہ توازن اس بات کو یقینی بناتا ہے کہ ڈویلپرز اور صارفین دونوں ایک بہتر، زیادہ ذمہ دار ایپلیکیشن سے لطف اندوز ہوں۔

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

لاگ ان صفحات کے لیے سٹریم لائننگ بلیزر WASM لوڈ ہو رہا ہے۔

Blazor WebAssembly ایپلیکیشن کو بہتر بنانے کا ایک اکثر نظر انداز ہونے والا پہلو براؤزر کے کیشنگ میکانزم کا فائدہ اٹھا رہا ہے۔ اسمبلیوں کو پہلے سے لوڈ کرتے وقت، ان وسائل کو مقامی طور پر براؤزر کیش میں بعد کے دوروں کے لیے ذخیرہ کیا جا سکتا ہے، جس سے لوڈ کے اوقات میں نمایاں کمی واقع ہوتی ہے۔ سرور سائیڈ پر 'Cache-Control' ہیڈر کا استعمال کرتے ہوئے، ڈویلپرز اس بات کو یقینی بنا سکتے ہیں کہ جامد وسائل جیسے اسمبلیوں کو مناسب طریقے سے کیش کیا گیا ہے۔ مثال کے طور پر، آپ `max-age=31536000` کو ایک سال کے لیے کیش اسمبلیوں کے لیے سیٹ کر سکتے ہیں، جو ان وسائل کے لیے مثالی ہے جو شاذ و نادر ہی تبدیل ہوتے ہیں۔ یہ نقطہ نظر بغیر کسی رکاوٹ کے پری لوڈنگ میکانزم کے ساتھ کام کرتا ہے، رفتار اور وشوسنییتا دونوں کو بڑھاتا ہے۔ 🚀

ایک اور غور یہ ہے کہ بلیزر ایپلی کیشن میں اپ ڈیٹس کا انتظام کیسے کرتا ہے۔ پہلے سے لوڈ شدہ لاگ ان صفحہ کا استعمال کرنے کا مطلب ہے کہ اسمبلی اپ ڈیٹس کو احتیاط سے سنبھالا جانا چاہیے تاکہ باسی فائلوں کو استعمال ہونے سے روکا جا سکے۔ آپ کی `blazor.boot.json` fetch logic کے اندر ورژن چیک سسٹم کو لاگو کرنا اس کا ازالہ کر سکتا ہے۔ اسمبلی یو آر ایل میں ایک ورژن ہیش شامل کرکے، آپ اس بات کو یقینی بناتے ہیں کہ جب بھی ایپ کو دوبارہ تعینات کیا جاتا ہے تو براؤزر اپ ڈیٹ کردہ وسائل حاصل کرتا ہے۔ مثال کے طور پر، ٹائم اسٹیمپ یا گٹ کمٹ ہیش شامل کرنا اس بات کو یقینی بناتا ہے کہ غیر ضروری ڈاؤن لوڈز سے گریز کرتے ہوئے صارفین ہمیشہ ایپ کا تازہ ترین ورژن حاصل کریں۔ 🌐

آخر میں، اسمبلی ڈاؤن لوڈ کے دوران صارف کے تجربے کو بہتر بنانا اہم ہے۔ لاگ ان صفحہ پر بصری پیش رفت کے اشارے یا "لوڈنگ" اینیمیشن کو شامل کرنے سے صارفین کو یہ تاثر مل سکتا ہے کہ پس منظر میں کچھ ہو رہا ہے۔ یہ صارف کی مایوسی کو کم کرتا ہے اور تجربے کو زیادہ انٹرایکٹو بناتا ہے۔ کیشنگ، ورژن چیک، اور بصری اشارے جیسی تکنیکوں کو ملا کر، ڈویلپرز ہموار اور زیادہ پیشہ ورانہ Blazor WASM ایپلیکیشن کی تعیناتی کو یقینی بنا سکتے ہیں۔