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

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

مینکو گچف

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

می‌توانید نمونه کد این راهنما را در گیت‌هاب پیدا کنید.

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

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

ng add @angular/pwa

این دستور:

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

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

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

پست Precaching با سرویس ورکر انگولار نحوه پیکربندی سرویس ورکر انگولار را توضیح می‌دهد. در آنجا می‌توانید نحوه مشخص کردن منابعی که می‌خواهید سرویس ورکر ذخیره کند و استراتژی مورد استفاده برای انجام این کار را بیابید.

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

نگاهی به فایل مانیفست تولید شده توسط 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 خود را در محیط عملیاتی منتشر کنید، مطمئن شوید که ویژگی‌ها و آیکون‌های manifest را سفارشی‌سازی کرده‌اید!

نتیجه‌گیری

برای ساخت یک برنامه Angular قابل نصب:

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