آغاز کار با وب اپ های پراگرسیو در فریم ورک انگولار

خب حالا که فهمیدیم که چرا آینده از آن وب اپ های پراگراسیو است؟ می خواهیم وارد قسمت هیجان انگیز کار بشویم و چگونه یک PWA بسازیم! پیشنیاز این مقاله آشنایی با HTML,CSS,JavaScript است و از فریم ورک انگولار 6 نیز استفاده خواهیم کرد و کار را به ساده ترین شکل ممکن پیش خواهیم برد.

نیازمندی های PWA

برای اینکه یک وب اپ پراگرسیو داشته باشیم حداقل چیزهایی که نیاز داریم شامل:

پروتکل https
فایل web app manifest.json
فایل Service-Worker.js

قدم اول - ساخت فایل manifest

فایل manifest.json فایلی است شامل اطلاعاتی در مورد وب اپ شما که شامل نام اپ، آدرس عکس آیکن های اپ، رنگ تم مروگر، رنگ پیش زمینه و... است. فایلی شبیه به این:

manifest.json

{
 "name": "Iranian Angular community",
 "short_name": "ANGULAR IRAN",
 "theme_color": "#3369e7",
 "background_color": "#ffffff",
 "display": "standalone",
 "orientation": "portrait",
 "Scope": "/",
 "start_url": "/",
 "icons": [
 {
 "src": "assets/images/icon-72x72.png",
 "sizes": "72x72",
 "type": "image/png"
 },
 {
 "src": "assets/images/icon-96x96.png",
 "sizes": "96x96",
 "type": "image/png"
 },
 {
 "src": "assets/images/icon-128x128.png",
 "sizes": "128x128",
 "type": "image/png"
 },
 {
 "src": "assets/images/icon-144x144.png",
 "sizes": "144x144",
 "type": "image/png"
 },
 {
 "src": "assets/images/icon-152x152.png",
 "sizes": "152x152",
 "type": "image/png"
 },
 {
 "src": "assets/images/icon-192x192.png",
 "sizes": "192x192",
 "type": "image/png"
 },
 {
 "src": "assets/images/icon-384x384.png",
 "sizes": "384x384",
 "type": "image/png"
 },
 {
 "src": "assets/images/icon-512x512.png",
 "sizes": "512x512",
 "type": "image/png"
 }
 ],
 "splash_pages": null
}

و سپس به index.html خود آن را لینک می دهیم:

<link rel="manifest" href="/manifest.json">

فایل manifest را می توان خودکار ساخت. برای اینکار از اینجا و اینجا می توانید به راحتی استفاده کنید.

قدم دوم - تولید فایل service worker

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

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

ما از قابلیت اول در اینجا استفاده می کنیم (بقیه بمونه برا بعد!).

هر سرویس ورکر یک چرخه زندگی دارد. بار اولی که اپ ما بارگزاری می شود (روی دامنه https البته!) سرویس ورکر روی مرورگر register یا نصب و سپس فعال می شود.

به این معنی که الان می توانیم فایل های asset مان را روی cache storage مروگر ذخیره کنیم، به این معنی که اگر کاربر افلاین باشد (یا نباشد!) و دوباره به اپ باز گردد به جای اینکه مروگر دوباره درخواست دهد که فایل های asset را بگیرد از فایل های موجود در کش استفاده می کند و در نتیجه بلادرنگ صفحه بارگزاری خواهد شد. کاربر حس می کند که با یک اپ نیتو وب یا دسکتاپ کار می کند.

وقتی لوله اینترنت می ترکه! سرویس ورکر از کره ی کش گیف گربه رو بر می گردونه، جالبه نه؟! - مبنع

سرویس ورکر همچنین موجب می شود تا بنر نصب اپ نیز برای کاربر نمایش داده شود. به طور معمول اگر کاربری در کمتر از 10 دقیقه بیش از دوبار وارد سایت شود مرورگر بنر نصب اپ را برای او نمایش می دهد.

نمایش بنر نصب در گوگل کروم - نمونه کار شخصی

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

حال فایل ngsw-config.json را به شبیه کد زیر به روز می کنیم. برای درک کد به مستندات مراجعه کنید. البته اگر مطابق مستندات پروژه را بسازید خودش این فایل را تولید می کند. فقط با دستور جادویی زیر!:

 ng add  @angular/pwa --project *project-name*

اگر اخرین نسخه Angular CLI را دارید، از دستور بالا می توانید کمک بگیرید. و گرنه :

{
 "index": "/index.html",
 "assetGroups": [
    {
 "name": "Angular Iran",
 "installMode": "prefetch",
 "resources": {
 "files": ["/favicon.ico", "/index.html"],
 "versionedFiles": ["/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
      }
    },
    {
 "name": "assets",
 "installMode": "lazy",
 "updateMode": "prefetch",
 "resources": {
 "files": ["/assets/**"]
      }
    }
  ]
}

خب الان وقتش رسیده که اپ تون رو با فلگ prod بیلد کنید، تا نتیجه را ببینید.

ng build --prod

قدم سوم - تست در مرورگر و سرور

برای اینکه وب اپ پراگرسیو انگولاری خود را تست کنید از پکیج npm به نام http-server استفاده کنید.

npm i -g http-server

و بعد دستورات زیر را بزنید:

 cd dist 
 http-server -p 8080

پیشنهاد می شود. که آدرس localhost:8080 را در حالت incognito باز کنید. تا بتوانید سرویس ورکر را تست کنید. با زدن F12 در تب Application می توانید ببینید که فایل manifest و سرویس ورکرتان به درستی اضافه شده اند یا نه و یا حالت Offline را نیز تست کنید. البته در تب Audit هم می توانید وب اپ تون رو با LightHouse تست بگیرید و اشکالات ش را پیدا کنید و وب اپ پراگرسیو تان را بهتر و بهتر کنید.

برای تست در سرور هم می توانید از ارایه دهندگان رایگان https مانند .surge, firebase, now و... استفاده کنید.

کد منبع پروژه در گیتهاب