آموزش جامع ساخت Progressive Web App (PWA) با ASP.NET Core MVC

برنامه وب پیش‌رونده، PWA، مدرس بهمن آبادی، ASP.NET Core 1404/5/20
نویسنده: مدرس بهمن آبادی

آموزش جامع ساخت Progressive Web App (PWA) با ASP.NET Core MVC

مدرس بهمن آبادی

مقدمه

برنامه‌های وب پیش‌رونده (Progressive Web Apps یا PWA) وب‌اپلیکیشن‌هایی هستن که تجربه‌ای شبیه اپلیکیشن‌های بومی (Native) ارائه می‌دن، اما از طریق مرورگر اجرا می‌شن. این فناوری با ترکیب ویژگی‌های وب و اپلیکیشن‌های موبایل، امکاناتی مثل کار آفلاین، اعلان‌های push و نصب روی صفحه اصلی دستگاه رو فراهم می‌کنه. در این آموزش، به‌صورت گام‌به‌گام یاد می‌گیرید چطور یه PWA با استفاده از ASP.NET Core MVC بسازید. 

چرا PWA با ASP.NET Core MVC؟

برنامه‌های PWA مزایای زیادی دارن:

  • کار آفلاین: با استفاده از Service Worker، اپلیکیشن حتی بدون اینترنت کار می‌کنه.

  • نصب‌پذیری: کاربران می‌تونن اپلیکیشن رو روی صفحه اصلی موبایل یا دسکتاپ نصب کنن.

  • پاسخ‌گویی سریع: بارگذاری سریع حتی در شبکه‌های کند.

  • امنیت: نیاز به HTTPS برای حفظ امنیت داده‌ها.

  • اعلان‌های Push: امکان ارسال اعلان به کاربران، حتی وقتی اپلیکیشن باز نیست.

  • سازگاری: پشتیبانی از مرورگرهای مدرن مثل Chrome، Edge و Firefox (به جز Safari که محدودیت‌هایی داره).

ASP.NET Core MVC به دلیل ساختار منعطف، عملکرد بالا و پشتیبانی از NuGet پکیج‌هایی مثل WebEssentials.AspNetCore.PWA، گزینه‌ای عالی برای ساخت PWAه. دوره جامع برنامه‌نویسی وب مهندس بهمن آبادی در بخش‌های پیشرفته، ساخت PWA با ASP.NET Core رو با پشتیبانی دائمی آموزش می‌ده.

پیش‌نیازها

قبل از شروع، مطمئن بشید این موارد رو دارید:

Visual Studio 2022 یا Visual Studio Code با .NET 9 SDK.

دانش پایه C# و ASP.NET Core MVC.

یه ویرایشگر کد مثل VS Code یا Visual Studio.

اتصال HTTPS برای تست (در توسعه، localhost به‌طور خودکار HTTPS محسوب می‌شه).

آیکون‌هایی با اندازه‌های ۱۹۲x۱۹۲ و ۵۱۲x۵۱۲ پیکسل (فرمت PNG یا JPEG).

 

گام‌های ساخت PWA با ASP.NET Core MVC

مدرس بهمن آبادی

گام ۱: ایجاد پروژه ASP.NET Core MVC

1. ایجاد پروژه جدید:

Visual Studio رو باز کنید و Create a new project رو انتخاب کنید.

قالب ASP.NET Core Web App (Model-View-Controller) رو انتخاب کنید.

نام پروژه رو (مثلاً PWADemo) وارد کنید و .NET 9.0 رو انتخاب کنید.

گزینه Do not use top-level statements رو غیرفعال کنید و پروژه رو بسازید.

اگه از VS Code استفاده می‌کنید، این دستور رو اجرا کنید:

dotnet new mvc -o PWADemo
cd PWADemo

code .

2. اجرای پروژه:

  • پروژه رو با Ctrl+F5 (بدون دیباگ) اجرا کنید.

  • مرورگر باز می‌شه و صفحه پیش‌فرض ASP.NET Core رو در https://localhost:<port> نشون می‌ده.

نکته سلامت: هنگام کدنویسی طولانی، از قانون ۵۲-۱۷ (۵۲ دقیقه کار، ۱۷ دقیقه استراحت) استفاده کنید تا تمرکزتون حفظ بشه. از عینک بلوک‌کننده نور آبی (مثل Gunnar Optiks) برای کاهش خستگی چشم استفاده کنید.

گام ۲: نصب پکیج PWA

  1. نصب NuGet پکیج:

    • در Visual Studio، به Tools > NuGet Package Manager > Manage NuGet Packages for Solution برید.

    • پکیج WebEssentials.AspNetCore.PWA رو جستجو و نصب کنید.

    • اگه از VS Code استفاده می‌کنید، این دستور رو اجرا کنید:

dotnet add package WebEssentials.AspNetCore.PWA

      2. چرا این پکیج؟:

  • این پکیج به‌طور خودکار Service Worker و Manifest رو به پروژه اضافه می‌کنه و کار رو ساده‌تر می‌کنه.

دوره جامع برنامه‌نویسی وب در بخش ASP.NET Core، استفاده از پکیج‌های NuGet و مدیریت وابستگی‌ها رو با پشتیبانی دائمی آموزش می‌ده.

گام ۳: ایجاد فایل Manifest

  1. ساخت فایل manifest.json:

    • در پوشه wwwroot پروژه، یه فایل به نام manifest.json بسازید.

    • کد زیر رو توش کپی کنید:

    { "name": "PWADemo", "short_name": "PWA", "description": "نمونه برنامه وب پیش‌رونده با ASP.NET Core", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#2196f3", "icons": [ { "src": "/images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }

 

      2. اضافه کردن آیکون‌ها:

  • در پوشه wwwroot/images/icons، دو آیکون با اندازه‌های ۱۹۲x۱۹۲ و ۵۱۲x۵۱۲ پیکسل (فرمت PNG) قرار بدید.
  • می‌تونید از ابزارهای آنلاین مثل Canva برای ساخت آیکون استفاده کنید.

       3.توضیحات فایل Manifest:

  • name: نام کامل اپلیکیشن.
  • short_name: نام کوتاه برای نمایش در صفحه اصلی.
  • start_url: صفحه‌ای که اپلیکیشن از اون شروع می‌شه.
  • display: standalone: اپلیکیشن مثل یه برنامه بومی، بدون نوار آدرس مرورگر باز می‌شه.
  • icons: آیکون‌های اپلیکیشن برای اندازه‌های مختلف.

گام ۴: ثبت Service Worker

  1. اضافه کردن پکیج به Startup:
    • فایل Startup.cs (یا Program.cs در .NET 6 و بالاتر) رو باز کنید.
    • در متد ConfigureServices (یا بخش خدمات در Program.cs)، کد زیر رو اضافه کنید:

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;

var builder = WebApplication.CreateBuilder(args);

// افزودن خدمات MVC
builder.Services.AddControllersWithViews();

// افزودن پشتیبانی PWA
builder.Services.AddProgressiveWebApp();

var app = builder.Build();

// تنظیمات middleware
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

 

  1. توضیح کد:
    • متد AddProgressiveWebApp() پکیج WebEssentials رو فعال می‌کنه و Service Worker و Manifest رو به پروژه اضافه می‌کنه.
    • این کد برای .NET 6 و بالاتر نوشته شده. برای نسخه‌های قدیمی‌تر، از Startup.cs استفاده کنید.

گام ۵: تنظیمات آفلاین و کش

  1. ایجاد صفحه آفلاین:
    • در پوشه wwwroot، یه فایل offline.html بسازید و کد زیر رو توش قرار بدید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>آفلاین</title>
    <style>
        body { font-family: Vazir, Arial; text-align: center; padding: 50px; }
        h1 { color: #ff4444; }
    </style>
</head>
<body>
    <h1>شما آفلاین هستید!</h1>
    <p>لطفاً اتصال اینترنت خود را بررسی کنید و دوباره تلاش کنید.</p>
</body>

</html>

2. تنظیم کش در appsettings.json:
  • فایل appsettings.json رو باز کنید و تنظیمات زیر رو اضافه کنید:
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "pwa": {
    "cacheId": "PWADemo-v1",
    "strategy": "cacheFirstSafe",
    "routesToPreCache": "/, /Home/Index, /Home/About",
    "offlineRoute": "/offline.html",
    "registerServiceWorker": true,
    "registerWebmanifest": true
  }
}

 

  1. توضیح تنظیمات:
    • cacheId: نسخه کش رو مشخص می‌کنه.
    • strategy: cacheFirstSafe: ابتدا از کش استفاده می‌شه، اما برای صفحات HTML ابتدا شبکه بررسی می‌شه.
    • routesToPreCache: مسیرهایی که باید از قبل کش بشن.
    • offlineRoute: صفحه‌ای که در حالت آفلاین نمایش داده می‌شه.

 

گام ۶: تست و اعتبارسنجی PWA

  1. اجرای پروژه:
    • پروژه رو با Ctrl+F5 اجرا کنید.
    • مرورگر Chrome رو باز کنید و به https://localhost:<port> برید.
  2. بررسی Service Worker:
    • در Chrome، با Ctrl+Shift+I ابزار توسعه‌دهنده رو باز کنید.
    • به تب Application > Service Workers برید و مطمئن بشید که Service Worker فعاله.
  3. تست آفلاین:
    • در تب Network، گزینه Offline رو انتخاب کنید.
    • صفحه رو رفرش کنید و مطمئن بشید offline.html نمایش داده می‌شه.
  4. استفاده از Lighthouse:
    • در ابزار توسعه‌دهنده Chrome، به تب Lighthouse برید.
    • تست PWA رو اجرا کنید تا مطمئن بشید اپلیکیشن معیارهای PWA رو رعایت کرده.

گام ۷: انتشار اپلیکیشن

  1. انتشار پروژه:
    • از Visual Studio یا دستور زیر برای انتشار استفاده کنید:

    dotnet publish -c Release

    • فایل‌های منتشرشده رو روی سرور HTTPS (مثل Azure یا IIS) مستقر کنید.
  • تست نصب‌پذیری:
    • اپلیکیشن رو در مرورگر Chrome باز کنید.
    • اگه همه‌چیز درست باشه، دکمه Install در نوار آدرس ظاهر می‌شه.
    • اپلیکیشن رو نصب کنید و روی دسکتاپ یا موبایل تست کنید.

مزایا و چالش‌های PWA

مزایا

  • تجربه کاربری شبیه اپلیکیشن بومی.
  • کار آفلاین با Service Worker.
  • نصب آسان بدون نیاز به اپ‌استور.
  • پشتیبانی از اعلان‌های Push.
  • به‌روزرسانی خودکار در پس‌زمینه.

چالش‌ها

  • عدم پشتیبانی کامل از Safari (iOS).
  • نیاز به HTTPS برای امنیت.
  • پیچیدگی در مدیریت کش برای پروژه‌های بزرگ.

نتیجه‌گیری

ساخت PWA با ASP.NET Core MVC راهی عالی برای ایجاد اپلیکیشن‌های وب مدرن، سریع و کاربرپسنده. با استفاده از پکیج WebEssentials.AspNetCore.PWA، می‌تونید به‌راحتی Service Worker و Manifest رو به پروژه اضافه کنید و ویژگی‌هایی مثل کار آفلاین و اعلان‌های Push رو پیاده‌سازی کنید.

 

منابع