1. مرحبًا
في هذا الدرس التطبيقي، ستأخذ تطبيق ويب حالي وتجعله يعمل بلا اتصال بالإنترنت. هذا هو الدرس التطبيقي الأول في سلسلة من الدروس التطبيقية المصاحبة لورشة عمل تطبيقات الويب التقدّمية. تتضمّن هذه السلسلة سبعة دروس برمجية أخرى.
أهداف الدورة التعليمية
- كتابة مشغّل الخدمات يدويًا
- إضافة Service Worker إلى تطبيق ويب حالي
- استخدام Service Worker وواجهة برمجة التطبيقات Cache Storage API لإتاحة الموارد بلا إنترنت
ما يتعين عليك معرفته
- HTML وJavaScript الأساسيتان
المتطلبات
- متصفّح يتوافق مع Service Workers
2. إكمال الإعداد
ابدأ إما باستنساخ الرمز الأولي أو تنزيله لإكمال هذا الدرس التطبيقي حول الترميز:
إذا نسخت المستودع، تأكَّد من أنّك تستخدم الفرع starter. يحتوي ملف ZIP أيضًا على الرمز الخاص بهذا الفرع.
يتطلّب هذا الرمز الأساسي الإصدار 14 من Node.js أو إصدارًا أحدث. بعد توفّر الرمز، شغِّل npm ci من سطر الأوامر في مجلد الرمز لتثبيت جميع الملفات التابعة التي ستحتاج إليها. بعد ذلك، شغِّل npm start لبدء خادم التطوير الخاص بتجربة البرمجة.
يقدّم ملف README.md لرمز المصدر شرحًا لجميع الملفات الموزّعة. بالإضافة إلى ذلك، إليك الملفات الرئيسية الحالية التي ستعمل عليها خلال هذا الدرس العملي:
الملفات الرئيسية
-
js/main.js: ملف JavaScript الرئيسي للتطبيق -
service-worker.js- ملف مشغّل الخدمات الخاص بالتطبيق
3- اختبار بلا إنترنت
قبل إجراء أي تغييرات، لنختبر ما إذا كان تطبيق الويب لا يعمل حاليًا بلا اتصال بالإنترنت. لإجراء ذلك، يمكنك إيقاف اتصال الكمبيوتر بالإنترنت وإعادة تحميل تطبيق الويب، أو إذا كنت تستخدم Chrome:
- افتح "أدوات مطوّري البرامج في Chrome".
- التبديل إلى علامة التبويب "التطبيق"
- الانتقال إلى قسم "برامج الخدمة"
- ضَع علامة في مربّع الاختيار "بلا إنترنت".
- إعادة تحميل الصفحة بدون إغلاق "أدوات مطوّري البرامج في 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.log تتوافق مع الأحداث المختلفة في عامل الخدمة.
بعد ذلك، أوقِف الاتصال بالإنترنت مرة أخرى وأعِد تحميل الموقع الإلكتروني. من المفترض أن يتم تحميلها حتى لو كنت غير متصل بالإنترنت.
الشرح
أثناء حدث التثبيت الخاص بمشغّل الخدمات، يتم فتح ذاكرة تخزين مؤقت مسماة باستخدام واجهة برمجة التطبيقات Cache Storage API. يتم بعد ذلك تحميل الملفات والمسارات المحدّدة في precacheResources إلى ذاكرة التخزين المؤقت باستخدام الطريقة cache.addAll. يُطلق على هذه العملية اسم التخزين المؤقت المسبق لأنّها تخزّن مجموعة الملفات مؤقتًا بشكل استباقي أثناء عملية التثبيت بدلاً من تخزينها مؤقتًا عند الحاجة إليها أو طلبها.
بعد أن يتحكّم عامل الخدمة في الموقع الإلكتروني، تمر الموارد المطلوبة عبر عامل الخدمة مثل وكيل. يؤدي كل طلب إلى تشغيل حدث جلب يبحث في ذاكرة التخزين المؤقت عن تطابق في عامل الخدمة هذا، وإذا تم العثور على تطابق، يستجيب بالمرجع المخزّن مؤقتًا. في حال عدم العثور على تطابق، يتم طلب المورد بشكل عادي.
يسمح تخزين الموارد مؤقتًا للتطبيق بالعمل بلا إنترنت من خلال تجنُّب طلبات الشبكة. يمكن للتطبيق الآن الاستجابة باستخدام رمز الحالة 200 عند عدم الاتصال بالإنترنت.
5- تهانينا!
لقد تعلّمت كيفية إتاحة تطبيق الويب بلا إنترنت باستخدام عاملي الخدمة وواجهة برمجة التطبيقات الخاصة بمساحة التخزين المؤقت.
إنّ الدرس العملي التالي في السلسلة هو العمل باستخدام Workbox