pwa در انگولار
برای راه اندازی pwa در انگولار مراحل زیر را یک یه یک اجرا کنید :
1- ایتدا از نصب angular/cli مطمئن شوید :
> ng -v
اگر نصب نبود دستور زیر را بزنید :
> npm install -g @angular/cli
2- در این مرحله یک پروژه جدید میسازیم :
> ng new app
ما برای این مقاله از یک پروژه خبری در گیت اسفاده میکنیم :
>git clone -b master --single-branch https://github.com/singhsugga/Newslar.git
3- حال به مسیر اصلی پروژه رفته و تمام وابستگی ها را نصب میکنیم :
> npm install
4- حال پروژه را با دستور زیر build کنید :
> ng build --prod
با این دستور یک فولدر با نام dist ساخته میشود. به مسر این پوشه رفته و پروژه را اجرا کنید.
حال اگر افزونه web server for chrome extension در گوگل کروم نصب کنید مشاهده خواهید کرد که pwa در سایت ما فعال نیست.
5- حال زمان آن رسیده تا pwa را نصب کنیم :
> ng add @angular/pwa
برای مشاهده اطلاعات بیشتر میتوانید به آدرس زیر بروید :
https://www.npmjs.com/package/@angular/pwa
این دستور دو فایل در پروژه ایجاد میکند :
- Manifest.json ___ این فایل شامل کلیه مشخصات طراحی برای برنامه وب شما ، از جمله رنگ ، نام ، URL و اندازه آیکون است .
- Nsgw-config.json___ یک فایل JSON است که درواقع قلب PWA Angular است و یک PWA را تعریف می کند ، و این فایل مانند کنترل اصلی برای PWA شما است و این چیزی است که ما برای اضافه کردن عملکرد آفلاین استفاده خواهیم کرد.
6- بار دیگر پروژه را build میکنیم :
> ng build --prod
حال بر روی صفحه کلیک راست کرده و وارد inspect شوید. وارد تب Application شوید. همانطور که در عکس زیر هم میبیند دو فایل manifest و service worker به پروژه ما اضافه شده است.
اما pwa در انگولار هنوز تمام نشده است و ما در قسمت offline مشکل داریم چرا که اگر گزینه offline را فعال کنید میبینید که تنها قسمت های استاتیک سایت نمایش داده میشوند در حالی که ما میخواهیم پیام شما offline هستید به نمایش در آید.
7- فایل Nsgw-config.json را باز کنید. همانطور که در عکس مشاهده میفرمایید تنها فایل های استاتیک ما کش شده اند.
برای استفاده از کش داینامیک کدهای زیر ار به این فایل اضافه میکنیم :
"dataGroups": [
{
"name": "headlines",
"urls": [
"https://newsapi.org/**"
],
"cacheConfig": {
"maxSize": 10,
"maxAge": "1d",
"timeout": "5s",
"strategy": "freshness"
}
}
]
برای اطلاعات بیشتر در این زمینه لینک زیر در سایت انگولار را مشاهده کنید :
https://angular.io/guide/service-worker-config
8- بار دیگر پروژه را build کنید. با اجرای پروژه شما بنر نصب برنامه زا میبینید و حال شما pwa در انگولار را با موفقیت راه اندازی کردید.
فایل نهایی در سایت گیت :