كيفية دمج العاملين في الخدمة في تطبيقات Next.js

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

توفر هذه الميزات تجربة سلسة وسهلة الاستخدام للتطبيقات الأصلية إلى متصفح الويب.

يعد عمال الخدمة مكونًا أساسيًا في إنشاء تطبيقات الويب التقدمية (PWAs).

فهم عمال الخدمة

عامل الخدمة هو نوع من جافا سكريبت عامل الويب الذي يتم تشغيله في الخلفية، بشكل منفصل عن سلسلة JavaScript الرئيسية، بحيث لا يكون محظورًا. وهذا يعني أنه لا يسبب تأخير أو انقطاع لواجهة مستخدم التطبيق أو تفاعل المستخدم معها.

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

التطبيقات الرئيسية لعمال الخدمة

هناك العديد من التطبيقات للعاملين في الخدمة. يشملوا:

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

دمج عمال الخدمة في تطبيقات Next.js

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

خلال المرحلة الأولى، يقوم المتصفح بتسجيل عامل الخدمة. إليك مثال بسيط:

const registerServiceWorker = async () => {
if ("serviceWorker"in navigator) {
 registration = await navigator.serviceWorker.register("/sw.js");
 }
};
registerServiceWorker();

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

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

registration.addEventListener("install", () => {
console.log("Service worker installed");
});
registration.addEventListener("activate", () => {
console.log("Service worker activated");
});

يمكنك تضمين هذا الرمز مباشرة بعد عملية التسجيل. يجب أن يتم تشغيله مباشرة بعد نجاح عملية تسجيل عامل الخدمة.

يمكنك العثور على رمز هذا المشروع في ملف جيثب مخزن.

قم بإنشاء مشروع Next.js

للبدء، قم بتشغيل هذا الأمر لدعم مشروع Next.js محليًا:

npx create-next-app next-project

تتضمن إضافة عامل خدمة إلى تطبيق Next.js الخطوات التالية:

1. قم بتسجيل عامل الخدمة في بيئة النطاق العالمي.
2. قم بإنشاء ملف JavaScript لعامل الخدمة في الدليل العام.

إضافة عامل الخدمة

أولا، قم بتسجيل عامل الخدمة. تحديث src/pages/_app.js الملف على النحو التالي. يضمن تضمين الكود الموجود في هذا الملف أن يقوم عامل الخدمة بالتسجيل عند تحميل التطبيق ولديه حق الوصول إلى جميع أصول التطبيق.

import { useEffect } from'react';
exportdefaultfunctionApp({ Component, pageProps }) {
 useEffect(() => {
if ('serviceWorker'in navigator) {
 navigator.serviceWorker
 .register('/service-worker.js', { scope: '/' })
 .then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
 registration.scope
 );
 })
 .catch((error) => {
console.error('Service worker registration failed:', error);
 });
 }
 }, []);
return<Component {...pageProps} />;
} 

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

في حالة وجود الدعم، فإنه يسجل البرنامج النصي لعامل الخدمة الموجود في مسار الملف المحدد، ويحدد نطاقه كـ "/”. وهذا يعني أن عامل الخدمة لديه السيطرة على كافة الموارد في التطبيق. يمكنك توفير نطاق أكثر تفصيلاً إذا أردت، على سبيل المثال، "/products”.

إذا نجح التسجيل، فإنه يسجل رسالة نجاح مع نطاقه. إذا حدث خطأ أثناء عملية التسجيل، فسوف يلتقطه الرمز ويسجل رسالة خطأ.

تثبيت وتفعيل عامل الخدمة

أضف الكود التالي إلى ملف جديد، public/service-worker.js.

const installEvent = () => {
 self.addEventListener('install', () => {
console.log('service worker installed!!!');
 });
};
installEvent();

const activateEvent = () => {
 self.addEventListener('activate', () => {
console.log('service worker activated!!!');
 });
};
activateEvent();

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

npm run dev

يفتح أدوات مطوري Chrome (أو ما يعادله في المتصفح الخاص بك)، وانتقل إلى طلب فاتورة غير مدفوعة. تحت عمال الخدمة القسم، يجب أن ترى عامل الخدمة الذي قمت بتسجيله.

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

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

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

للتخزين المؤقت لأصول التطبيق، قم بتضمين الكود التالي في ملف خدمة عامل.js ملف.

const cacheName = 'test-cache';
self.addEventListener('fetch', (event) => {
 event.respondWith(
 caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
return caches.open(cacheName).then((cache) => {
 cache.put(event.request, response.clone());
return response;
 });
 });
 })
 );
});

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

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

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

الآن، بمجرد زيارتك للصفحة الرئيسية، سيخدم المتصفح الموارد المخزنة في ذاكرة التخزين المؤقت بدلاً من محاولة تقديم طلبات الشبكة لجلب البيانات.

استخدام عمال الخدمة لتعزيز الأداء

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

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