دورة حياة الـ Service Worker

التسجيل

الصفحة هي اللي بتقول للمتصفح “في Service Worker هنا”:

if ("serviceWorker" in navigator) {  navigator.serviceWorker.register("/sw.js", { scope: "/" });}

الـ scope هو المسارات اللي الـ SW هيمسكها. ملف في /app/sw.js مش هيقدر يمسك / إلا لو السيرفر سمح بـ header خاص، فالأسهل تحطه في جذر المسار اللي عايزه.

المراحل

const SHELL = "shell-v2";self.addEventListener("install", (event) => {  // waitUntil: متعتبرش الـ install خلص غير لما الـ promise يخلص  event.waitUntil(caches.open(SHELL).then((c) => c.addAll(["/offline.html"])));});self.addEventListener("activate", (event) => {  event.waitUntil(    caches.keys().then((keys) =>      Promise.all(keys.filter((k) => k.startsWith("shell-") && k !== SHELL).map((k) => caches.delete(k))),    ),  );});self.addEventListener("fetch", (event) => {  // هنا بنقرر نرد منين (الفصل الجاي)});

ليه في مرحلة waiting؟

لو عندك تابة مفتوحة شغالة بالـ SW القديم، والنسخة الجديدة مسكت فجأة، ممكن الصفحة القديمة تطلب ملف مبقاش موجود في الكاش الجديد. عشان كده المتصفح بيخلّي الجديد مستني لحد ما كل التابات القديمة تتقفل.

المتصفح بيعرف إن في نسخة جديدة إزاي؟

لما تفتح صفحة في الـ scope، المتصفح بيجيب sw.js من السيرفر ويقارنه بايت ببايت باللي عنده. أي فرق، حتى حرف في تعليق، يبدأ install للنسخة الجديدة.

خلّصت الفصل لما

• ترتب المراحل: register و install و waiting و activate و fetch
• تعرف تحفظ إيه في install وتمسح إيه في activate
• تشرح ليه في waiting وإمتى تستخدم skipWaiting
• تعرف إن التحديث بيتكشف بمقارنة بايتات sw.js