پیاده سازی اپلیکیشن PWA - قسمت اول

قبل از هر چیزی باید بگم که PWA مخفف Progressive web application هستش و به فارسی شاید بشه گفت "اپلیکیشن های پیش رونده" که این روزها خیلی بازار داغی داره و اکثر تیم ها سعی می کنن تا اپلیکیشن هایی که تولید می کنند حتما بصورت pwa باشه و تجربه کاربری خوبی رو برای مشتریان رقم بزنن ...

در سال 2015 این concept توسط مهندسین گوگل (chrome) معرفی شد تا برنامه نویس ها از قابلیت های مرورگرهای مدرن مثل service worker و web app manifest استفاده کنن تا سبک جدیدی از وب اپلیکیشن رو بتونن به کاربران ارائه بدن که از امکانات و پرفورمنس خوبی هم برخوردار باشه.

پیاده سازی اپلیکیشن pwa
پیاده سازی اپلیکیشن pwa

قابلیت های یک اپلیکیشن PWA

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

  • یکی از قابلیت های pwa بهره گیری از push notification هستش که کاربر با تایید این سرویس می تونه در حالتی که حتی داخل اپلیکیشن شما نیست از آخرین تغییرات یا notification هایی که براش ارسال میشه مطلع بشه و اپلیکیشن رو باز کنه.
  • امکان cache کردن فایل ها در مرورگر بصورت تخصصی تر و استفاده از فایل های مورد نیاز حتی در زمان قطع بودن ارتباط device با اینترنت.
  • یک اپلیکیشن کاملا Responsive و هماهنگ با مرورگرهای موبایل و تبلت که کاربر تماما حس استفاده از یک اپلیکیشن Native رو داره.
  • امکان نصب اپلیکیشن داخل Home Screen همراه با Icon تا کاربران شما بعدا بدون نیاز به باز کردن مرورگر و وارد کردن URL به اپلیکیشن شما دسترسی داشته باشن.
  • اپلیکیشن های PWA تماما بر بستر HTTPS هستن و مطمئن هستید که تماما یک ارتباط امن وجود داره.
  • بخاطر استفاده از service worker ها تمام اپلیکیشن بصورت up-to-date در اختیار کاربران است.
  • اپلیکیشن تماما قابل دسترس از طریق موتور جستجو هستش و می تونید SEO رو داشته باشید.
  • اپلیکیشن شما شبیه یک Mobile App واقعی هستش و از پرفورمنس خوبی برخورداره.

وکلی مسائل دیگه که در آینده بهشون میرسیم و قطعا در موردشون توضیح خواهم داد ...

نکته: در نظر داشته باشید که pwa یک مفهوم یا concept هستش و به اشتباه فکر نکنید که با یک زبان برنامه نویسی جدید یا framework و حتی library سر و کار دارید!!!

آشنایی با Service Worker در PWA

میشه گفت که بار اصلی یک اپلیکیشن pwa کاملا بر دوش service worker ها هستش و این قابلیت بصورت یک proxy تمام ارتباط های مرورگر یک کاربر با سرور رو مدیریت می کنه.

Progressive web application - Service Workers
Progressive web application - Service Workers

همانطورکه تو عکس بالا می بینید در حقیقت مدل اول حالت ساده هستش که اپلیکیشن با وب سرور ارتباط داره و هرچی درخواست بده از سرور دریافت می کنه. ولی در حالت پایین در حقیقت service worker داره نقش یک proxy رو این وسط انجام میده و با جاوااسکریپت هم پیاده سازی میشه.

درخواست هایی که کاربر داره رو پردازش و بعد از بررسی یکسری نکات به وب سرور ارسال می کنه و بعد جواب رو دریافت و همراه با یکسری بررسی مجدد به کاربر serve یا ارائه می کنه.

در حقیقت service worker یک نوع از web worker ها هستش که در فایل جاوااسکریپت جداگانه در thread مجزا اجرا میشه و کارهای cache, push notification, network request و بازیابی cache رو انجام میده و تشبیه اون به proxy بهترین مثال هستش!!!

در زمان استفاده از service worker ها باید به این نکات (عواقب استفاده ازش) توجه کنید:

  • از اونجایی که سرویس ها خارج از main thread اجرا میشن در نظر داشته باشید که به هیچ وجه blocking نیستن یعنی برای کار Async طراحی نشدن و نمیشه از XHR و LocalStorage استفاده کرد.
  • چون از push notification ها استفاده می کنید حتی اگر کابر داخل اپلیکیشن نباشه از طرف سرویس بهش پیغام ارسال میشه و همه چیز رو خواه و ناخواه باید مشاهده کنه.
  • سرویس ها بصورت مستقیم به DOM دسترسی ندارن و باید از ()postMessage کمک گرفت.

نوشتن اولین Service Worker

قبل از نوشتن اولین service worker در نظر داشته باشید که lifecycle اونها به سه بخش تقسیم میشه:

  • Registration
  • Installation
  • Activation

همچنین قبلا گفتم که جزء امکانات مرورگرهای مدرن هستش پس باید قبلش چک کنید که این امکان در مرورگر کاربر قابل اجراست یا نه ؟ خوب بریم سراغ نوشتن کد اول برای Registration کردن که یک فایل به نام main.js داریم اینجا که مثلا تو فایل HTML قراره با تگ Script لودش کنیم:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
        console.log('Registration successful, scope is:', registration.scope);
    })
    .catch(function(error) {
        console.log('Service worker registration failed, error:', error);
    });
}

تو این کد اول با یک if ساده چک می کنیم که مرورگر کاربر serviceWorker رو داخل navigator داره و پشتیبانی می کنه یا نه. اگر ساپورت می کشد که میاد یک service رو register می کنه و آدرس فایل هم بهش داده که بعدا کدهامون رو قراره تون اون فایل بنویسیم.

بعد از اینکه موفق آمیز بود میادش توی log یک پیام میده و با registration.scope هم مشخصات scope رو نمایش میده و اگر هم پشتیبانی نشه در catch بهمون یک خطا رو نمایش میده.

برای Installation حالا یک فایل به نام service-worker.js میسازیم و کدهای زیر رو داخلش می نویسیم:

// Listen for install event, set callback
self.addEventListener('install', function(event) {
    // Perform some task
});

در اینجا اومدیم گفتیم که وقتی سرویس event مورد نظر یعنی install رو مشاهده کرد عملیات داخل بلاک رو انجام بده , یعنی همون خط: Perform some task هستش ...

خوب حالا نوبت به مرحله Activation میرسه و باید به این شکل event مربوطه رو پیگیری کنیم:

self.addEventListener('activate', function(event) {
    // Perform some task
});

در اینجا event مربوطه activate هستش که زمان فعال شدن سرویس میتونیم ازش استفاده کنیم و داخل بلاک عملیات های مربوط به این step رو انجام بدیم.

در نظر داشته باشید که service worker ها تماما event driven هستن و باید تمام عملیات رو با روش بالا یعنی با استفاه از addEventListener مدیریت کنید که در آینده با کارهای جذابی که انجام میدیم متوجه این قضیه خواهید شد.

تا ادامه این آموزش و قسمت های بعدی مقاله خدانگهدار