هل واجهت موقفًا عندما يستغرق تحميل موقع الويب الكثير مثل هذه الصورة المتحركة أدناه؟

؟ هل سمعت عن عمال الخدمة؟

في هذا المنشور، سنتعمق في ماهية عمال الخدمة؟ وكيف يعملون ⚙️، وكيف استخدمتهم لتحسين أداء تطبيق الويب الخاص بي.

ما هو عامل الخدمة؟ ؟

عامل الخدمة هو برنامج نصي في الخلفية يتم تشغيله بشكل منفصل عن صفحة الويب، ويمكنه:

• أصول ذاكرة التخزين المؤقت ️
• اعتراض طلبات الشبكة؟
• تقديم وظيفة دون اتصال بالإنترنت؟

الخصائص الرئيسية لعمال الخدمة:

1. يعمل في الخلفية: عمال الخدمة غير مرتبطين بدورة حياة الصفحة، مما يعني أنه يمكنهم الاستمرار في التشغيل حتى لو كانت الصفحة مغلقة
2. يعتمد على الأحداث: يستمع عمال الخدمة إلى أحداث معينة، مثل طلبات الشبكة (حدث الجلب)
3. لا يوجد وصول إلى DOM: على عكس العاملين الآخرين على الويب، لا يستطيع عمال الخدمة الوصول إلى DOM مباشرة. تعمل في الخلفية، وتدير الموارد وحركة مرور الشبكة

إليك مثال بسيط على البرنامج النصي لعامل الخدمة:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(error) {
      console.error('Service Worker registration failed:', error);
    });
  });
}

؟ في هذا المقتطف، يتم تسجيل عامل الخدمة (service-worker.js) عند تحميل الصفحة. إذا تم التسجيل بنجاح، فإنه يسجل نطاق عامل الخدمة؛ وإلا فإنه يسجل خطأ.

التحدي الذي يواجهني: دمج لعبة Unity WebGL في صفحة ويب

كنت أقوم بدمج لعبة Unity WebGL في موقع الويب .NET Razor. تتكون اللعبة من ملفات ".wasm" و".data" الكبيرة إلى جانب ملفات JavaScript التي كانت ضرورية لتحميل اللعبة. ومع ذلك، في المرة الأولى التي تم فيها تحميل الصفحة، استغرق الأمر أكثر من 20 ثانية! ؟ ويرجع ذلك في المقام الأول إلى حجم ملفات ".wasm" و".data".

الحل: التخزين المؤقت مع عمال الخدمة

لقد قمت بإنشاء ملف "ServiceWorker.js"، الذي يقوم بتخزين كافة أصول اللعبة الضرورية لتقليل وقت التحميل. إليك ما يحتويه الملف:

const cacheName = "$Project_name";
const contentToCache = [
    "Build/Game.loader.js",
    "Build/Game.framework.js",
    "Build/Game.data",
    "Build/Game.wasm",
    "TemplateData/game_style.css"
];

self.addEventListener('install', function (e) {
    console.log('[Service Worker] Install');

    e.waitUntil((async function () {
        try {
            const cache = await caches.open(cacheName);
            console.log('[Service Worker] Caching all: app shell and content');
            for (const resource of contentToCache) {
                try {
                    await cache.add(resource);
                } catch (error) {
                    console.error(`[Service Worker] Failed to cache: ${resource}`, error);
                }
            }
        } catch (error) {
            console.error('[Service Worker] Failed to open cache', error);
        }
    })());
});

self.addEventListener('fetch', function (e) {
     e.respondWith((async function () {
        try {
            const response = await caches.match(e.request);
            console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
            if (response) return response;

            const fetchResponse = await fetch(e.request);
            const cache = await caches.open(cacheName);
            console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
            await cache.put(e.request, fetchResponse.clone());
            return fetchResponse;
        } catch (error) {
            console.error(`[Service Worker] Error fetching resource: ${e.request.url}`, error);
            throw error;
        }
    })());
});

ماذا يفعل هذا الكود؟

ينفذ البرنامج النصي لعامل الخدمة الإجراءات التالية:

• يقوم بتخزين الملفات الأساسية اللازمة لتشغيل اللعبة، بما في ذلك ملفات ".wasm"، و".data"، وملفات JS أثناء مرحلة التثبيت.
• اعتراض طلبات الجلب لخدمة الموارد المخزنة مؤقتًا إذا كانت متوفرة. إذا لم يكن المورد موجودًا في ذاكرة التخزين المؤقت، فإنه يجلبه من الشبكة ويخزنه مؤقتًا ويعيد الاستجابة.

النتيجة: زيادة كبيرة في الأداء

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

⚠️ كن حذرا! مشكلة التخزين المؤقت

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

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

خاتمة

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

هل كانت لديك تجارب مماثلة في تحسين أوقات التحميل؟ هل استخدمت عمال الخدمة أو تقنيات أخرى؟ شارك أفكارك ورؤيتك في التعليقات أدناه! ?

آمل أن تكون قد تعلمت شيئًا جديدًا اليوم! ✌️