کار کردن با Service Worker برای آفلاین کردن وب‌سایت

همانطور که در پست قبلی (اینجا) اشاره کردم. یکی از پیش نیاز‌های داشتن یک Progressive Web Application، قابلیت دسترسی آفلاین به سایت است.

در این پست قصد دارم نحوه‌ی برنامه‌نویسی Service Worker ها را بیشتر توضیح دهم.

شکل بالا نمایانگر نحوه‌ی عملکردش است که در اصل همانند یک لایه‌ی میانی بین ارسال ریکوئست به سرور عمل می‌کند و می‌توانید بر اساس آن هر چه را که می‌خواهید کش (cache) کنید.

برای Register کردن:

ابتدا می‌بایست مطمئن شوید که serviceWorker در navigator موجود باشد که به معنی پشتیبانی مرورگر است.

// Check for browser support of service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
 .then(function(registration) {
   // Successful registration
   console.log('successful, scope is:', registration.scope);
 })
 .catch(function(err) {
   // Failed
   console.log('Whoops, error:', error);
});
}


نحوه‌ی Install کردن و Active کردن:

در ابتدا می‌توانید مشخص کنید جه آدرس‌هایی را لازم دارید که در Cache قرار بگیرد. Cache API ها نیز سرویسی است که مرورگر در اختیارتان قرار داده است تا بتوانید Request ها را ذخیره کنید.

var CACHE_NAME = 'my-pwa-cache-v1';
var urlsToCache = [
  '/',
  '/styles/styles.css',
  '/script/webpack-bundle.js'
];
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        // Open a cache and cache our files
        return cache.addAll(urlsToCache);
      })
  );
});

توجه کنید که در سیستم بالا، webpack-bundle نیز که در اصل bundle ایجاد شده توسط webpack است نیز Cache شده است.


فراخوانی و کار کردن آفلاین

در نهایت با گذاشتن addEventListener روی رویداد fetch می‌توانید تمامی request ها را کنترل کنید و در صورت موجود بودن در Cache تنها آن را از خود مرورگر کاربر برگردانید.

self.addEventListener('fetch', function(event) {
    console.log(event.request.url);
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});


توجه کنید که service-worker.js بخشی از جاوااسکریپت صفحه نمی‌باشد، در نتیجه دسترسی به DOM ندارد و در صورتی که میخواهید صفحه را آپدیت کنید لازم است جاوا اسکریپت جدایی آن را انجام دهد.


سوالات خود در مورد Service Worker را در بخش نظرات قرار دهید و برای گرفتن آخرین پست‌ها من را دنبال کنید.