Amir_zpr
Amir_zpr
خواندن ۳ دقیقه·۵ سال پیش

تجربه من از کار با PWA(بخش دوم)

 عکس از سایت appinventiv.com
عکس از سایت appinventiv.com


اگر قسمت اول تجربه من با PWA رو مطالعه کرده باشید احتمالا میدونید که قراره درباره فایل serviceWorker صحبت کنم.وب اپلیکیشن ها به چند فایل ضروری احتیاج دارن که یکیش manifest بود که توی جلسه قبل توضیح دادم راجع به اون.یکی دیگه از فایل های مهم فایل service worker هستش که یک فایله جاوا اسکریپته.این فایل کارش اینه که وقتی کاربر برای اولین بار اپلیکیشن ما رو اجرا میکنه منابع مورد نیاز رو در حافظه پنهان ذخیره میکنه و دفعه بعدی که کاربر اپ رو اجرا میکنه قبل از اینکه اتصال به اینترنت چک بشه به کاربر جواب میده.این باعث میشه که اگر اتصال به اینترنت کاربر قطع شد بازم بتونه با اپ کارکنه.

(کلماتی که من برای راحتی کار به فارسی مینویسم. سرویس ورکر :Service Worker و کنسول : console )


خب برای شروع من یک فایل میسازم به اسمه app.js که وظیفه این فایل رجیستر کردن سرویس ورکر هست. این فایل رو من داخل تمام صفحات html خودم باید لینک کنم.(که اینجا ما فعلا یک صفحه داریم).
فایل app.js برای رجیستر
فایل app.js برای رجیستر

اولین گام اینه که ما چک کنیم که اصلا آیا مرورگر از سرویس ورکر پشتیبانی میکنه یا نه؟توی این تیکه کد من اومدم گفتم اگر سرویس ورکر داخل مرورگر وجود داشت (یعنی توی این نسخه مرورگر ازش پشتیبانی میشد) اونو برام رجیستر کن.حالا توی بخش 1 میگم سپس برام توی کنسول بگو رجیستر شده در غیر اینصورت بگو که رجیستر نشده و مشکلی وجود داره.همونطوری که توی عکس زیر میبینید توی کنسولم سرویس ورکر برام رجیستر شده.

خب توی این مرحله باید رویداد های سرویس ورکر خودمون رو داخل فایل sw.jsکد کنیم.(این فایل باید حتما داخله روت اصلی پروژمون قرار گرفته باشه)

اولین رویدادمون install هست که قراره سرویس ورکر رو برای ما نصب کنه.
رویداد install برای نصب سرویس ورکر
رویداد install برای نصب سرویس ورکر
خب فعلا در حد یک لاگ سادس که به ما میگه که اون به خوبی نصب شده ولی بعدا ازش استفاده های بیشتری میکنیم.(وظیفه این متد کش کردن اطلاعاتی هست که من بهش میدم و اونارو توی حافظه پنهان ذخیره میکنه.)

خب همونطوری که میبینیم اون به خوبی نصب شده اگر من صفحه رو یک بار رفرش کنم دیگه پیام نصب سرویس ورکر رو نمیبینم و فقط پیام رجیستر سرویس ورکر رو میبینم.این دلیلش اینه که در حاله حاضر اون نصب هست ولی اگر من توی فایل تغییری بدم و اونو سیو کنم دوباره سرویس ورکر برای من اول رجیستر و بعد نصب میشه.

اگر من بیام توی مرورگر و از صفحه ام inspect بگیرم درونه تب اپلیکیشن و داخل serviceWorker میبینم که برام اکتیو شده .


خب ما به یک متد دیگه احتیاج داریم که وظیفه ایجاد تغییرات در کش رو داره که این متد هم فعلا یک لاگ سادس.

متد activate
متد activate


این متد بلافاصله بعد از اینکه متد install فراخوانی شد فراخوانی میشه در اصل متد install وظیفه کش کردن مواردی رو داره که ما به اون میگیم تا برامون ذخیره کنه.متد activate وظیفه این رو داره تا در صورتی که در فایل هامون تغییراتی ایجاد کردیم ورژن جدید کش مارو جایگزین ورژن قبلی کنه تا تغییرات جدید توی سایت اعمال بشن.اگر این متد فراخوانی نشه اونوقت تغییراتی رو که توی سایت شاید بعدا اعمال کنیم رو نمیبینیم چون توی مرورگر کش شده از قبل(توسط متد install).

اگر این جلسه رو بخوام توی یک عکس خلاصه کنم به شکله زیر میشه:

فک کنم یکم طولانی و حوصله سر بر شد:)) توی جلسه آینده میخوام طریقه کش کردن اطلاعات رو توسط متد install بگم و اینکه چطور از اطلاعات کش شده توسط یک متد دیگه استفاده کنیم و راجع به متد activate و خوبیاش بیشتر براتون میگم:))


وب اپلیکیشنpwaجاوا اسکریپت
مشک آن است که خود ببوید نه آنکه عطار بگوید :))))) RNNE => React+Next+Node+Express اینو خودم ساختم :))
شاید از این پست‌ها خوشتان بیاید