تبدیل پروژه ری اکتی به pwa

یونس قربانی

سلام دوست من

بله درسته که برای تبدیل پروژه ری‌اکتی به PWA فایل manifest و service worker نقش اساسی دارن اما چند تا قدم دیگه هم هست که باید انجام بدی تا پروژه‌ ات کاملاً تبدیل به یه PWA بشه و بهترین تجربه رو ارائه بده. 

فایل manifest.json مشخصات اپلیکیشن رو مشخص می‌کنه (مثل اسم، آیکون‌ها، رنگ‌ها و غیره). مطمئن شو که این فایل رو درست پیکربندی کردی:

{
  "name": "My React App",
  "short_name": "ReactApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

فایل manifest رو توی public/index.html به پروژه اضافه کن:

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

 اگر از CRA (Create React App) استفاده کردی CRA خودش یک فایل service worker پیش‌فرض داره. می‌تونی این فایل رو اصلاح کنی

 اگر دستی service worker اضافه می‌کنی باید اون رو ثبت (register) کنی. مثلاً در فایل src/index.js:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker registered:', registration);
      })
      .catch(error => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

 PWA‌ها فقط روی HTTPS (یا localhost) کار می‌کنن. اگر پروژه‌ ات روی سرور قرار داره باید مطمئن بشی که HTTPS فعال شده.

توی service worker باید مشخص کنی که کدوم فایل‌ها کش بشن. این معمولاً شامل فایل‌های استاتیک مثل CSS، JS و تصاویر می‌شه:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/static/css/main.css',
        '/static/js/main.js',
        '/icon-192x192.png',
        '/icon-512x512.png'
      ]);
    })
  );
});

 برای تست پروژه می‌تونی از ابزار Lighthouse در DevTools کروم استفاده کنی:

DevTools رو باز کن.

به تب Lighthouse برو.

PWA رو انتخاب کن و تست رو اجرا کن.

اگر مشکلی وجود داشت، بهت نشون می‌ده.

متا تگ‌ها در HTML

برای تجربه بهتر مطمئن شو که متا تگ‌های مرتبط رو به public/index.html اضافه کردی

<meta name="theme-color" content="#000000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

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

Amir-Ghorbani

سلام استاد  

من این پروژه رو تقریباً دو سال پیش همزمان که آموزش ها رو نگاه میکردم ساختم ، تا جایی که یادمه از cra استفاده کردم ولی فقط فایل manifest رو داره و فایل service worker رو نداره

اکسشتن Lighthouse رو نصب کردم اما  pwa رو انگار توی ورژن جدیدش حذف کردن و گفتن بجای اون از زبانه application توی devtools استفاده کنیم.

که منم همین کار رو کردم و در بخش manifest یه چند تا وارنینگ و خطا نوشته یکیش برای آیکون ها بود که اصلاح کردم و بعدش تست کردم و وب اپ به خوبی هم توی chrome و  هم edge نصب میشه.

دو تا خطای دیگه هم ایناس:

- Richer PWA install UI won't be available on desktop , please add at latest one screenshot with form_factor set to wide.

- Richer PWA install UI won't be available on mobile , please add at latest one screenshot for whith form_factor is not set or set to a value other than to wide.

الان چون service worker ندارم ممکنه روی برخی از کامیپوتر ها گزینه نصب نیاد؟ یا مشکلی نداره و فقط بحش کش دیتاها انجام نمیشه؟

اینو هم اضافه کنم که من در مرحله اول میخوام توی مرورگر دسکتاپ فقط دکمه install رو ازش استفاده کنم تا هم شورتکات روی دسکتاپ کاربر بزارم و هم موقع باز شدن مثل یک اپ باز بشه و آدرس باز و یه چیزای اضافه نشون داده نشه و برای موبایل اپ جداگونه دارم و نیاز به pwa ندارم.

یونس قربانی

سلام دوست من

به ServiceWorker نیاز داری

در بخشهای نهایی pwa رو آموزش دادم حتماً ببین

Amir-Ghorbani

سلام استاد 

همه کارا رو انجام دادم و pwa به خوبی کار میکنه.

فقط الان یه مشکلی وجود داره

برای یه سری از آدرس ها مثل 

Site.com/forum

من توی سرور درخواست رو می‌گرفتم و به جای اینکه به ری اکت بفرستم به سمت انجمن ارسال می‌کردم و اون بالا می‌ اومد 

الان با pwa شدن انگار service worker خودش روتها رو توی سیستم کاربر بررسی میکنه و وقتی میبینه چنین مسیری نیست ارور ۴۰۴ سایت ری اکتیم رو برمی گردونه😁

چجوری می تونم یه سری روت ها رو بگم جواب نده و ریکوئست رو به سرور بفرسته

یا شاید بهتره بگم فقط می‌خوام چند تا روتی که واسش تعریف شده رو جواب بده بقیه هر چی هست رو بفرسته به سرور

یونس قربانی

سلام دوست من

مشکل پیش اومده به این دلیله که Service Worker داره همه درخواست‌ها رو هندل می‌کنه و باعث می‌شه مسیرهایی که باید به سرور ارسال بشن، به اشتباه از کش یا هندلر PWA جواب داده بشن.

برای رفع این مشکل باید Service Worker رو طوری تنظیم کنی که فقط یک سری مسیرهای خاص رو از کش هندل کنه و بقیه درخواست‌ها رو مستقیم به سرور بفرسته.

در Service Worker (معمولاً فایل service-worker.js) باید مشخص کنی که چه روت‌هایی از کش پاسخ داده بشن و چه روت‌هایی به سرور ارسال بشن.

مثال:

import { registerRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';

// هندل کردن روت های خاص
registerRoute(
    ({ url }) => url.pathname.startsWith('/forum'), // مسیرهایی که مستقیم به سرور می‌رن
    new NetworkFirst({
        cacheName: 'forum-cache',
    })
);

// سایر روت‌ها
registerRoute(
    ({ url }) => url.pathname.startsWith('/static') || url.pathname === '/',
    new NetworkFirst({
        cacheName: 'static-cache',
    })
);

بعد از اعمال تغییرات حتماً:

1- Service Worker رو دوباره ثبت کن (Service Worker قدیمی ممکنه همچنان فعال باشه):

navigator.serviceWorker.getRegistrations().then((registrations) => {
    registrations.forEach((registration) => {
        registration.unregister();
    });
});

2- کش مرورگر رو پاک کن یا DevTools رو در حالت Disable Cache قرار بده (در بخش Netwrok).

تست کن ببین درست میشه