اختبار تطبيقات الويب التقدمية

// تشغيل Lighthouse من سطر الأوامر // تثبيت Lighthouse عالميًا npm install -g lighthouse // تشغيل تدقيق أساسي lighthouse https://your-pwa.com --output html --output-path ./report.html // تشغيل تدقيق خاص بـ PWA lighthouse https://your-pwa.com --preset=pwa --output json --output-path ./pwa-audit.json // التشغيل مع إعدادات Chrome (مثل محاكاة الهاتف المحمول) lighthouse https://your-pwa.com \ --emulated-form-factor=mobile \ --throttling-method=simulate \ --output html // تشغيل فئات محددة فقط lighthouse https://your-pwa.com \ --only-categories=performance,pwa,accessibility \ --output json // تكوين مخصص lighthouse https://your-pwa.com --config-path=./lighthouse-config.js

// lighthouse-config.js - تكوين Lighthouse مخصص module.exports = { extends: 'lighthouse:default', settings: { onlyCategories: ['performance', 'pwa'], throttlingMethod: 'simulate', throttling: { rttMs: 40, throughputKbps: 10240, cpuSlowdownMultiplier: 1 }, formFactor: 'mobile', screenEmulation: { mobile: true, width: 375, height: 667, deviceScaleFactor: 2 } }, audits: [ 'metrics/first-contentful-paint', 'metrics/largest-contentful-paint', 'metrics/cumulative-layout-shift' ] };

// استخدام Chrome DevTools لتصحيح PWA // 1. افتح DevTools (F12 أو Cmd+Option+I) // 2. انتقل إلى علامة التبويب "Application" // قسم Service Workers: // - عرض عمال الخدمة المسجلين // - التحديث أو إلغاء التسجيل أو التجاوز للشبكة // - اختبار تدفق التحديث // - عرض أخطاء عامل الخدمة // قسم Manifest: // - التحقق من صحة manifest.json // - التحقق من معايير قابلية التثبيت // - معاينة أيقونات التطبيق ولقطات الشاشة // - اختبار ألوان السمة // قسم Storage: // - فحص Cache Storage // - عرض بيانات IndexedDB // - مسح بيانات الموقع // - التحقق من حصة التخزين // Background Services: // - مراقبة أحداث المزامنة في الخلفية // - اختبار الإشعارات الفورية // - عرض تقدم الجلب في الخلفية

<script> // الاختبار البرمجي في وحدة تحكم DevTools // التحقق من تسجيل عامل الخدمة navigator.serviceWorker.getRegistrations().then(registrations => { console.log('عمال الخدمة:', registrations); }); // التحقق من محتويات ذاكرة التخزين المؤقت caches.keys().then(cacheNames => { console.log('أسماء ذاكرة التخزين المؤقت:', cacheNames); return Promise.all( cacheNames.map(name => caches.open(name).then(cache => cache.keys())) ); }).then(allRequests => { console.log('عناوين URL المخزنة مؤقتًا:', allRequests.flat()); }); // التحقق من البيان fetch('/manifest.json').then(r => r.json()).then(manifest => { console.log('البيان:', manifest); }); // التحقق من مطالبة التثبيت let deferredPrompt; window.addEventListener('beforeinstallprompt', (e) => { deferredPrompt = e; console.log('مطالبة التثبيت متاحة'); }); // التحقق مما إذا كان مثبتًا if (window.matchMedia('(display-mode: standalone)').matches) { console.log('يعمل كـ PWA مثبت'); } </script>

// service-worker-test.js - اختبار Jest لعامل الخدمة const { setupServer } = require('msw/node'); const { rest } = require('msw'); describe('عامل الخدمة', () => { let server; beforeAll(() => { // محاكاة بيئة عامل الخدمة global.self = { addEventListener: jest.fn(), caches: { open: jest.fn(), match: jest.fn() }, skipWaiting: jest.fn(), clients: { claim: jest.fn() } }; }); test('يجب أن يتم التثبيت والتفعيل', async () => { const installHandler = jest.fn(); const activateHandler = jest.fn(); self.addEventListener('install', installHandler); self.addEventListener('activate', activateHandler); // تشغيل حدث التثبيت const installEvent = new Event('install'); self.dispatchEvent(installEvent); expect(installHandler).toHaveBeenCalled(); }); test('يجب تخزين الموارد مؤقتًا عند التثبيت', async () => { const cache = { addAll: jest.fn().mockResolvedValue(undefined) }; self.caches.open.mockResolvedValue(cache); const urlsToCache = ['/', '/styles.css', '/script.js']; // محاكاة cache.addAll await self.caches.open('pwa-v1').then(cache => { return cache.addAll(urlsToCache); }); expect(cache.addAll).toHaveBeenCalledWith(urlsToCache); }); test('يجب الخدمة من ذاكرة التخزين المؤقت عند توفرها', async () => { const cachedResponse = new Response('محتوى مخزن مؤقتًا'); self.caches.match.mockResolvedValue(cachedResponse); const request = new Request('/cached-page'); const response = await self.caches.match(request); expect(response).toBe(cachedResponse); }); });

<script> // مساعدات الاختبار دون اتصال اليدوي class OfflineTester { static simulateOffline() { // قطع الاتصال عن الشبكة if ('connection' in navigator) { Object.defineProperty(navigator, 'onLine', { writable: true, value: false }); window.dispatchEvent(new Event('offline')); } } static simulateOnline() { Object.defineProperty(navigator, 'onLine', { writable: true, value: true }); window.dispatchEvent(new Event('online')); } static async testOfflineAccess(url) { try { const response = await fetch(url); if (response.ok) { console.log(`✓ ${url} يمكن الوصول إليه دون اتصال`); return true; } } catch (error) { console.error(`✗ ${url} لا يمكن الوصول إليه دون اتصال:`, error); return false; } } static async testCacheStrategy() { const testUrls = [ '/', '/about', '/styles.css', '/script.js' ]; console.log('اختبار الوصول دون اتصال...'); for (const url of testUrls) { await this.testOfflineAccess(url); } } } // تشغيل اختبارات دون اتصال OfflineTester.testCacheStrategy(); </script>

<script> // أدوات اختبار الإشعارات الفورية class PushTester { static async testSubscription() { if (!('Notification' in window) || !('serviceWorker' in navigator)) { console.error('الإشعارات الفورية غير مدعومة'); return false; } const permission = await Notification.requestPermission(); console.log('إذن الإشعار:', permission); if (permission === 'granted') { const registration = await navigator.serviceWorker.ready; const subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: 'YOUR_VAPID_PUBLIC_KEY' }); console.log('الاشتراك ناجح:', subscription); return true; } return false; } static async testPushPayload() { const testPayload = { title: 'إشعار تجريبي', body: 'هذا إشعار فوري تجريبي', icon: '/images/icon-192x192.png', badge: '/images/badge-72x72.png', data: { url: '/test' } }; const registration = await navigator.serviceWorker.ready; // محاكاة حدث push registration.active.postMessage({ type: 'SIMULATE_PUSH', payload: testPayload }); console.log('تم إرسال push تجريبي'); } } // تشغيل اختبارات push PushTester.testSubscription(); </script>