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

تو قسمت اول مقاله یک مقدمه ای رو درباره PWA گفتم و با بخش های مختلف کار و اینکه اجرای اصلی یک فایل Service Worker چی هستن و Lifecycle اون چیه آشنا شدیم. یاد گرفتیم چطور یک سرویس رو به اپلیکیشن اصلی Register کنیم و بقیه ماجرا رو ادامه بدیم ...

اگر کد زیر رو تو یک فایل HTML ساده نوشته باشید و بعد از اجرای اون به کنسول مرورگر توجه کنید , قطعا به خطا خوردید !!! و بهتون میگه که سرویس رو نتونسته به مرورگر رجیستر کنه و کار همین اول متوقف میشه:

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);
    });
}

این به این دلیل نیست که مرورگر از ServiceWorker پشتیبانی نمی کنه !!! بلکه بخاطر مسائلی مثل SSL هستش که شما روی لوکال هاست خودتون ندارید و همانطوریکه تو قسمت اول گفتم لازمه یک اپلیکیشن PWA داشتن certificate بر روی سرور Host اپلیکیشن هستش و تا زمانیکه این مشکل رو حل نکنید نمی تونید بحث PWA رو برای اپلیکیشن پیاده سازی کنید و تست بگیرید ...

نحوه تست و debug یک اپلیکیشن pwa
نحوه تست و debug یک اپلیکیشن pwa

نحوه تست یا Debug و راه اندازی اپلیکیشن های PWA در کامپیوتر لوکال هاست

خوب حالا که به مشکل کارمون پی بردیم قراره این قسمت دوم مقاله رو به نحوه تست و راه اندازی pwa بر روی کامپیوتر لوکال اختصاص بدیم. برای شروع باید یک local server رو راه اندازی کنید.

نصب XAMPP و راه اندازی لوکال سرور

من پیشنهاد می کنم اول کار XAMPP رو از لینک زیر متناسب با سیستم عامل خودتون دانلود و نصب کنید:

https://www.apachefriends.org/download.html

برای دوستانی که نمیدونن باید بگم که XAMPP یک ابزار خیلی کاربردی یا یک wizard برای نصب Apache و PHP یا بقیه امکانات کنار هم هستش تا یک لوکال سرور ساده و قوی رو داشته باشید و دیگه نیازی نیست به صورت جدا از هم و با کلی دردسر هر کدوم از سرویس های مورد نیاز یک سرور رو نصب کنید.

نکته: البته ما اینجا از XAMPP صرفا قراره از وب سرور آپاچی استفاده کنیم و یک PORT رو بکار بگیریم

برای ادامه کار باید از Google Chrome استفاده کنید. ولی قبلش به محل نصب کروم برید و دستور زیر رو در داخل CMD وارد کنید:

chrome.exe --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost

در حقیقت داره میگه که اگر آدرس localhost شما secure نبود بیاد ازش بگذره و error هارو برای این آدرس خاص ignore کنه. حالا فایل های خودتون رو داخل پوشه htdocs و XAMPP ببرید و با باز کردن آدرس localhost خواهید دید که خطای ServiceWorker ندارید و براتون ایجاد شده !!!

بررسی Service Worker ها در مرورگر گوگل کروم - Chrome

خوب حالا برای اینکه متوجه بشید که چه سرویس هایی داخل مرورگر گوگل کروم شما ذخیره شدن و چه فایل هایی رو دارن Cache می کنن مسیر زیر رو دنبال کنید:

Dev Tools (F12) > Application > Service Workers

توی این بخش می تونید تمام سرویس هارو ببینید و مثلا اونها رو Register یا Unregistered کنید و همچنین می تونید تیک Auto Update رو بزنید که آخرید تغییرات سرویس رو از فایل اصلی بگیره و Cache نکنه.

Google Chrome manage Service Workers
Google Chrome manage Service Workers

همچنین اگر می خواید cache ها یا Background Sync و Push هارو چک کنید در تب های پایین تر قابل مشاهده و ویرایش هستند و می تونید به راحتی با امکانات بخش Application برنامه خودتون رو تست بگیرید یا کارهای Debug رو انجام بدید ...

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

موفق باشید