برنامه‌های وب پیش‌رونده فرانت‌اند: تسلط بر پیاده‌سازی سرویس ورکر

برنامه‌های وب پیش‌رونده (PWA) نشان‌دهنده یک تحول بزرگ در توسعه وب هستند که شکاف بین وب‌سایت‌های سنتی و اپلیکیشن‌های موبایل بومی را پر می‌کنند. یکی از فناوری‌های اصلی زیربنایی PWAها، سرویس ورکر (Service Worker) است. این راهنما یک نمای کلی جامع از پیاده‌سازی سرویس ورکر ارائه می‌دهد که مفاهیم کلیدی، مثال‌های عملی و بهترین شیوه‌ها را برای ساخت PWAهای قوی و جذاب برای مخاطبان جهانی پوشش می‌دهد.

سرویس ورکر چیست؟

سرویس ورکر یک فایل جاوا اسکریپت است که در پس‌زمینه و جدا از صفحه وب شما اجرا می‌شود. این فایل به عنوان یک پروکسی شبکه قابل برنامه‌ریزی عمل می‌کند، درخواست‌های شبکه را رهگیری کرده و به شما امکان می‌دهد نحوه مدیریت آن‌ها توسط PWA خود را کنترل کنید. این قابلیت‌ها ویژگی‌هایی مانند موارد زیر را فعال می‌کند:

• قابلیت آفلاین: به کاربران اجازه می‌دهد حتی در حالت آفلاین به محتوا دسترسی داشته باشند و از برنامه شما استفاده کنند.
• کشینگ (Caching): ذخیره‌سازی دارایی‌ها (HTML, CSS, JavaScript, تصاویر) برای بهبود زمان بارگذاری.
• اعلان‌های پوش (Push Notifications): ارسال به‌روزرسانی‌های به موقع و تعامل با کاربران حتی زمانی که فعالانه از برنامه شما استفاده نمی‌کنند.
• همگام‌سازی پس‌زمینه (Background Sync): به تعویق انداختن وظایف تا زمانی که کاربر به یک اتصال اینترنتی پایدار دسترسی پیدا کند.

سرویس ورکرها یک عنصر حیاتی در ایجاد یک تجربه واقعاً شبیه به اپلیکیشن در وب هستند که PWA شما را قابل اعتمادتر، جذاب‌تر و کارآمدتر می‌کنند.

چرخه حیات سرویس ورکر

درک چرخه حیات سرویس ورکر برای پیاده‌سازی صحیح ضروری است. این چرخه شامل چندین مرحله است:

1. ثبت (Registration): مرورگر سرویس ورکر را برای یک محدوده (scope) مشخص (URLهایی که کنترل می‌کند) ثبت می‌کند.
2. نصب (Installation): سرویس ورکر نصب می‌شود. این مرحله معمولاً جایی است که شما دارایی‌های ضروری را کش می‌کنید.
3. فعال‌سازی (Activation): سرویس ورکر فعال شده و شروع به کنترل درخواست‌های شبکه می‌کند.
4. بیکار (Idle): سرویس ورکر در پس‌زمینه در حال اجراست و منتظر رویدادهاست.
5. به‌روزرسانی (Update): نسخه جدیدی از سرویس ورکر شناسایی می‌شود که فرآیند به‌روزرسانی را آغاز می‌کند.
6. خاتمه (Termination): سرویس ورکر برای صرفه‌جویی در منابع توسط مرورگر خاتمه می‌یابد.

پیاده‌سازی سرویس ورکر: راهنمای گام به گام

۱. ثبت سرویس ورکر

اولین قدم، ثبت سرویس ورکر در فایل جاوا اسکریپت اصلی شماست (مثلاً `app.js`).

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

            

              
                Copy
              
            
          

این کد بررسی می‌کند که آیا API `serviceWorker` توسط مرورگر پشتیبانی می‌شود یا خیر. اگر پشتیبانی شود، فایل `service-worker.js` را ثبت می‌کند. مدیریت خطاهای احتمالی در حین ثبت برای ارائه یک جایگزین مناسب (graceful fallback) برای مرورگرهایی که از سرویس ورکر پشتیبانی نمی‌کنند، مهم است.

۲. ایجاد فایل سرویس ورکر (service-worker.js)

اینجا جایی است که منطق اصلی سرویس ورکر شما قرار دارد. بیایید با مرحله نصب شروع کنیم.

نصب

در طول مرحله نصب، شما معمولاً دارایی‌های ضروری را که برای عملکرد PWA شما در حالت آفلاین لازم است، کش می‌کنید. این شامل HTML، CSS، جاوا اسکریپت و به طور بالقوه تصاویر و فونت‌ها می‌شود.

            const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/images/logo.png',
  '/manifest.json'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

            

              
                Copy
              
            
          

این کد یک نام برای کش (`CACHE_NAME`) و آرایه‌ای از URLها برای کش کردن (`urlsToCache`) تعریف می‌کند. شنونده رویداد `install` زمانی که سرویس ورکر نصب می‌شود، فعال می‌گردد. متد `event.waitUntil()` تضمین می‌کند که فرآیند نصب قبل از فعال شدن سرویس ورکر تکمیل شود. در داخل آن، ما یک کش با نام مشخص شده باز کرده و تمام URLها را به آن اضافه می‌کنیم. در نظر داشته باشید که به نام کش خود نسخه‌بندی اضافه کنید (`my-pwa-cache-v1`) تا هنگام به‌روزرسانی برنامه، به راحتی کش را نامعتبر کنید.

فعال‌سازی

مرحله فعال‌سازی زمانی است که سرویس ورکر شما فعال شده و شروع به کنترل درخواست‌های شبکه می‌کند. پاک کردن کش‌های قدیمی در این مرحله یک عمل خوب است.

            self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

            

              
                Copy
              
            
          

این کد لیستی از تمام نام‌های کش را دریافت کرده و هر کشی را که در `cacheWhitelist` نباشد، حذف می‌کند. این کار تضمین می‌کند که PWA شما همیشه از آخرین نسخه دارایی‌هایتان استفاده می‌کند.

واکشی منابع

شنونده رویداد `fetch` هر بار که مرورگر یک درخواست شبکه ارسال می‌کند، فعال می‌شود. اینجاست که می‌توانید درخواست را رهگیری کرده و محتوای کش شده را ارائه دهید، یا اگر منبع در کش نباشد، آن را از شبکه واکشی کنید.

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // Not in cache - fetch and add to cache
        return fetch(event.request).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have two independent copies.
            const responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

            

              
                Copy
              
            
          

این کد ابتدا بررسی می‌کند که آیا منبع درخواستی در کش موجود است یا خیر. اگر باشد، پاسخ کش شده را برمی‌گرداند. اگر نباشد، منبع را از شبکه واکشی می‌کند. اگر درخواست شبکه موفقیت‌آمیز باشد، پاسخ را کلون (clone) کرده و قبل از بازگرداندن آن به مرورگر، به کش اضافه می‌کند. این استراتژی به عنوان اول کش، سپس شبکه (Cache-First, then Network) شناخته می‌شود.

استراتژی‌های کشینگ

استراتژی‌های مختلف کشینگ برای انواع مختلف منابع مناسب هستند. در اینجا برخی از استراتژی‌های رایج آورده شده است:

• اول کش، سپس شبکه (Cache-First, then Network): سرویس ورکر ابتدا بررسی می‌کند که آیا منبع در کش وجود دارد یا خیر. اگر باشد، پاسخ کش شده را برمی‌گرداند. اگر نباشد، منبع را از شبکه واکشی کرده و به کش اضافه می‌کند. این یک استراتژی خوب برای دارایی‌های ایستا مانند HTML، CSS و جاوا اسکریپت است.
• اول شبکه، سپس کش (Network-First, then Cache): سرویس ورکر ابتدا سعی می‌کند منبع را از شبکه واکشی کند. اگر درخواست شبکه موفقیت‌آمیز باشد، پاسخ شبکه را برمی‌گرداند و به کش اضافه می‌کند. اگر درخواست شبکه با شکست مواجه شود (مثلاً به دلیل حالت آفلاین)، پاسخ کش شده را برمی‌گرداند. این یک استراتژی خوب برای محتوای پویا است که باید به‌روز باشد.
• فقط کش (Cache Only): سرویس ورکر فقط منابع را از کش برمی‌گرداند. این یک استراتژی خوب برای دارایی‌هایی است که احتمال تغییر آن‌ها کم است.
• فقط شبکه (Network Only): سرویس ورکر همیشه منابع را از شبکه واکشی می‌کند. این یک استراتژی خوب برای منابعی است که باید همیشه به‌روز باشند.
• کهنه-هنگام-اعتبارسنجی مجدد (Stale-While-Revalidate): سرویس ورکر پاسخ کش شده را بلافاصله برمی‌گرداند و سپس منبع را در پس‌زمینه از شبکه واکشی می‌کند. وقتی درخواست شبکه کامل شد، کش را با پاسخ جدید به‌روز می‌کند. این کار بارگذاری اولیه سریع را فراهم می‌کند و تضمین می‌کند که کاربر در نهایت آخرین محتوا را مشاهده می‌کند.

انتخاب استراتژی کشینگ مناسب به نیازمندی‌های خاص PWA شما و نوع منبع درخواستی بستگی دارد. فرکانس به‌روزرسانی‌ها، اهمیت به‌روز بودن داده‌ها و ویژگی‌های عملکردی مورد نظر را در نظر بگیرید.

مدیریت به‌روزرسانی‌ها

هنگامی که شما سرویس ورکر خود را به‌روز می‌کنید، مرورگر تغییرات را شناسایی کرده و فرآیند به‌روزرسانی را آغاز می‌کند. سرویس ورکر جدید در پس‌زمینه نصب خواهد شد و زمانی که تمام تب‌های باز که از سرویس ورکر قدیمی استفاده می‌کنند بسته شوند، فعال خواهد شد. شما می‌توانید با فراخوانی `skipWaiting()` در داخل رویداد install و `clients.claim()` در داخل رویداد activate، به‌روزرسانی را اجباری کنید.

            self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      }).then(() => self.skipWaiting())
  );
});

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    }).then(() => self.clients.claim())
  );
});

            

              
                Copy
              
            
          

`skipWaiting()` سرویس ورکر در حال انتظار را مجبور می‌کند تا به سرویس ورکر فعال تبدیل شود. `clients.claim()` به سرویس ورکر اجازه می‌دهد تا تمام کلاینت‌های درون محدوده خود را کنترل کند، حتی آنهایی که بدون آن شروع به کار کرده‌اند.

اعلان‌های پوش

سرویس ورکرها اعلان‌های پوش را فعال می‌کنند و به شما امکان می‌دهند تا کاربران را حتی زمانی که فعالانه از PWA شما استفاده نمی‌کنند، دوباره درگیر کنید. این کار نیازمند استفاده از Push API و یک سرویس پوش مانند Firebase Cloud Messaging (FCM) است.

توجه: راه‌اندازی اعلان‌های پوش پیچیده‌تر است و به اجزای سمت سرور نیاز دارد. این بخش یک نمای کلی سطح بالا ارائه می‌دهد.

1. مشترک کردن کاربر (Subscribe the User): از کاربر برای ارسال اعلان‌های پوش اجازه بگیرید. اگر اجازه داده شد، یک اشتراک پوش از مرورگر دریافت کنید.
2. ارسال اشتراک به سرور شما: اشتراک پوش را به سرور خود ارسال کنید. این اشتراک حاوی اطلاعات لازم برای ارسال پیام‌های پوش به مرورگر کاربر است.
3. ارسال پیام‌های پوش: از یک سرویس پوش مانند FCM برای ارسال پیام‌های پوش به مرورگر کاربر با استفاده از اشتراک پوش استفاده کنید.
4. مدیریت پیام‌های پوش در سرویس ورکر: در سرویس ورکر خود، به رویداد `push` گوش دهید و یک اعلان به کاربر نمایش دهید.

در اینجا یک مثال ساده از مدیریت رویداد `push` در سرویس ورکر شما آمده است:

            self.addEventListener('push', event => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/images/icon.png'
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

            

              
                Copy
              
            
          

همگام‌سازی پس‌زمینه

همگام‌سازی پس‌زمینه به شما امکان می‌دهد تا وظایف را تا زمانی که کاربر به یک اتصال اینترنتی پایدار دسترسی پیدا کند، به تعویق بیندازید. این برای سناریوهایی مانند ارسال فرم‌ها یا آپلود فایل‌ها زمانی که کاربر آفلاین است، مفید است.

1. ثبت برای همگام‌سازی پس‌زمینه: در فایل جاوا اسکریپت اصلی خود، برای همگام‌سازی پس‌زمینه با استفاده از `navigator.serviceWorker.ready.then(registration => registration.sync.register('my-sync'));` ثبت‌نام کنید.
2. مدیریت رویداد Sync در سرویس ورکر: در سرویس ورکر خود، به رویداد `sync` گوش دهید و وظیفه به تعویق افتاده را انجام دهید.

در اینجا یک مثال ساده از مدیریت رویداد `sync` در سرویس ورکر شما آمده است:

            self.addEventListener('sync', event => {
  if (event.tag === 'my-sync') {
    event.waitUntil(
      // Perform the deferred task here
      doSomething()
    );
  }
});

            

              
                Copy
              
            
          

بهترین شیوه‌ها برای پیاده‌سازی سرویس ورکر

• سرویس ورکر خود را کوچک و کارآمد نگه دارید: یک سرویس ورکر بزرگ می‌تواند PWA شما را کند کند.
• از استراتژی کشینگی استفاده کنید که برای نوع منبع درخواستی مناسب باشد: منابع مختلف به استراتژی‌های کشینگ متفاوتی نیاز دارند.
• خطاها را به خوبی مدیریت کنید: برای مرورگرهایی که از سرویس ورکر پشتیبانی نمی‌کنند یا زمانی که سرویس ورکر با شکست مواجه می‌شود، یک تجربه جایگزین ارائه دهید.
• سرویس ورکر خود را به طور کامل آزمایش کنید: از ابزارهای توسعه‌دهنده مرورگر برای بازرسی سرویس ورکر خود و اطمینان از عملکرد صحیح آن استفاده کنید.
• دسترسی‌پذیری جهانی را در نظر بگیرید: PWA خود را طوری طراحی کنید که برای کاربران دارای معلولیت، صرف نظر از مکان یا دستگاهشان، قابل دسترس باشد.
• از HTTPS استفاده کنید: سرویس ورکرها برای تضمین امنیت به HTTPS نیاز دارند.
• عملکرد را نظارت کنید: از ابزارهایی مانند Lighthouse برای نظارت بر عملکرد PWA خود و شناسایی زمینه‌های بهبود استفاده کنید.

اشکال‌زدایی سرویس ورکرها

اشکال‌زدایی سرویس ورکرها می‌تواند چالش‌برانگیز باشد، اما ابزارهای توسعه‌دهنده مرورگر چندین ویژگی را برای کمک به شما در عیب‌یابی مشکلات ارائه می‌دهند:

• تب Application: تب Application در Chrome DevTools اطلاعاتی در مورد سرویس ورکر شما، از جمله وضعیت، محدوده و رویدادهای آن را ارائه می‌دهد.
• کنسول (Console): از کنسول برای ثبت پیام‌ها از سرویس ورکر خود استفاده کنید.
• تب Network: تب Network تمام درخواست‌های شبکه ارسال شده توسط PWA شما را نشان می‌دهد و مشخص می‌کند که آیا از کش یا از شبکه ارائه شده‌اند.

ملاحظات بین‌المللی‌سازی و بومی‌سازی

هنگام ساخت PWA برای مخاطبان جهانی، جنبه‌های بین‌المللی‌سازی و بومی‌سازی زیر را در نظر بگیرید:

• پشتیبانی از زبان: از ویژگی `lang` در HTML خود برای مشخص کردن زبان PWA خود استفاده کنید. ترجمه برای تمام محتوای متنی ارائه دهید.
• قالب‌بندی تاریخ و زمان: از شیء `Intl` برای قالب‌بندی تاریخ و زمان مطابق با منطقه کاربر استفاده کنید.
• قالب‌بندی اعداد: از شیء `Intl` برای قالب‌بندی اعداد مطابق با منطقه کاربر استفاده کنید.
• قالب‌بندی ارز: از شیء `Intl` برای قالب‌بندی ارزها مطابق با منطقه کاربر استفاده کنید.
• پشتیبانی از راست‌به‌چپ (RTL): اطمینان حاصل کنید که PWA شما از زبان‌های RTL مانند عربی و عبری پشتیبانی می‌کند.
• شبکه تحویل محتوا (CDN): از یک CDN برای تحویل دارایی‌های PWA خود از سرورهای واقع در سراسر جهان استفاده کنید تا عملکرد برای کاربران در مناطق مختلف بهبود یابد.

به عنوان مثال، یک PWA را در نظر بگیرید که خدمات تجارت الکترونیک ارائه می‌دهد. قالب تاریخ باید با مکان کاربر سازگار شود. در ایالات متحده، استفاده از MM/DD/YYYY رایج است، در حالی که در اروپا، DD/MM/YYYY ترجیح داده می‌شود. به طور مشابه، نمادهای ارز و قالب‌بندی اعداد باید متناسب با آن تطبیق داده شوند. یک کاربر در ژاپن انتظار دارد قیمت‌ها به JPY با قالب‌بندی مناسب نمایش داده شوند.

ملاحظات دسترسی‌پذیری

دسترسی‌پذیری برای قابل استفاده کردن PWA شما توسط همه، از جمله کاربران دارای معلولیت، حیاتی است. جنبه‌های دسترسی‌پذیری زیر را در نظر بگیرید:

• HTML معنایی (Semantic HTML): از عناصر HTML معنایی برای ارائه ساختار و معنا به محتوای خود استفاده کنید.
• ویژگی‌های ARIA: از ویژگی‌های ARIA برای افزایش دسترسی‌پذیری PWA خود استفاده کنید.
• ناوبری با صفحه‌کلید: اطمینان حاصل کنید که PWA شما به طور کامل با استفاده از صفحه‌کلید قابل ناوبری است.
• سازگاری با صفحه‌خوان (Screen Reader): PWA خود را با یک صفحه‌خوان آزمایش کنید تا اطمینان حاصل کنید که برای کاربرانی که نابینا یا کم‌بینا هستند، قابل دسترس است.
• کنتراست رنگ: از کنتراست رنگ کافی بین متن و رنگ‌های پس‌زمینه استفاده کنید تا PWA شما برای کاربران کم‌بینا خوانا باشد.

به عنوان مثال، اطمینان حاصل کنید که تمام عناصر تعاملی دارای برچسب‌های ARIA مناسب هستند تا کاربران صفحه‌خوان بتوانند هدف آنها را درک کنند. ناوبری با صفحه‌کلید باید بصری باشد و ترتیب فوکوس واضحی داشته باشد. متن باید کنتراست کافی در برابر پس‌زمینه داشته باشد تا برای کاربران با اختلالات بینایی مناسب باشد.

نتیجه‌گیری

سرویس ورکرها ابزاری قدرتمند برای ساخت PWAهای قوی و جذاب هستند. با درک چرخه حیات سرویس ورکر، پیاده‌سازی استراتژی‌های کشینگ و مدیریت به‌روزرسانی‌ها، می‌توانید PWAهایی ایجاد کنید که یک تجربه کاربری یکپارچه، حتی در حالت آفلاین، ارائه می‌دهند. هنگام ساخت برای مخاطبان جهانی، به یاد داشته باشید که بین‌المللی‌سازی، بومی‌سازی و دسترسی‌پذیری را در نظر بگیرید تا اطمینان حاصل کنید که PWA شما برای همه، صرف نظر از مکان، زبان یا توانایی آنها، قابل استفاده است. با پیروی از بهترین شیوه‌های ذکر شده در این راهنما، می‌توانید بر پیاده‌سازی سرویس ورکر مسلط شوید و PWAهای استثنایی ایجاد کنید که نیازهای یک پایگاه کاربری متنوع جهانی را برآورده می‌کنند.