كيفية جعل مدونة جيكيل تعمل بدون اتصال باستخدام خدمة العاملين

[*]تُعتبر تطبيقات الويب التقدمية (PWAs) اليوم من أبرز الابتكارات في عالم تطوير الويب، حيث تُتيح استخدام المواقع بشكلٍ غير متصل بالإنترنت بفضل تقنية الـ Service Workers. في هذا الدليل، سنستعرض كيفية جعل مدونة أو موقع مُعتمد على Jekyll يعمل في وضع عدم الاتصال، مع توضيح لبعض الإمكانيات المثيرة للاهتمام المصاحبة لذلك.

خلفية تقنية Service Workers

[*]كان هناك سابقًا نظام يعتمد على ملفات YAML يُسمى App Cache، ولكنه كان يفتقر إلى القدرة على تخزين الأصول وصفحات الويب بشكل ديناميكي. ومع ظهور Service Workers، أصبح من الممكن استخدام واجهة برمجة تطبيقات JavaScript قائمة على الأحداث لتخزين الأصول، مما يُتيح تقديم الصفحات حتى في حالة عدم توفر اتصال بالإنترنت. تم تقديم Service Workers لأول مرة في Chrome Canary عام 2014، ورغم أن مواصفاته لا تزال قيد التطوير، استضاف فريق Google Chrome الكثير من النقاشات حول هذه التقنية. ومع ذلك، لم تُعتمد Apple هذه التقنية على أجهزتها حتى كتابة هذه السطور.

ما هو Service Worker؟

[*]Service Worker يمكن اعتباره عامل ويب مُعزز. جميع المهام تعمل بشكل غير متزامن، مما يسمح بتشغيل مهام تتطلب قوة CPU أو ذاكرة عالية، مثل حسابات معقدة، دون التأثير على أداء واجهة المستخدم. يتمكن Service Worker من تخزين الأصول مثل JavaScript وHTML والصور في ذاكرة المتصفح، مما يتيح تحميل الصفحات بسرعة، حتى في وضع عدم الاتصال.

كيفية إعداد Service Worker في Jekyll

[*]لتمكين وظيفة العمل دون اتصال في موقع Jekyll، يمكنك إضافة الكود التالي في الصفحات المعنية:

function showOfflineToast() {
  let offlineToast = document.querySelector('.offline-ready');
  offlineToast.classList.add('active');
  setTimeout(function(){ 
    offlineToast.className = offlineToast.className.replace("active", "").trim();
  }, 5500);
}

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/sw.js').then(function(reg) {
      if (!reg.installing) return;
      console.log("[*] ServiceWorker is installing...");

      var worker = reg.installing;

      worker.addEventListener('statechange', function() {
          if (worker.state == 'redundant') {
              console.log('[*] Install failed');
          }
          if (worker.state == 'installed') {
              console.log('[*] Install successful!');
          }
          if (worker.state == 'activated' && !navigator.serviceWorker.controller) {
            showOfflineToast();
          }
      });
  });
}

[*]يمكنك إدراج هذا الكود في ملف يُسمى serviceWorker.html داخل دليل includes واستخدامه في default.html عبر محرك القالب الخاص بـ Jekyll.

الكود الرئيسي لـ Service Worker

[*]الكود الأساسي لـ Service Worker يُخزن في ملف sw.js في جذر المشروع الخاص بك. يجب عليك تعريف الملفات التي ترغب في تخزينها:

const staticCacheName = "gdad-s-river-static-v61";

const filesToCache = [
  "/",
  {% for page in site.html_pages %}
    '{{ page.url }}',
  {% endfor %}
  {% for post in site.posts %}
    '{{ post.url }}',
  {% endfor %}
  "/assets/images/bhavri-github-callbacks.png",
  "css/main.css",
];

[*]عند تنشيط الـ Service Worker، تحتاج إلى إدارة الملفات التي لم تعد مستخدمة وضمان تقديم أحدث نسخة.

استنتاج: جعل مدونة Jekyll تعمل بدون اتصال

[*]بفضل تقنية Service Workers، أصبح بالإمكان تحويل مدونات Jekyll إلى تطبيقات ويب تقدم تجربة استخدام فريدة، حتى في حالة انخفاض الاتصال بالإنترنت.

الأسئلة الشائعة

1. ما هي التطبيقات التقدمية (PWAs)؟

[*]التطبيقات التقدمية (PWAs) هي مواقع ويب تستخدم تقنيات الحديثة لتوفير تجربة مشابهة للتطبيقات الأصلية، تسمح بالعمل دون اتصال وتتضمن ميزات مثل الإشعارات.

2. هل كل المتصفحات تدعم Service Workers؟

[*]معظم المتصفحات الحديثة تدعم Service Workers، باستثناء بعض إصدارات iOS من Safari.

3. كيف يمكن تطبيق Service Workers على مواقع الويب الأخرى؟

[*]يمكن استخدام الكود الخاص بـ Service Workers في أي موقع عن طريق تضمين المحتوى المناسب وفقًا لهيكل الموقع واحتياجاته.

4. هل يحتاج الموقع HTTPS لتفعيل Service Workers؟

[*]نعم، يتطلب تفعيل Service Workers على المواقع أن تكون مؤمنة عبر بروتوكول HTTPS.

5. ما هي فوائد استخدام Service Workers؟

[*]توفر Service Workers إمكانية تحميل الصفحات بشكل أسرع، القدرة على العمل دون اتصال، وتقديم تجربة مستخدم محسنة.