تسجيل وتثبيت Service Worker

// main.js - شغّل هذا في ملف JavaScript الرئيسي الخاص بك if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(registration => { console.log('Service Worker مسجل بنجاح'); console.log('النطاق:', registration.scope); }) .catch(error => { console.error('فشل تسجيل Service Worker:', error); }); }); }

// التسجيل مع نطاق مخصص navigator.serviceWorker.register('/sw.js', { scope: '/app/' }) .then(registration => { console.log('SW مسجل مع النطاق:', registration.scope); }); // التسجيل مع فحوصات التحديث navigator.serviceWorker.register('/sw.js', { updateViaCache: 'none' // 'imports', 'all', 'none' }) .then(registration => { // تحقق من التحديثات كل ساعة setInterval(() => { registration.update(); }, 3600000); });

// sw.js const CACHE_NAME = 'my-pwa-cache-v1'; const urlsToCache = [ '/', '/index.html', '/styles/main.css', '/scripts/app.js', '/images/logo.png' ]; self.addEventListener('install', event => { console.log('Service Worker: جاري التثبيت...'); // انتظر حتى يكتمل التخزين المؤقت event.waitUntil( caches.open(CACHE_NAME) .then(cache => { console.log('Service Worker: تخزين الملفات مؤقتاً'); return cache.addAll(urlsToCache); }) .then(() => { console.log('Service Worker: جميع الملفات مخزنة مؤقتاً'); }) ); });

// فتح أو إنشاء ذاكرة تخزين مؤقت caches.open('my-cache-v1') .then(cache => { // كائن Cache جاهز للاستخدام });

// إضافة عدة URLs للذاكرة المؤقتة (عملية ذرية) cache.addAll([ '/', '/styles/main.css', '/scripts/app.js' ]) .then(() => { console.log('جميع الملفات مخزنة مؤقتاً'); }) .catch(error => { console.error('فشل تخزين الملفات مؤقتاً:', error); // إذا فشل أي ملف، تفشل العملية بأكملها });

// إضافة URL واحد للذاكرة المؤقتة cache.add('/styles/main.css') .then(() => { console.log('الملف مخزن مؤقتاً'); }); // يعادل: fetch('/styles/main.css') .then(response => cache.put('/styles/main.css', response));

// تخزين زوج request/response يدوياً fetch('/api/data.json') .then(response => { // استنساخ response لأن body يمكن قراءته مرة واحدة فقط return cache.put('/api/data.json', response.clone()); });

// sw.js const CACHE_NAME = 'pwa-v1'; // الأصول الحرجة - يفشل التثبيت إذا لم يتم تخزينها const criticalAssets = [ '/', '/index.html', '/styles/main.css', '/scripts/app.js' ]; // الأصول الاختيارية - ينجح التثبيت حتى لو فشلت هذه const optionalAssets = [ '/images/banner.jpg', '/images/background.jpg', '/fonts/custom-font.woff2' ]; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => { // تخزين الأصول الحرجة (ذري) return cache.addAll(criticalAssets) .then(() => { // تخزين الأصول الاختيارية بشكل فردي (غير ذري) return Promise.all( optionalAssets.map(url => { return cache.add(url).catch(error => { console.warn(`فشل تخزين ${url}:`, error); // لا ترفض - اسمح باستمرار التثبيت }); }) ); }); }) ); });

// sw.js self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) .then(() => { // إجبار service worker الجديد على التفعيل فوراً return self.skipWaiting(); }) ); });

// sw.js const CACHE_NAME = 'pwa-v2'; self.addEventListener('activate', event => { console.log('Service Worker: جاري التفعيل...'); event.waitUntil( caches.keys() .then(cacheNames => { // حذف جميع ذاكرات التخزين ماعدا الإصدار الحالي return Promise.all( cacheNames.map(cacheName => { if (cacheName !== CACHE_NAME) { console.log('Service Worker: حذف ذاكرة تخزين قديمة:', cacheName); return caches.delete(cacheName); } }) ); }) .then(() => { console.log('Service Worker: اكتمل تنظيف ذاكرة التخزين'); }) ); });

// sw.js self.addEventListener('activate', event => { event.waitUntil( // تنظيف ذاكرات التخزين القديمة caches.keys() .then(cacheNames => { return Promise.all( cacheNames .filter(cacheName => cacheName !== CACHE_NAME) .map(cacheName => caches.delete(cacheName)) ); }) .then(() => { // السيطرة على جميع الصفحات فوراً return self.clients.claim(); }) ); });

// sw.js // الإصدار في اسم ذاكرة التخزين const VERSION = 'v3.1.0'; const CACHE_NAME = `pwa-${VERSION}`; // أو استخدم الطابع الزمني const TIMESTAMP = new Date().getTime(); const CACHE_NAME = `pwa-${TIMESTAMP}`; // أو استخدم hash (في عملية البناء) const HASH = 'abc123def456'; const CACHE_NAME = `pwa-${HASH}`;

// ========== main.js (سكريبت الصفحة) ========== if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(registration => { console.log('SW مسجل:', registration.scope); // استمع للتحديثات registration.addEventListener('updatefound', () => { const newWorker = registration.installing; newWorker.addEventListener('statechange', () => { if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { // إصدار جديد متاح if (confirm('إصدار جديد متاح! إعادة تحميل للتحديث؟')) { newWorker.postMessage({ action: 'skipWaiting' }); window.location.reload(); } } }); }); }) .catch(error => { console.error('فشل تسجيل SW:', error); }); // استمع لتغيير المتحكم (SW جديد مُفعّل) navigator.serviceWorker.addEventListener('controllerchange', () => { console.log('service worker جديد مُفعّل'); window.location.reload(); }); }); } // ========== sw.js (Service Worker) ========== const VERSION = 'v1.0.0'; const CACHE_NAME = `pwa-${VERSION}`; const STATIC_ASSETS = [ '/', '/index.html', '/styles/main.css', '/scripts/app.js', '/manifest.json' ]; // حدث Install self.addEventListener('install', event => { console.log(`SW ${VERSION}: جاري التثبيت...`); event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(STATIC_ASSETS)) .then(() => self.skipWaiting()) .then(() => console.log(`SW ${VERSION}: مُثبّت`)) ); }); // حدث Activate self.addEventListener('activate', event => { console.log(`SW ${VERSION}: جاري التفعيل...`); event.waitUntil( caches.keys() .then(cacheNames => { return Promise.all( cacheNames .filter(name => name !== CACHE_NAME) .map(name => { console.log(`SW ${VERSION}: حذف ذاكرة تخزين ${name}`); return caches.delete(name); }) ); }) .then(() => self.clients.claim()) .then(() => console.log(`SW ${VERSION}: مُفعّل`)) ); }); // معالج الرسالة لـ skipWaiting self.addEventListener('message', event => { if (event.data && event.data.action === 'skipWaiting') { self.skipWaiting(); } });