DevGuide 🇵🇸

إزاي الموقع بيشتغل من غير انترنت؟ 🌐
.
.
عمرك فكرت إزاي ممكن تفتح موقع ويب ويفضل يشتغل حتى لو الإنترنت فصل؟ أو تلاقي الموقع سريع جدًا كأنه مخزن كل حاجة عندك؟ السر هنا في الـ Service Workers.

الـ Service Workers بتلعب دور كبير في تحسين تجربة المستخدم، كمان بتخلي المواقع تشتغل بسرعة وكفاءة حتى في حالة انقطاع الإنترنت.

تعال نفهم الموضوع ببساطة...

———

📌 يعني إيه Service Worker؟

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

- الـ (Caching): يعني يحفظ ملفات الموقع عندك على الجهاز عشان يفتح بسرعة حتى لو الإنترنت ضعيف.
- العمل أوفلاين: الموقع يشتغل حتى لو الإنترنت قاطع.
- الـ (Push Notifications): الرسائل اللي بتجيلك من الموقع حتى لو مش فاتح الصفحة.

———

📌 إزاي الـ Service Workers بتشتغل؟

1- التسجيل (Registration): أول ما المستخدم يفتح الموقع، الـ Service Worker بيتسجل مرة واحدة.
2- التثبيت (Installation): هنا يقدر يبدأ يشتغل ويحفظ الملفات اللي محتاجها.
3- الحدث (Fetch Event): لما المستخدم يطلب أي حاجة (زي صورة أو صفحة)، الـ Service Worker يقرر يجيبها من الكاش ولا من السيرفر.

———

✅ مميزات الـ Service Workers:

- أداء أفضل: لأنه بيقلل الضغط على السيرفر.
- تجربة مستخدم ممتازة: من ناحية السرعة وإمكانية التشغل بدون إنترنت.
- الأمان: لازم الـ Service Workers يشتغلوا على HTTPS عشان يحافظوا على بيانات المستخدم.

———

📌 ملحوظات مهمة

📍 الـ Service Workers محتاجة تخطيط كويس عشان متعملش كاش للملفات زيادة عن اللزوم.
📍 مش كل المميزات بتشتغل في كل المتصفحات، فلازم تعمل حسابك.

———

إزاي ممكن تضيف الـ Service Workers في مشروعك؟ 🤔

الكود الأساسي بسيط جدًا:

// Register Service Worker
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js")
    .then(() => {
      console.log("Service Worker Registered!");
    });
}

———

أما في ملف sw.js:

self.addEventListener("install", (event) => {
  console.log("Service Worker Installed");
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

———

لو عاوز تتعمق في الموضوع وتعرف تفاصيل أكتر 👇

Service Worker API
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

Service workers
https://web.dev/learn/pwa/service-workers

———

لو شايف إن البوست ده مفيد، ادعمه بـ Like أو Share عشان الكل يستفيد. 💡

وفقكم الله لكل خير 🌿

❤16

www.tgoop.com/the_developer_guide/5524

904 viewsAug 14 at 07:34

إزاي الموقع بيشتغل من غير انترنت؟ 🌐
.
.
عمرك فكرت إزاي ممكن تفتح موقع ويب ويفضل يشتغل حتى لو الإنترنت فصل؟ أو تلاقي الموقع سريع جدًا كأنه مخزن كل حاجة عندك؟ السر هنا في الـ Service Workers.

الـ Service Workers بتلعب دور كبير في تحسين تجربة المستخدم، كمان بتخلي المواقع تشتغل بسرعة وكفاءة حتى في حالة انقطاع الإنترنت.

تعال نفهم الموضوع ببساطة...

———

📌 يعني إيه Service Worker؟

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

- الـ (Caching): يعني يحفظ ملفات الموقع عندك على الجهاز عشان يفتح بسرعة حتى لو الإنترنت ضعيف.
- العمل أوفلاين: الموقع يشتغل حتى لو الإنترنت قاطع.
- الـ (Push Notifications): الرسائل اللي بتجيلك من الموقع حتى لو مش فاتح الصفحة.

———

📌 إزاي الـ Service Workers بتشتغل؟

1- التسجيل (Registration): أول ما المستخدم يفتح الموقع، الـ Service Worker بيتسجل مرة واحدة.
2- التثبيت (Installation): هنا يقدر يبدأ يشتغل ويحفظ الملفات اللي محتاجها.
3- الحدث (Fetch Event): لما المستخدم يطلب أي حاجة (زي صورة أو صفحة)، الـ Service Worker يقرر يجيبها من الكاش ولا من السيرفر.

———

✅ مميزات الـ Service Workers:

- أداء أفضل: لأنه بيقلل الضغط على السيرفر.
- تجربة مستخدم ممتازة: من ناحية السرعة وإمكانية التشغل بدون إنترنت.
- الأمان: لازم الـ Service Workers يشتغلوا على HTTPS عشان يحافظوا على بيانات المستخدم.

———

📌 ملحوظات مهمة

📍 الـ Service Workers محتاجة تخطيط كويس عشان متعملش كاش للملفات زيادة عن اللزوم.
📍 مش كل المميزات بتشتغل في كل المتصفحات، فلازم تعمل حسابك.

———

إزاي ممكن تضيف الـ Service Workers في مشروعك؟ 🤔

الكود الأساسي بسيط جدًا:

// Register Service Worker
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js")
    .then(() => {
      console.log("Service Worker Registered!");
    });
}

self.addEventListener("install", (event) => {
  console.log("Service Worker Installed");
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

BY DevGuide 🇵🇸