میخواهید برنامه 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 به فایل مانیفست خود ارجاع میدهد. هنگامی که مرورگر ارجاع را پیدا کرد، اعلان افزودن به صفحه اصلی را نشان میدهد: