تطبيقات الويب التقدّمية: العمل بلا إنترنت

1. ترحيب

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

ما ستتعرَّف عليه

• كتابة مشغّل الخدمات يدويًا
• إضافة مشغّل خدمات إلى تطبيق ويب حالي
• استخدام مشغّل الخدمات وواجهة برمجة تطبيقات التخزين في ذاكرة التخزين المؤقت لإتاحة الموارد بلا اتصال بالإنترنت

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

• HTML الأساسي وJavaScript

المتطلبات

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

2. الإعداد

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

نسخ نسخة طبق الأصل

تنزيل ملف Zip

إذا استنسخت الطبق، تأكد من أنك في الفرع starter. يحتوي ملف zip أيضًا على الرمز لهذا الفرع.

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

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

ملفات المفتاح

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

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

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

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

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

4. مشاهدة الفيديوهات بلا إنترنت

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

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

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

import swURL from 'sw:../service-worker.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 {
      const reg = await navigator.serviceWorker.register(swURL);
      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

بنية بنية عنوان URL لعامل الخدمة مطلوبة حتى تتمكن أداة الإنشاء التابعة لنا، WMR من تجميع مشغّل الخدمات بشكل صحيح. إذا لم تكن تستخدم WMR، يمكنك بدلاً من ذلك ضبط swURL على المسار المؤدي إلى مقدّم الخدمة.

الشرح

يُسجِّل هذا الرمز ملف مشغّل الخدمات 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.log متوافقة مع الأحداث المختلفة في مشغّل الخدمات.

إذا لم تظهر لك أحداث console.log، تحقّق من منطقة "مقدّم الخدمة" في علامة التبويب "التطبيقات" للتأكّد من أنّك لا تواجه أي أخطاء مع مشغّل الخدمات وأنّه ليس في حالة الانتظار.

بعد ذلك، عليك استعادة الاتصال بالإنترنت ثم إعادة تحميل الموقع الإلكتروني. ومن المفترض أن يتم تحميل الصفحة حتى إذا لم تكن متصلاً بالإنترنت.

الشرح

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

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

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

5. تهانينا.

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

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