یک برنامه وب پیشرفته با Angular CLI ایجاد کنید

آیا می خواهید برنامه Angular خود را قابل نصب کنید؟ دیگر منتظر نباش!

Minko Gechev

در این پست، نحوه استفاده از رابط خط فرمان Angular (CLI) برای ایجاد یک برنامه وب پیشرو (PWA) را یاد خواهید گرفت.

می توانید نمونه کد را از این راهنما در GitHub بیابید.

توجه: این پست فرض می کند که شما قبلاً با PWA ها و مزایای آنها آشنا هستید. اگر به یک تجدید کننده نیاز دارید، مجموعه Instalable را بررسی کنید.

یک PWA قابل نصب ایجاد کنید

برای اینکه برنامه Angular خود را به PWA تبدیل کنید، تنها کاری که باید انجام دهید این است که یک فرمان را اجرا کنید:

ng add @angular/pwa

این دستور خواهد شد:

• یک سرویس‌کار با پیکربندی ذخیره‌سازی پیش‌فرض ایجاد کنید.
• یک فایل مانیفست ایجاد کنید، که به مرورگر می گوید برنامه شما در هنگام نصب روی دستگاه کاربر چگونه باید رفتار کند.
• پیوندی به فایل مانیفست در index.html اضافه کنید.
• تگ <meta> theme-color را به index.html اضافه کنید.
• نمادهای برنامه را در فهرست src/assets ایجاد کنید.

به‌طور پیش‌فرض، سرویس‌کار شما باید در عرض چند ثانیه پس از بارگیری صفحه اول ثبت شود. اگر اینطور نیست، registrationStrategy را اصلاح کنید.

PWA خود را سفارشی کنید

پست Precaching with Angular service worker نحوه پیکربندی Angular service worker را توضیح می دهد. در آنجا می‌توانید نحوه تعیین منابعی را که می‌خواهید کارمند سرویس در حافظه پنهان نگه دارد و از چه استراتژی برای انجام این کار استفاده کند، بیابید.

فایل مانیفست برنامه شما به شما امکان می دهد نام برنامه، نام کوتاه، نمادها، رنگ تم و سایر جزئیات را مشخص کنید. درباره مجموعه کامل ویژگی‌هایی که می‌توانید در پست مانیفست افزودن یک برنامه وب تنظیم کنید، بخوانید.

نگاهی به فایل مانیفست تولید شده توسط Angular CLI بیندازید:

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

می توانید هر یک از این ویژگی ها را با تغییر مقدار مربوطه در manifest.webmanifest سفارشی کنید.

یک PWA به فایل مانیفست خود با عنصر link در index.html ارجاع می دهد. هنگامی که مرورگر مرجع را پیدا کرد، اعلان افزودن به صفحه اصلی را نشان می دهد:

از آنجایی که شماتیک‌های ng-add همه چیزهایی را که برای نصب برنامه شما لازم است اضافه می‌کنند، تعدادی نماد میانبر ایجاد می‌کنند که پس از افزودن برنامه به دسکتاپ توسط کاربر نشان داده می‌شوند:

قبل از استقرار PWA خود در تولید، مطمئن شوید که ویژگی ها و نمادهای مانیفست را سفارشی کرده اید!

توجه: اگر می‌خواهید PWA خود را به یک برنامه وب استاندارد برگردانید، فقط مرجع manifest.webmanifest را از index.html حذف کنید.

نتیجه گیری

برای ایجاد یک برنامه Angular قابل نصب:

1. @angular/pwa با استفاده از Angular CLI به پروژه خود اضافه کنید.
2. گزینه های موجود در فایل manifest.webmanifest را متناسب با پروژه خود ویرایش کنید.
3. آیکون های موجود در فهرست src/assets/icons را متناسب با پروژه خود به روز کنید.
4. به صورت اختیاری، theme-color در index.html ویرایش کنید.