pwa در انگولار

مقدمه

دراین مقاله فصد داریم به نحوه پیاده سازی pwa در انگولار بپردازیم.

اگر با مفهوم pwa آشنا نیستید میتوانید سایر مقاله های ما در مورد  pwa را در لینک های زیر بخوانید.

• pwa چیست ؟
• فناوری های pwa
• آموزش pwa

لازم به ذکر است که برای pwa در انگولار نیازی به برنامه نویسی نیست و تنها با اجرای چند دستور میتوانید به راحتی pwa را در پروژه خود راه اندازی کنید.

با راه اندازی pwa اگر استانداردهای برنامه نویسی و طراحی را به خوبی رعایت کرده باشید میتوانید یک وب اپلیکیشن حرفه ای بسازید که فرقی با اپلیکیشن های native ندارند.

 

ما در این مقاله از فریم ورک انگولار استفاده میکنیم که شما هم چنین میتوانید مقاله های راجب انگولار را مشاهده نمایید. 

 

 

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 در انگولار را با موفقیت راه اندازی کردید.

فایل نهایی در سایت گیت :

https://github.com/singhsugga/Newslar/tree/PWA