پیمایش با Service Worker در فرانت‌اند: رهگیری بارگذاری صفحه

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

رهگیری بارگذاری صفحه چیست؟

رهگیری بارگذاری صفحه، در زمینه Service Workerها، به توانایی Service Worker برای رهگیری رویدادهای `fetch` اشاره دارد که توسط پیمایش کاربر فعال می‌شوند (مانند کلیک کردن روی یک لینک، تایپ کردن یک URL در نوار آدرس، یا استفاده از دکمه‌های بازگشت/جلو مرورگر). وقتی یک درخواست پیمایش رهگیری می‌شود، Service Worker می‌تواند تصمیم بگیرد که چگونه با درخواست برخورد کند. این می‌تواند:

• یک پاسخ کش‌شده را ارائه دهد.
• منبع را از شبکه واکشی کند.
• به یک URL دیگر تغییر مسیر دهد.
• یک صفحه آفلاین نمایش دهد.
• منطق سفارشی دیگری را اجرا کند.

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

چرا بارگذاری صفحات را رهگیری کنیم؟

رهگیری بارگذاری صفحات با یک Service Worker مزایای متعددی دارد:

۱. قابلیت‌های آفلاین پیشرفته

یکی از مهم‌ترین مزایا، توانایی فراهم کردن دسترسی آفلاین به اپلیکیشن شماست. با کش کردن دارایی‌ها و داده‌های حیاتی، Service Worker می‌تواند محتوای کش‌شده را زمانی که کاربر آفلاین است ارائه دهد و تجربه‌ای یکپارچه حتی بدون اتصال به اینترنت ایجاد کند. تصور کنید کاربری در توکیو در حال سفر با مترو اتصال خود را از دست می‌دهد. یک service worker که به خوبی پیکربندی شده باشد، تضمین می‌کند که صفحات بازدید شده قبلی همچنان در دسترس باقی بمانند.

۲. عملکرد بهبود یافته

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

۳. تجربیات پیمایش سفارشی‌سازی شده

Service Workerها به شما اجازه می‌دهند تا تجربه پیمایش را بر اساس عوامل مختلفی مانند وضعیت شبکه کاربر، نوع دستگاه یا موقعیت مکانی سفارشی کنید. برای مثال، می‌توانید کاربران را به نسخه ساده‌تری از سایت خود در هنگام اتصال کند هدایت کنید یا یک پیام آفلاین شخصی‌سازی شده نمایش دهید.

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

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

۵. به‌روزرسانی داده‌ها در پس‌زمینه

Service Workerها می‌توانند به‌روزرسانی‌های داده را در پس‌زمینه انجام دهند و اطمینان حاصل کنند که داده‌های اپلیکیشن شما همیشه تازه است، حتی زمانی که کاربر به طور فعال از برنامه استفاده نمی‌کند. این می‌تواند با کاهش تأخیر درک شده و فراهم کردن دسترسی فوری به آخرین اطلاعات، تجربه کاربری را بهبود بخشد.

چگونه با Service Worker بارگذاری صفحات را رهگیری کنیم

مکانیسم اصلی برای رهگیری بارگذاری صفحات، شنونده رویداد `fetch` در Service Worker شماست. در اینجا یک راهنمای گام به گام آورده شده است:

۱. ثبت Service Worker

ابتدا، باید Service Worker را در فایل اصلی جاوا اسکریپت خود ثبت کنید:

            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
              
            
          

این کد بررسی می‌کند که آیا مرورگر از Service Worker پشتیبانی می‌کند یا خیر و سپس فایل `service-worker.js` را ثبت می‌کند. بسیار مهم است که اطمینان حاصل کنید فایل `service-worker.js` با نوع MIME صحیح (معمولاً `application/javascript`) ارائه می‌شود.

۲. گوش دادن به رویداد fetch

در داخل فایل `service-worker.js` خود، باید به رویداد `fetch` گوش دهید. این رویداد هر زمان که مرورگر یک درخواست شبکه ایجاد می‌کند، از جمله درخواست‌های پیمایش، فعال می‌شود:

            self.addEventListener('fetch', event => {
  // Intercept navigation requests here
});

            

              
                Copy
              
            
          

۳. تشخیص اینکه آیا درخواست برای پیمایش است

همه رویدادهای `fetch` درخواست‌های پیمایش نیستند. شما باید با بررسی خاصیت `mode` درخواست، تشخیص دهید که آیا درخواست فعلی یک درخواست پیمایش است یا خیر:

            self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    // This is a navigation request
  }
});

            

              
                Copy
              
            
          

توجه: برخی از مرورگرهای قدیمی‌تر ممکن است از `event.request.mode === 'navigate'` پشتیبانی نکنند. در این موارد، می‌توانید از روش‌های اکتشافی دیگر، مانند بررسی هدر `Accept` برای `text/html` استفاده کنید.

۴. پیاده‌سازی منطق مدیریت پیمایش خود

هنگامی که یک درخواست پیمایش را شناسایی کردید، می‌توانید منطق سفارشی خود را پیاده‌سازی کنید. در اینجا چند سناریوی رایج آورده شده است:

ارائه از کش

ساده‌ترین رویکرد این است که سعی کنید منبع درخواستی را از کش ارائه دهید. این برای دارایی‌های ثابت و صفحات بازدید شده قبلی ایده‌آل است:

            self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      caches.match(event.request)
        .then(response => {
          if (response) {
            // Return the cached response
            return response;
          }

          // Fetch the resource from the network if it's not in the cache
          return fetch(event.request);
        })
    );
  }
});

            

              
                Copy
              
            
          

این کد ابتدا بررسی می‌کند که آیا منبع درخواستی در کش موجود است یا خیر. اگر موجود باشد، پاسخ کش‌شده بازگردانده می‌شود. در غیر این صورت، منبع از شبکه واکشی می‌شود.

ارائه یک صفحه آفلاین

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

            self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      caches.match(event.request)
        .then(response => {
          if (response) {
            return response;
          }

          // Fetch the resource from the network
          return fetch(event.request)
            .catch(error => {
              // User is offline and resource is not in cache
              return caches.match('/offline.html'); // Serve an offline page
            });
        })
    );
  }
});

            

              
                Copy
              
            
          

در این مثال، اگر درخواست `fetch` با شکست مواجه شود (به دلیل آفلاین بودن کاربر)، Service Worker صفحه `/offline.html` را ارائه می‌دهد. شما باید این صفحه را ایجاد کرده و آن را در طول فرآیند نصب Service Worker کش کنید.

کشینگ پویا

برای به‌روز نگه داشتن کش خود، می‌توانید منابع را به صورت پویا همزمان با واکشی از شبکه کش کنید. این اغلب به عنوان استراتژی «ابتدا کش، سپس شبکه» نامیده می‌شود:

            self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      caches.match(event.request)
        .then(response => {
          // Serve from cache if available
          if (response) {
            return response;
          }

          // Fetch from network and cache
          return fetch(event.request)
            .then(networkResponse => {
              // Clone the response (because it can only be consumed once)
              const cacheResponse = networkResponse.clone();

              caches.open('my-cache') // Choose a cache name
                .then(cache => {
                  cache.put(event.request, cacheResponse);
                });

              return networkResponse;
            });
        })
    );
  }
});

            

              
                Copy
              
            
          

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

۵. کش کردن دارایی‌های حیاتی در حین نصب Service Worker

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

            self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache')
      .then(cache => {
        return cache.addAll([
          '/',
          '/index.html',
          '/style.css',
          '/app.js',
          '/offline.html',
          '/images/logo.png'
          // Add all other critical assets here
        ]);
      })
  );
});

            

              
                Copy
              
            
          

این کد یک کش به نام "my-cache" را باز می‌کند و لیستی از دارایی‌های حیاتی را به آن اضافه می‌کند. متد `event.waitUntil()` تضمین می‌کند که Service Worker تا زمانی که تمام دارایی‌ها کش نشده‌اند، فعال نشود.

تکنیک‌های پیشرفته

۱. استفاده از Navigation API

Navigation API روشی مدرن‌تر و انعطاف‌پذیرتر برای مدیریت درخواست‌های پیمایش در Service Workerها ارائه می‌دهد. این API ویژگی‌هایی مانند موارد زیر را ارائه می‌دهد:

• مدیریت پیمایش اعلانی.
• توانایی رهگیری و اصلاح درخواست‌های پیمایش.
• ادغام با history API مرورگر.

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

۲. مدیریت انواع مختلف پیمایش

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

۳. پیاده‌سازی Stale-While-Revalidate

استراتژی کشینگ stale-while-revalidate به شما امکان می‌دهد محتوای کش‌شده را بلافاصله ارائه دهید در حالی که به طور همزمان کش را در پس‌زمینه به‌روز می‌کنید. این یک بارگذاری اولیه سریع را فراهم می‌کند و تضمین می‌کند که محتوا همیشه به‌روز است. این یک گزینه خوب برای داده‌هایی است که به طور مکرر به‌روز می‌شوند اما نیازی به بی‌درنگ بودن کامل ندارند.

۴. استفاده از Workbox

Workbox مجموعه‌ای از کتابخانه‌ها و ابزارهاست که توسعه Service Workerها را آسان‌تر می‌کند. این ابزار انتزاع‌هایی برای کارهای رایج مانند کشینگ، مسیریابی و همگام‌سازی پس‌زمینه فراهم می‌کند و فرآیند توسعه را ساده‌تر کرده و میزان کدهای تکراری که باید بنویسید را کاهش می‌دهد. Workbox استراتژی‌های از پیش ساخته‌شده‌ای را ارائه می‌دهد که بسیاری از این سناریوها را به طور خودکار مدیریت می‌کنند و کدهای تکراری را کاهش می‌دهند.

نمونه‌هایی از رهگیری بارگذاری صفحه در عمل

۱. ویکی‌پدیای آفلاین

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

۲. اپلیکیشن تجارت الکترونیک

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

۳. وب‌سایت خبری

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

بهترین شیوه‌ها

• کد Service Worker خود را سبک نگه دارید: یک Service Worker حجیم می‌تواند سرعت اپلیکیشن شما را کاهش دهد و منابع بیش از حدی مصرف کند.
• از نام‌های کش توصیفی استفاده کنید: نام‌های کش واضح، مدیریت دارایی‌های کش‌شده شما را آسان‌تر می‌کند.
• ابطال کش مناسب را پیاده‌سازی کنید: اطمینان حاصل کنید که محتوای کش‌شده شما هنگام تغییر منابع زیربنایی، به‌روز می‌شود.
• Service Worker خود را به طور کامل آزمایش کنید: از ابزارهای توسعه‌دهنده مرورگر و شبیه‌سازهای آفلاین برای آزمایش رفتار Service Worker خود در شرایط مختلف استفاده کنید.
• یک تجربه آفلاین روان ارائه دهید: هنگامی که کاربر آفلاین است و منبع درخواستی در کش موجود نیست، یک صفحه آفلاین واضح و آموزنده نمایش دهید.
• عملکرد Service Worker خود را نظارت کنید: از ابزارهای نظارت بر عملکرد برای ردیابی عملکرد Service Worker خود و شناسایی تنگناهای بالقوه استفاده کنید.

نتیجه‌گیری

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