التحميل المسبق لتجميعات Blazor WASM على صفحة تسجيل دخول HTML عادية

تعزيز Blazor WASM من خلال التكامل السلس لتسجيل الدخول

تخيل فتح تطبيق ويب حيث تكون صفحة تسجيل الدخول سريعة للغاية وخفيفة الوزن وبسيطة، ولكنها لا تزال تؤدي إلى تطبيق Blazor WASM كامل الميزات. 🚀 يجمع هذا النوع من الإعداد بين أطر العمل الحديثة مثل Blazor والبساطة الخالدة لـ HTML وJavaScript. ولكن هل يمكنك التحميل المسبق لمجموعات WASM الثقيلة الخاصة بـ Blazor بينما لا يزال المستخدم الخاص بك يكتب بيانات الاعتماد الخاصة به؟

غالبًا ما يواجه المطورون التحدي المتمثل في تحسين تجربة المستخدم، خاصة أثناء مرحلة التحميل الأولية. تسمح صفحة تسجيل الدخول بتنسيق HTML البسيطة بالوصول السريع، ولكن دمجها مع Blazor يؤدي إلى تعقيدات. يتساءل الكثيرون عما إذا كان بإمكانهم جعل تطبيق Blazor "جاهزًا للاستخدام" بينما لا تزال صفحة تسجيل الدخول نشطة. هذا هو بالضبط المكان الذي يصبح فيه هذا الموضوع مثيرًا للاهتمام.

تتمثل الفكرة في الاستفادة من العمليات غير المتزامنة لتنزيل مجموعات Blazor WASM أثناء دورة حياة صفحة تسجيل الدخول. بحلول الوقت الذي يقوم فيه المستخدم بتسجيل الدخول، يكون التطبيق قد تم تحميله مسبقًا ويمكن أن يبدأ على الفور تقريبًا. لا يعمل هذا الأسلوب على تحسين الأداء الملموس فحسب، بل يحافظ أيضًا على تصميم سهل الاستخدام. 🌟

في هذه المقالة، سنستكشف ما إذا كان هذا الإعداد ممكنًا، ونناقش مخاطره المحتملة، ونقدم خطوات عملية لتحقيقه. في النهاية، ستعرف كيفية ربط صفحات تسجيل الدخول بتنسيق HTML العادي بتطبيقات Blazor WASM المتقدمة للحصول على تجربة مستخدم سلسة.

تحسين التحميل المسبق لـ Blazor WASM باستخدام HTML البسيط

تم تصميم البرامج النصية المقدمة في الأمثلة السابقة لسد الفجوة بين صفحة تسجيل دخول HTML خفيفة الوزن وسريعة التحميل وتطبيق Blazor WASM الأكثر استهلاكًا للموارد. يضمن النص الأول أن تجميعات WebAssembly الخاصة بـ Blazor تم تحميلها مسبقًا بشكل غير متزامن أثناء دورة حياة صفحة تسجيل الدخول. يؤدي ذلك إلى تحسين تجربة المستخدم من خلال السماح بتحميل التطبيق الرئيسي على الفور تقريبًا بعد المصادقة. على سبيل المثال، يعد جلب الملف `blazor.boot.json` خطوة حاسمة، لأنه يحتوي على جميع البيانات الوصفية والموارد المطلوبة لتشغيل تطبيق Blazor. بهذه الطريقة، لا يواجه المستخدمون أي تأخير بعد إرسال بيانات اعتماد تسجيل الدخول الخاصة بهم. 🌐

جزء رئيسي آخر من البرنامج النصي للواجهة الأمامية هو استخدام وعود JavaScript للتعامل مع مهام متعددة غير متزامنة في وقت واحد. أثناء جلب التجميعات، تكون وظيفة تسجيل الدخول جاهزة للعمل بشكل كامل. وهذا يضمن استجابة التطبيق حتى أثناء أداء مهام الخلفية. من الأمثلة الرائعة على ذلك كيف تقوم الطريقة `Promise.all()` بدمج عمليات تنزيل التجميع، مما يجعلها فعالة وآمنة من الفشل. يقلل هذا الأسلوب من نقاط الفشل المحتملة أثناء التحميل المسبق، مما يقلل من خطر مواجهة المستخدمين لعمليات تحميل تطبيقات معطلة أو غير مكتملة.

على الجانب الخلفي، يتم استخدام ASP.NET API لمصادقة المستخدمين بشكل آمن وإرجاع JSON Web Token (JWT). لا يتحقق هذا الرمز المميز من صحة جلسة المستخدم فحسب، بل يمكّن أيضًا تطبيق Blazor من العمل في بيئة آمنة بعد تسجيل الدخول. يضمن استخدام "JwtSecurityTokenHandler" في كود الخادم إنشاء الرموز المميزة باتباع طرق التشفير القياسية في الصناعة، مما يعزز الأمان. على سبيل المثال، يتلقى المستخدم الذي يقوم بتسجيل الدخول باستخدام بيانات اعتماد صالحة JWT موقعة، والتي يمكن تخزينها في وحدة التخزين المحلية للمتصفح للطلبات اللاحقة. 🔒

يؤدي دمج هذه البرامج النصية إلى تحقيق سير عمل سلس وسهل الاستخدام. عند تحميل صفحة تسجيل الدخول، يبدأ البرنامج النصي للتحميل المسبق في تنزيل ملفات Blazor. بمجرد أن ينقر المستخدم على "تسجيل الدخول" ويتم المصادقة عليه، تتم تهيئة تطبيق 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; }
}

تبسيط تحميل Blazor WASM لصفحات تسجيل الدخول

أحد الجوانب التي يتم التغاضي عنها غالبًا لتحسين تطبيق Blazor WebAssembly هو الاستفادة من آليات التخزين المؤقت للمتصفح. عند التحميل المسبق للتجميعات، يمكن تخزين هذه الموارد محليًا في ذاكرة التخزين المؤقت للمتصفح للزيارات اللاحقة، مما يقلل بشكل كبير من أوقات التحميل. باستخدام رأس "Cache-Control" الموجود على جانب الخادم، يمكن للمطورين التأكد من تخزين الموارد الثابتة مثل التجميعات مؤقتًا بشكل صحيح. على سبيل المثال، يمكنك تعيين `max-age=31536000` للتخزين المؤقت للتجميعات لمدة عام، وهو أمر مثالي للموارد التي نادرًا ما تتغير. يعمل هذا الأسلوب بسلاسة مع آلية التحميل المسبق، مما يعزز السرعة والموثوقية. 🚀

هناك اعتبار آخر وهو كيفية إدارة Blazor لتحديثات التطبيق. إن استخدام صفحة تسجيل الدخول المحملة مسبقًا يعني أنه يجب التعامل مع تحديثات التجميع بعناية لمنع استخدام الملفات القديمة. يمكن أن يؤدي تطبيق نظام التحقق من الإصدار ضمن منطق الجلب `blazor.boot.json` إلى معالجة هذه المشكلة. من خلال إضافة تجزئة الإصدار إلى عناوين URL للتجميع، فإنك تتأكد من أن المتصفح يجلب الموارد المحدثة كلما تمت إعادة نشر التطبيق. على سبيل المثال، تضمن إضافة طابع زمني أو تجزئة التزام Git حصول المستخدمين دائمًا على أحدث إصدار من التطبيق مع تجنب التنزيلات غير الضرورية. 🌐

وأخيرًا، يعد تحسين تجربة المستخدم أثناء تنزيلات التجميع أمرًا بالغ الأهمية. يمكن أن يؤدي دمج مؤشر التقدم المرئي أو الرسوم المتحركة "للتحميل" في صفحة تسجيل الدخول إلى تقديم تعليقات للمستخدمين حول حدوث شيء ما في الخلفية. وهذا يقلل من إحباط المستخدم ويجعل التجربة أكثر تفاعلية. من خلال الجمع بين تقنيات مثل التخزين المؤقت والتحقق من الإصدار والإشارات المرئية، يمكن للمطورين ضمان نشر تطبيق Blazor WASM بشكل أكثر سلاسة واحترافية.