PWA در React از حرف تا عمل

برای اینکه بگم PWA چیه و چیکار میکنه، شما رو دعوت میکنم به یه سرچ خیلی ساده. چون الا ماشاالله براش مقاله نوشته شده و من ترجیح میدم اضافه‌گویی نکنم.

بریم سراغ بخش خوشمزه و هیجان‌انگیز پیاده سازی ...

اگر از CRA برای ساخت پروژه خودتون استفاده کردید که چه بهتر، چون چند قدم جلو هستید، در غیر اینصورت نگران نباشید، سعی میکنم جوری بگم که چیزی از قلم نیافته.

برای اینکه پروژه شما به ساختار PWA تبدیل بشه، باید 7 گام رو با هم برداریم.

گام اول :

در دایرکتوری src فایلی به نام serviceWorker.js ایجاد کنید و محتوای زیر رو به اون اضافه کنید.

محتوای فایل رو می‌تونید اینجا مشاهده کنید :
https://github.com/darbandi/PWA/blob/master/serviceWorker.js

گام دوم :

در فایل index.js پروژه، باید عملیات رجیستر کردن serviceWorker رو به‌صورت زیر انجام بدید.

import * as serviceWorker from './serviceWorker';

// در خط آخر
serviceWorker.register();

به این نکته دقت داشته باشید که اگه از CRA استفاده کرده باشید، پیشفرض از متد unregister استفاده شده که باید اون رو به متد register تغییر بدید.

محتوای فایل رو می‌تونید اینجا مشاهده کنید : <br/>https://github.com/darbandi/PWA/blob/master/index.js

گام سوم :

وارد متد register از فایل serviceWorker.js که در گام اول ایجاد کرده بودیم بشید، و مقدار process.env.NODE_ENV رو از production به development تغییر بدید. علتش هم اینه که قبل از اینکه پروژه رو build کنیم بتونیم تست‌های لازم رو انجام بدیم و خروجی کارمون رو تو حالت localhost مشاهده کنیم. بعد از اتمام تست و نهایی شدن کارمون، مجددا به حالت production برش می‌گردونیم.

گام چهارم :

تو دایرکتوری public فایلی به نام service-worker.js ایجاد کنید و محتوای زیر رو به اون اضافه کنید.

محتوای فایل رو می‌تونید اینجا مشاهده کنید : <br/>https://github.com/darbandi/PWA/blob/master/service-worker.js

ای جونم D:

اینجا جاییه که تمام آرمان‌ها و اهدافمون رو میتونیم پیاده سازی کنیم.

توضیحات :

خط 1 : یه اسم برای کشمون در نظر میگیریم. زمانی به کارمون میاد که قرار باشه کش قبلی رو حذف کنیم یا موارد جدیدی به کشش اضافه کنیم.

خط 2 : تو این متغیر تمام فایل‌های استاتیک پروژه مثل تصاویر و لوگو‌ها و استایل‌ها و فایل‌های js که باید کش بشن رو می‌تونید تعریف کنید.

خط 9 تا 13 : وقتی پروژه اجرا میشه تمام فایل‌هایی که قبل‌تر تعریف کرده بودیم رو به کش browser اظافه میکنه.

خط 15 تا 17 : در واقع تو این قسمت تعیین میشه که clientهای فعال مجدد بارگیری نشن.
خط 19 تا 30 : تو این listener هم دیتاهایی که قبلا تو کش ذخیره شده واکشی میشه. تو این حالت آنلاین بودن دیتا مقدم تره.

اگر نیاز دارید که cache first باشید، یعنی کاربر چه آنلاین بود چه آفلاین، شما دیتا رو از کش براش ارسال کنید، این event رو به حالت زیر تغییر بدید.

self.addEventListener('fetch', (event) => {

     event.respondWith(

          caches.match(event.request).then((resp) => {

               return resp || fetch(event.request).then((response) => {

                    return caches.open(cacheName).then((cache) => {

                         cache.put(event.request, response.clone());

                         return response;

                    });

               });

          })

     );

});

گام پنجم :

در دایرکتوری public فایلی به نام manifest.webmanifest ایجاد کنید و محتوای زیر رو به اون اضافه کنید.

محتوای فایل رو می‌تونید اینجا مشاهده کنید :<br/>https://github.com/darbandi/PWA/blob/master/manifest.webmanifest

اگه از CRA استفاده می‌کنید، همین فایل با پسوند json وجود داره که می‌تونید اون رو با پسوند webmanifest تغییر بدید. این نکته خیلی مهمه که حتما پسوند رفرنس manifest رو که تو فایل index.html هم هست رو نیز تغییر بدید.

گام ششم :

پروژه رو اجرا کنید. باید آیکن install رو در سمت راست address bar صفحه مشاهده کنید.

در حال تکمیل این مقاله هستم. قراره توضیحات هر خط از کدها رو هم اضافه کنم که کاملا مشخص بشه دقیقا چه کاری انجام میدن.