تطبيقات الويب التقدّمية: إتاحة استخدامها بلا إنترنت

1. مرحبًا

في هذا الدرس التطبيقي، ستأخذ تطبيق ويب حالي وتجعله يعمل بلا إنترنت. هذا هو الدرس التطبيقي الأول في سلسلة من الدروس التطبيقية المصاحبة لورشة عمل تطبيقات الويب التقدّمية. تتضمّن هذه السلسلة سبعة دروس برمجية أخرى.

أهداف الدورة التعليمية

• كتابة مشغّل الخدمات يدويًا
• إضافة Service Worker إلى تطبيق ويب حالي
• استخدام Service Worker وCache Storage API لإتاحة الموارد بلا إنترنت

ما يتعين عليك معرفته

• HTML وJavaScript الأساسيتان

المتطلبات

• متصفّح يتوافق مع مشغّلي الخدمات

2. إكمال الإعداد

ابدأ إما باستنساخ الرمز الأولي أو تنزيله المطلوب لإكمال هذا الدرس التطبيقي حول الترميز:

استنساخ مستودع الرموز

file_downloadتنزيل ملف Zip

إذا استنسخت المستودع، تأكَّد من أنّك تستخدم الفرع starter. يحتوي ملف ZIP أيضًا على الرمز البرمجي لهذا الفرع.

يتطلّب هذا الرمز الأساسي الإصدار 14 من Node.js أو إصدارًا أحدث. بعد توفّر الرمز، شغِّل npm ci من سطر الأوامر في مجلد الرمز لتثبيت جميع الملفات التابعة التي ستحتاج إليها. بعد ذلك، شغِّل الأمر npm start لبدء خادم التطوير الخاص بالدرس العملي.

يقدّم ملف README.md لرمز المصدر شرحًا لجميع الملفات الموزّعة. بالإضافة إلى ذلك، إليك الملفات الرئيسية الحالية التي ستعمل عليها خلال هذا الدرس العملي:

الملفات الرئيسية

• js/main.js - ملف JavaScript الرئيسي للتطبيق
• ‫service-worker.js - ملف عامل الخدمة الخاص بالتطبيق

3- اختبار بلا إنترنت

قبل إجراء أي تغييرات، لنختبر ما إذا كان تطبيق الويب لا يعمل حاليًا بلا اتصال بالإنترنت. لإجراء ذلك، إما أن تفصل الكمبيوتر عن الإنترنت وتعيد تحميل تطبيق الويب، أو إذا كنت تستخدم Chrome:

1. افتح "أدوات مطوّري البرامج في Chrome".
2. الانتقال إلى علامة التبويب "التطبيق"
3. التبديل إلى قسم "برامج الخدمة"
4. ضَع علامة في مربّع الاختيار "بلا إنترنت"
5. إعادة تحميل الصفحة بدون إغلاق "أدوات مطوّري البرامج في Chrome"

بعد اختبار الموقع الإلكتروني وعدم تحميله بنجاح في وضع عدم الاتصال بالإنترنت، حان الوقت لإضافة بعض الوظائف المتاحة على الإنترنت. أزِل العلامة من مربّع الاختيار "بلا إنترنت" وانتقِل إلى الخطوة التالية.

4. Take It Offline

حان الوقت لإضافة مشغّل خدمات أساسي. سيتم ذلك على خطوتَين: تسجيل مشغّل الخدمات وتخزين الموارد مؤقتًا.

تسجيل مشغّل خدمات

يتوفّر حاليًا ملف فارغ لمشغّل الخدمات، لذا للتأكّد من ظهور التغييرات، لنُسجّله في تطبيقنا. لإجراء ذلك، أضِف الرمز التالي إلى أعلى ملف js/main.js:

// Register the service worker
if ('serviceWorker' in navigator) {
  // Wait for the 'load' event to not block other work
  window.addEventListener('load', async () => {
    // Try to register the service worker.
    try {
      // Capture the registration for later use, if needed
      let reg;

      // Use ES Module version of our Service Worker in development
      if (import.meta.env?.DEV) {
        reg = await navigator.serviceWorker.register('/service-worker.js', {
          type: 'module',
        });
      } else {
        // In production, use the normal service worker registration
        reg = await navigator.serviceWorker.register('/service-worker.js');
      }

      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

الشرح

يسجّل هذا الرمز البرمجي ملف مشغّل الخدمات service-worker.js الفارغ بعد تحميل الصفحة، وفقط إذا كان الموقع الإلكتروني يتيح مشغّلي الخدمات.

تخزين الموارد مؤقتًا

لكي يعمل تطبيق الويب بلا اتصال بالإنترنت، يجب أن يتمكّن المتصفّح من الاستجابة لطلبات الشبكة واختيار مكان توجيهها. لإجراء ذلك، أضِف ما يلي إلى service-worker.js

// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];

// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
  console.log('Service worker install event!');
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});

self.addEventListener('activate', (event) => {
  console.log('Service worker activate event!');
});

// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request);
    }),
  );
});

الآن، ارجع إلى المتصفّح وأغلِق علامة تبويب المعاينة وأعِد فتحها. من المفترض أن تظهر لك console.logs تتوافق مع الأحداث المختلفة في عامل الخدمة.

بعد ذلك، أوقِف الاتصال بالإنترنت مرة أخرى وأعِد تحميل الموقع الإلكتروني. من المفترض أن يتم تحميلها حتى لو كنت غير متصل بالإنترنت.

الشرح

أثناء حدث التثبيت الخاص بمشغّل الخدمات، يتم فتح ذاكرة تخزين مؤقت مسماة باستخدام Cache Storage API. يتم بعد ذلك تحميل الملفات والمسارات المحدّدة في precacheResources إلى ذاكرة التخزين المؤقت باستخدام الطريقة cache.addAll. يُطلق على ذلك اسم التخزين المؤقت المسبق لأنّه يخزّن مجموعة الملفات مؤقتًا بشكل استباقي أثناء عملية التثبيت بدلاً من تخزينها مؤقتًا عند الحاجة إليها أو طلبها.

بعد أن يتحكّم مشغّل الخدمة في الموقع الإلكتروني، تمر الموارد المطلوبة عبر مشغّل الخدمة مثل خادم وكيل. يؤدي كل طلب إلى تشغيل حدث جلب يبحث في ذاكرة التخزين المؤقت عن تطابق في عامل الخدمة هذا، وإذا تم العثور على تطابق، يستجيب بالمرجع المخزّن مؤقتًا. في حال عدم العثور على تطابق، يتم طلب المورد بشكل عادي.

يسمح تخزين الموارد مؤقتًا للتطبيق بالعمل بلا إنترنت من خلال تجنُّب طلبات الشبكة. يمكن للتطبيق الآن الاستجابة باستخدام رمز الحالة 200 عند عدم الاتصال بالإنترنت.

5- تهانينا!

لقد تعلّمت كيفية إتاحة تطبيق الويب بلا إنترنت باستخدام عاملي الخدمة وواجهة برمجة التطبيقات الخاصة بتخزين البيانات في ذاكرة التخزين المؤقت.

إنّ الدرس التطبيقي حول الترميز التالي في السلسلة هو العمل باستخدام Workbox.