pwa چیست و چگونه باید پیاده سازی شود ؟

سلام دوستان عزیز به وبلاگ من خیلی خیلی خوش اومدین من یه مدتی هست که در حال کار با وب اپلیکیشن ها هستم و تجربه هایی که کسب کردم برام خیلی جذاب بود با سرچی که کردم دیدم واقعا هیچ سایتی فارسی زبانی نه تنها آموزش بلکه pwa را حتی معرفی هم نکرده !!! وظیفه دونستم که تجربه هایم رو با شما به اشتراک بگذارم و  اما واقعا PWA یا Progressive Web Application چی هستش؟ و چه مزایایی دارد که ما از  این تکنولوژی استفاده کنیم؟

Progressive Web Application یا PWA یک وب اپلیکیشن است که با مرورگرهای امروزی سازگاری دارد ( با مرورگر های قدیمی هم کار میکند اما در مرورگرهای جدید قابلیت اجرا به عنوان یک اپلیکیشن را دارا می باشند )  و تجربه کاربری مانند یک اپلیکیشن را به کاربر الغا میکند.
ما با بهینه کردن سایت خود برای PWA کاربران موبایل با سرعت زیادی به سایت دسترسی پیدا میکنند و میتوانند بدون نیاز داشتن به مارکت اپلیکیشن را نصب کنند و از همه مهم تر نصب پیچیده ای هم نداره!! فقط کافیه کاربر بر روی Home Screen خود قرار بدهد. تعامل بیشتر با کاربران شاید دلیلی خیلی خوبی باشه برای استفاده از PWA که شما قادر هستید مانند یک اپلیکیشن نصب شده بر روی دیوایس کاربر برای کاربران خود Push Notification ارسال کنید. دلیل بعدی میتونه این باشه که اگر کاربر به هر دلیلی آفلاین شد و اتصال اینترنت خود را از دست داد اپلیکیشن قادر باشه به صورت آفلاین فعالیت کند و دیگه تصویر دایناسور (Donwasour) کروم ظاهر نمیشه 🙂

مزایا و فاکتور هایی که یک وب اپلیکیشن دارا می باشد به صورت زیر می باشد :

ریسپانسیو :  رکن اصلی سایت برای PWA ریسپانسیو بودن اپلیکیشن هستش که برای صفحه نمایش کاربران مختلف موبایل و تبلت خود را وفق دهند.

سریع : اکثر کاربران کاسه صبرشان تا ۳ ثانیه می باشد و اگه بیشتر طول بکشه سریع تب رو میبندند برای همین در PWA اپلیکیشن بلافاصله با سرعت زیادی اجرا می شود و اگر کاربر مشکل سرعت داشته باشد با آیکون دایناسور رور به رو نمیشید.

آفلاین : کاربران میتوانند به صورت آفلاین از اپلیکیشن استفاده کنند پس دغدغه ای ندارید که اگه اینترنت در دسترس نبود اپلیکیشن چطور واکنش نشان دهد.

تعامل با کاربران : یکی از مزایای خوبی که دارد میتوانید برای کاربران خود Push Notification ارسال کنید و شک نکنید که کاربران شما بیشتر به اپلیکیشن سر میزنند و نرخ تبدیل شما افزایش پیدا میکند.

هوم اسکرین : مانند بقیه اپلیکیشن ها بر روی هوم اسکرین قرار میگیرد و فرقی از نظر ظاهری با یک اپلیکیشن بومی ( Native Application ) ندارد.

 

خب حالا شروع کنیم به درست کردن PWA شما ابتدا باید یک سری فایل به وب اپلیکیشن خود اضافه کنید این فایل ها اعم از :

web app Manifest ( یک فایل حاوی json می باشد که وظیفه اش تنظیمات نحوه نمایش وب اپلیکیشن بر روی هوم اسکرین کاربر را دارد )

Service worker ( شامل یک فایل جاوا اسکریپت که در پست زمینه فعال می باشد و وظیفه ی هندل کردن اپلیکیشن در حالت آفلاین و دریافت اطلاعات از سرور را دارد )

برای شروع به درست کردن PWA چه چیزهایی لازم داریم ؟

۱ – کروم نسخه ۴۷ یا بالاتر

۲- وب سرور ( برای استفاده در Localhost ) اما اگه نمی‌دونید از چی استفاده کنید توصیه میکنم از Web Server for Chrome  استفاده کنید من هم در این آموزش از این استفاده میکنم .

۳ – کد آماده نمونه که برای راه اندازی اولیه  ( که بهتون میدم )

۴ – ویرایشگر کد ( توصیه میکنم VSCode را استفاده کنید )

۵ – دانش اولیه از HTML , CSS , JAVA SCRIPT

۶ – دستگاه اندروید با نسخه ی ۴ به بالا

۷ – کابل USB برای اتصال دیوایس اندرویدی به کامپیوتر

نکته : برای استفاده از PWA باید SSL داشته باشید و سایت از پروتوکل HTTPS استفاده کند و همینطور Service Worker تنها به HTTPS و Localhost پاسخ گو می باشد دلیلی که گفتم از وب سرور استفاده کنیم برای این که در  Localhost  زمانی که در حال توسعه هستیم بتوانیم اپلیکیشن را اجرا و تست کنیم.

شروع به کار

برای شروع به نوشتن وب اپلیکیشن ساده من از  Fireworks! استفاده کردم که با لمس کردن صفحه موشک هوا میکنیم 🙂  کدهای تمرینی پروژه را از لینک زیر دانلود کنید.

دانلود فایل تمرین پروژه 

تنظیمات قسمت محیط کاری خود

بعد از این که فایل تمرینی پروژه را دانلود کردید فایل را از حالت فشرده خارج کنید، یک پوشه به نام add-to-home-screen ایجاد میشود، حالا وارد کنسول ویندوز شوید و دستور زیر را کپی کنید

$ cd add-to-home-screen
$ mkdir work
$ cp -r step-02/* work
$ cd work

توضیح در رابطه با دستور کنسول بالا : در خط اول وارد پوشه add-to-home-screen میشویم و بعد یک پوشه به نام work میسازیم  ، سپس فایل های پوشه ی step-02 را در پوشه ی work کپی میکنیم.

توجه داشته باشید که ما میخواهیم در پوشه ای که ساختیم به اسم work کار کنیم و تمام تغییرات که در جلو با هم در این پوشه انجام میدهیم.

نصب و اجرای وب سرور

همان طور که گفتم برای این که PWA  اجرا بشه به HTTPS یا Localhost نیاز دارید و ما برای اینکه ببینیم چطور کدی که میزنیم درست کار میکنه باید در سیستم خودمان تست کنیم پس به یک وب سرور نیاز داریم. اگر به یک وب سرور سریع و سبک نیاز دارید میتوانید Chrome Web Server را از استور کروم دانلود کنید. فرقی نمیکنه میتوانید با هر وب سرور دیگه ای تست کنید اما مهم اینه که پروژه را در Localhost اجرا بگیرید.

ما در این آموزش از Chrome Web Server استفاده میکنیم.

بعد از این که Chrome Web Server را دانلود و نصب کردیم باید برویم به Chrome App Launcher ( جایی که تمام اکستشن های نصب شده را کنار هم نمایش میدهد )  و به شکل آیکون زیر است و اجرا کنیم.

وقتی وارد Apps میشوید آیکون chrome web server به شکل زیر هستش.

وقتی که chrome web server اجرا شد در قسمت Select باید مسیر پوشه ی work را بدهیم که بهش بگوییم محتویات این پوشه را نمایش دهد، اگر دقت کنید پورتی که به صورت پیش فرض برای این وب سرور تعریف شده پورت ۸۸۸۷ هستش پس با خیال راحت به آدرس localhost:8887 بروید و تست بگیرید.

ایجاد فایل Manifest به پروژه

اولین چیزی که باید به پروژه در پوشه ی work اضافه کنید فایل Manifest هستش ، Manifest یک فایل Json است که برای تنظیمات نحوه ی نمایش وب اپلیکیشن از آن استفاده میشود ، تنظیماتی اعم از نام اپلیکیشن ، آیکون اپلیکیشن ، آدرس وب اپلیکیشن ، رنگ پست زمینه و ….

خب وارد پوشه ی add-to-home-screen شوید و فایلempty-manifest.json را باز کنید و  مشاهده کنید.

{
  "short_name": "",
  "name": "",
  "icons": [
    {
      "src":"",
      "sizes": "",
      "type": ""
    }
  ],
  "start_url": "",
  "background_color": "",
  "Theme_color": "",
  "display": ""
}

این یک فایل Json هستش که یک Manifest برای مرورگر می باشد حالا این فایل را کپی کنید و در پوشه ی work قرار دهید.

حالا فایل های work/index.html و فایل work/css/firework.css را بازکنید یک سری اطلاعات که باید از این فایل ها کپی کنیم برای مشخصه های فایل manifest نیاز هستش.

نام اپلیکیشن : در فایل index.html در تگ <title> نام عنوانی که تعریف شده را کپی کنید و در فایل manifest.json در مشخصه name و short_name قرار دهید

"name": "Fireworks" 
"short_name": "Fireworks"

توجه داشته باشید که Manifest فراهم کننده یک سری دستورالعمل است تا از آن ها استفاده کنیم، تاثیری در تغییر محتوای فایل html نداره.

فرق بین مشخصه name و مشخصه short_name آن ها با همدیگه در نحوه نمایش آن ها در بخش های مختلف هستند، مثلا زمانی که کاربر اپلیکیشن را به Home screen خود اضافه میکند ، نام اپلیکیشن از مشخصه name استفاده میکند و یا در زمان اجرای برنامه ( Splash Screen ) نام اپلیکیشن نمایش داده میشود از مشخصه name استفاده میشود.

تنظیم رنگ ها

دو مشخصه در Manifest برای رنگ استفاده میشود، background_color  و theme_color 

در Manifest رنگی را تغییر نمیدهد و فقط زمانی که صفحه ی مان آماده نشده است ( HTML, CSS ,JS به صورت کامل رندر نشده اند ) رنگ پیشفرض خود را استفاده میکند مثلا در صفحه ی استارتاپ اپلیکیشن زمانی که صفحه رندر نشده یک صفحه با لوگویی که در Manifest تعریف کرده ایم نمایش میدهد.

برای این که رنگ پست زمینه در Manifest با فایل css/fireworks.css یکسان باشد در سلکتور body در فایل css/fireworks.css کد رنگ را کپی میکنیم و در مشخصه background_color  قرار میدهیم.

"background_color": "#000"

مشخصه ی theme_color هم باید با تگ <meta> در فایل index.html یکسان باشد ( این قسمت برای نوار بالای مرورگر می باشد که رنگ نوار نوتیفیکیشن را تغییر میدهد)

"theme_color": "#536878"

آیکون اپلیکیشن :

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

در مسیر add-to-home-screen/ یک تصویر برای آیکون به نام fireworks-icon192x192.png وجود دارد این فایل را در مسیر /work/image کپی کنید و نام آیکون را در فایل Manifest تغییر دهید.

"icons": [
  {
    "src":"images/fireworks-icon192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
]

حالت نمایش ( Display Mode )

Manifest مشخصه ی دیگری به نام display-mode دارد که نحوه ی نمایش وب اپلیکیشن را مشخص میکند وب اپلیکیشن به صورت تمام صفحه باشد یا همراه با address bar باشد، که باید مقدارش standalone یا fullscreen باشد.

"display": "standalone"

start_url در Manifest چیست ؟

زمانی که کاربر اپلیکیشن را به هوم اسکرین اضافه میکند با هر بار وارد شدن به اپلیکیشن به آدرس صفحه اپلیکیشن ارجاع می‌شود و تا اطلاعات را نمایش دهد.

اما از همه مهم تر قابلیتی هست که بتوانیم کاربرهامون رو ردگیری کنیم که کدوم کاربرها از Home Screen وارد سایت میشوند که میتوانیم در start_url  یک UTM تنظیم کنیم.

/?utm_source=homescreen

Splash Screen

زمانی که کاربر اپلیکیشن را به Home screen اضافه میکند و وارد اپلیکیشن میشود زمانی که اپلیکیشن اجرا میشود یک صفحه همراه با لوگو و نام اپلیکیشن نمایش میدهد (  تا محتوای وب اپلیکیشن رندر شود  ) به این صفحه splash screen میگوییم.

نکته : شما لازم نیست splash screen بسازید چون مرورگر خودش با استفاده از مشخصه های name , icons , background_color , theme_color که داخل Manifest تعریف کرده ایم برای ما Splash screen را میسازد. مانند تصویر زیر

اضافه کردن Manifest به صفحه

خب تا الان ما Manifest خود را ایجاد کردیم و آماده است و میدونیم چه مشخصه هایی داره حالا بهتره که به صفحه اضافه کنیم برای این کار کد زیر را در index.html قبل از بسته شدن تگ </head> اضافه کنید.

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

خب تبریک میگم با موفقیت Manifest را به وب اپلیکیشن خود اضافه کردید حالا وقت تست اینه که Manifest اضافه شده است یا نه برای این کار از وب سرور که قبلا ست کردیم روی آدرس localhost:8887 میرویم و وقتی صفحه بارگزاری شد کلید F12 را میزنیم تا وارد محیط developer tools کروم شویم در تب Application در ستون سمت چپ به اسم Manifest داره و با زدن روی Manifest در ستون سمت راست اطلاعات وب اپلیکیشن اعم از نام و آیکون و رنگ پست زمینه و … نمایش داده میشود.

مشاهده وب اپلیکیشن بر روی موبایل در محیط Localhost

به خاطر دارید که در ابتدای آموزش گفتم نیاز به کابل برای اتصال موبایل به لپ تاپ داریم بله الان وقتشه، ما در این جا میخواهیم دیوایس اندرویدی مان را به لپ تاپ وصل کنیم و وارد کروم در دسکتاپ بشیم و آدرس chrome://inspect/#devices را در مرورگر وارد میکنیم تصویر زیر را میبینیم :

حالا کابل usb را به گوشی متصل میکنیم و در قسمت developer options تیک مربوط به usb debugging را فعال کنید بعد از این که فعال کردید همان طور که در تصویر بالا مشاهده میکنید در قسمت remote target نام دستگاه اندرویدی تان اومده و تنها یک کار دیگه مونده و اون بازکردن پورت برای این دیوایس هستش که بر روی دکمه ی port forwarding کلیک کنید و پورت خود را وارد کنید ما در اینجا پورت ۸۸۸۷ را استفاده کردیم و در آخر تیک گزینه ی Enable port forwarding را مانند تصویر زیر را بزنید.

 

خب حالا که فعال کردید وارد گوشی شوید و مرورگر کروم خود را باز کنید و آدرس Localhost:8887 را وارد کنید. بله به همین راحتی میتوانید بر روی گوشی خود صفحه وب اپلیکیشن خود را تست کنید.

به نظرم هنوز پست تموم نشده و خیلی چیزهای دیگه ای هم هست ولی چون پست خیلی یکم طولانی شده در پست های آینده باز مطلب های بیشتری در این رابط مینویسم راستی اگه میخواهید از کارهای جدیدم با خبر بشید میتونید در کانال تلگرام من با آی دی @nickhooir عضو بشید ممنون از توجهتون اگه این پست کمکتون کرده خیلی خوشحال میشم بهم بازخورد هاتون را ارسال کنید