مستقبل PWA وواجهات برمجة التطبيقات الناشئة

// Open a file picker and read file async function openFile() { try { // Show file picker const [fileHandle] = await window.showOpenFilePicker({ types: [ { description: 'ملفات نصية', accept: { 'text/plain': ['.txt'], 'text/markdown': ['.md'] } } ] }); // Get file contents const file = await fileHandle.getFile(); const contents = await file.text(); console.log('محتوى الملف:', contents); return { fileHandle, contents }; } catch (error) { console.error('خطأ في فتح الملف:', error); } } // Save file async function saveFile(fileHandle, contents) { try { // Create a writable stream const writable = await fileHandle.createWritable(); // Write contents await writable.write(contents); // Close the file await writable.close(); console.log('تم حفظ الملف بنجاح'); } catch (error) { console.error('خطأ في حفظ الملف:', error); } } // Save new file (with picker) async function saveFileAs(contents) { try { const fileHandle = await window.showSaveFilePicker({ types: [ { description: 'ملفات نصية', accept: { 'text/plain': ['.txt'] } } ] }); await saveFile(fileHandle, contents); return fileHandle; } catch (error) { console.error('خطأ في حفظ الملف:', error); } } // Example: Simple text editor class TextEditor { constructor() { this.fileHandle = null; this.isDirty = false; } async open() { const result = await openFile(); if (result) { this.fileHandle = result.fileHandle; this.isDirty = false; return result.contents; } } async save(contents) { if (this.fileHandle) { await saveFile(this.fileHandle, contents); this.isDirty = false; } else { this.fileHandle = await saveFileAs(contents); } } async saveAs(contents) { this.fileHandle = await saveFileAs(contents); } }

// Connect to Bluetooth device async function connectToBluetoothDevice() { try { // Request device const device = await navigator.bluetooth.requestDevice({ filters: [ { services: ['heart_rate'] } ], optionalServices: ['battery_service'] }); console.log('الجهاز:', device.name); // Connect to GATT server const server = await device.gatt.connect(); // Get service const service = await server.getPrimaryService('heart_rate'); // Get characteristic const characteristic = await service.getCharacteristic('heart_rate_measurement'); // Listen for notifications characteristic.addEventListener('characteristicvaluechanged', event => { const value = event.target.value; const heartRate = value.getUint8(1); console.log('معدل ضربات القلب:', heartRate); }); await characteristic.startNotifications(); return { device, server, characteristic }; } catch (error) { console.error('خطأ Bluetooth:', error); } } // Disconnect function disconnectDevice(server) { if (server && server.connected) { server.disconnect(); console.log('تم قطع الاتصال'); } } // Example: Fitness tracker integration class FitnessTracker { constructor() { this.device = null; this.heartRateData = []; } async connect() { const result = await connectToBluetoothDevice(); if (result) { this.device = result.device; this.setupHeartRateMonitor(result.characteristic); } } setupHeartRateMonitor(characteristic) { characteristic.addEventListener('characteristicvaluechanged', event => { const heartRate = event.target.value.getUint8(1); this.heartRateData.push({ timestamp: Date.now(), bpm: heartRate }); this.onHeartRateUpdate(heartRate); }); } onHeartRateUpdate(bpm) { // Update UI console.log(`معدل ضربات القلب الحالي: ${bpm} نبضة في الدقيقة`); } getAverageHeartRate() { if (this.heartRateData.length === 0) return 0; const sum = this.heartRateData.reduce((acc, data) => acc + data.bpm, 0); return Math.round(sum / this.heartRateData.length); } }

// Check NFC support if ('NDEFReader' in window) { console.log('Web NFC مدعوم'); } // Read NFC tags async function readNFCTag() { try { const ndef = new NDEFReader(); await ndef.scan(); console.log('بدأ مسح NFC'); ndef.addEventListener('reading', ({ message, serialNumber }) => { console.log(`تم اكتشاف علامة NFC: ${serialNumber}`); for (const record of message.records) { console.log('نوع السجل:', record.recordType); console.log('نوع MIME:', record.mediaType); if (record.recordType === 'text') { const textDecoder = new TextDecoder(record.encoding); const text = textDecoder.decode(record.data); console.log('النص:', text); } } }); ndef.addEventListener('readingerror', () => { console.error('خطأ في قراءة NFC'); }); } catch (error) { console.error('خطأ NFC:', error); } } // Write to NFC tag async function writeNFCTag(text) { try { const ndef = new NDEFReader(); await ndef.write({ records: [ { recordType: 'text', data: text }, { recordType: 'url', data: 'https://example.com' } ] }); console.log('تمت كتابة علامة NFC بنجاح'); } catch (error) { console.error('فشلت الكتابة:', error); } } // Example: Digital business card class DigitalBusinessCard { async shareViaNFC() { const cardData = { name: 'أحمد محمد', title: 'مطور أول', email: 'ahmed@example.com', phone: '+966-555-0123', website: 'https://ahmeddev.com' }; const vCard = this.generateVCard(cardData); try { const ndef = new NDEFReader(); await ndef.write({ records: [{ recordType: 'mime', mediaType: 'text/vcard', data: new TextEncoder().encode(vCard) }] }); console.log('تمت مشاركة بطاقة العمل عبر NFC'); } catch (error) { console.error('فشلت مشاركة NFC:', error); } } generateVCard(data) { return `BEGIN:VCARD VERSION:3.0 FN:${data.name} TITLE:${data.title} EMAIL:${data.email} TEL:${data.phone} URL:${data.website} END:VCARD`; } }

// Check idle state async function setupIdleDetection() { try { // Request permission const permission = await IdleDetector.requestPermission(); if (permission !== 'granted') { console.log('تم رفض إذن الكشف عن الخمول'); return; } const idleDetector = new IdleDetector(); idleDetector.addEventListener('change', () => { const userState = idleDetector.userState; // 'active' or 'idle' const screenState = idleDetector.screenState; // 'locked' or 'unlocked' console.log(`المستخدم: ${userState}، الشاشة: ${screenState}`); if (userState === 'idle') { handleUserIdle(); } else { handleUserActive(); } }); // Start detection (check after 60 seconds of inactivity) await idleDetector.start({ threshold: 60000 // milliseconds }); console.log('بدأ الكشف عن الخمول'); } catch (error) { console.error('خطأ في الكشف عن الخمول:', error); } } function handleUserIdle() { console.log('المستخدم خامل'); // Pause animations, videos, reduce network activity } function handleUserActive() { console.log('المستخدم نشط'); // Resume normal operation }

// Capture screen async function captureScreen() { try { const stream = await navigator.mediaDevices.getDisplayMedia({ video: { cursor: 'always' // Include cursor in capture }, audio: false }); // Use the stream const videoElement = document.querySelector('video'); videoElement.srcObject = stream; // Record the stream const mediaRecorder = new MediaRecorder(stream); const chunks = []; mediaRecorder.ondataavailable = event => { if (event.data.size > 0) { chunks.push(event.data); } }; mediaRecorder.onstop = () => { const blob = new Blob(chunks, { type: 'video/webm' }); const url = URL.createObjectURL(blob); // Download or save the recording const a = document.createElement('a'); a.href = url; a.download = 'screen-recording.webm'; a.click(); }; mediaRecorder.start(); // Stop recording after user interaction or timeout stream.getVideoTracks()[0].addEventListener('ended', () => { mediaRecorder.stop(); }); return { stream, mediaRecorder }; } catch (error) { console.error('خطأ في التقاط الشاشة:', error); } }

// Set badge async function setBadge(count) { if ('setAppBadge' in navigator) { try { await navigator.setAppBadge(count); console.log(`تم تعيين الشارة إلى ${count}`); } catch (error) { console.error('خطأ في الشارة:', error); } } } // Clear badge async function clearBadge() { if ('clearAppBadge' in navigator) { await navigator.clearAppBadge(); console.log('تم مسح الشارة'); } } // Example: Notification manager class NotificationManager { constructor() { this.unreadCount = 0; } async addNotification(notification) { this.unreadCount++; await this.updateBadge(); } async markAsRead(notificationId) { this.unreadCount = Math.max(0, this.unreadCount - 1); await this.updateBadge(); } async markAllAsRead() { this.unreadCount = 0; await clearBadge(); } async updateBadge() { if (this.unreadCount > 0) { await setBadge(this.unreadCount); } else { await clearBadge(); } } }

// Feature detection pattern function supportsFeature(feature) { const features = { fileSystem: 'showOpenFilePicker' in window, bluetooth: 'bluetooth' in navigator, nfc: 'NDEFReader' in window, idle: 'IdleDetector' in window, badge: 'setAppBadge' in navigator, screenCapture: 'getDisplayMedia' in navigator.mediaDevices }; return features[feature] || false; } // Progressive enhancement async function enhanceWithNewFeatures() { const features = {}; if (supportsFeature('fileSystem')) { features.fileSystem = await import('./file-system-handler.js'); } if (supportsFeature('bluetooth')) { features.bluetooth = await import('./bluetooth-handler.js'); } // Provide fallbacks for unsupported features if (!features.fileSystem) { features.fileSystem = await import('./file-system-fallback.js'); } return features; }

✓ أساسيات PWA - فهم مبادئ وفوائد PWA - الفرق بين PWAs والتطبيقات الأصلية - دعم المتصفح والتوافق ✓ التقنيات الأساسية - Service Workers للوظائف دون اتصال - Web App Manifest لإمكانية التثبيت - HTTPS ومتطلبات الأمان ✓ استراتيجيات التخزين المؤقت - Cache-first، network-first، stale-while-revalidate - التخزين المؤقت الديناميكي وإدارة ذاكرة التخزين المؤقت - صفحات احتياطية دون اتصال ✓ الميزات المتقدمة - الإشعارات الفورية - المزامنة في الخلفية - IndexedDB للتخزين المحلي - مطالبات التثبيت ودورة حياة التطبيق ✓ تحسين الأداء - هندسة app shell - التحميل الكسول وتقسيم الكود - تحسين الموارد - تدقيقات Lighthouse ✓ التنفيذ في العالم الحقيقي - بناء TaskMaster PWA كامل - التعلم من دراسات حالة ناجحة - استراتيجيات النشر والمراقبة ✓ التقنيات المستقبلية - Project Fugu وواجهات برمجة التطبيقات الناشئة - File System، Bluetooth، NFC - قدرات PWA القادمة