آیا می خواهید برنامه Angular خود را قابل نصب کنید؟ دیگر منتظر نباش!
در این پست، نحوه استفاده از رابط خط فرمان Angular (CLI) برای ایجاد یک برنامه وب پیشرو (PWA) را یاد خواهید گرفت.
می توانید نمونه کد را از این راهنما در GitHub بیابید.
یک 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 خود در تولید، مطمئن شوید که ویژگی ها و نمادهای مانیفست را سفارشی کرده اید!
نتیجه گیری
برای ایجاد یک برنامه Angular قابل نصب:
-
@angular/pwa
با استفاده از Angular CLI به پروژه خود اضافه کنید. - گزینه های موجود در فایل
manifest.webmanifest
را متناسب با پروژه خود ویرایش کنید. - آیکون های موجود در فهرست
src/assets/icons
را متناسب با پروژه خود به روز کنید. - به صورت اختیاری،
theme-color
درindex.html
ویرایش کنید.