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

<!-- Geolocation في PWA --> <button id="getLocation">احصل على موقعي</button> <div id="locationResult"></div> <script> document.getElementById('getLocation').addEventListener('click', () => { if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition( (position) => { const lat = position.coords.latitude; const lon = position.coords.longitude; const accuracy = position.coords.accuracy; document.getElementById('locationResult').innerHTML = ` <p>خط العرض: ${lat}</p> <p>خط الطول: ${lon}</p> <p>الدقة: ${accuracy} متر</p> `; }, (error) => { console.error('خطأ في تحديد الموقع:', error.message); alert('تعذر الحصول على الموقع'); }, { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 } ); } else { alert('تحديد الموقع الجغرافي غير مدعوم'); } }); // مراقبة الموقع بشكل مستمر const watchId = navigator.geolocation.watchPosition( (position) => { console.log('تم تحديث الموقع:', position.coords); }, (error) => console.error(error), { enableHighAccuracy: true } ); // إيقاف المراقبة // navigator.geolocation.clearWatch(watchId); </script>

<!-- الوصول إلى الكاميرا --> <button id="startCamera">تشغيل الكاميرا</button> <button id="takePhoto">التقاط صورة</button> <video id="video" autoplay playsinline></video> <canvas id="canvas"></canvas> <img id="photo" alt="الصورة الملتقطة"> <script> const video = document.getElementById('video'); const canvas = document.getElementById('canvas'); const photo = document.getElementById('photo'); let stream = null; // تشغيل الكاميرا document.getElementById('startCamera').addEventListener('click', async () => { try { stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user', // 'environment' للكاميرا الخلفية width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false }); video.srcObject = stream; } catch (error) { console.error('خطأ في الوصول إلى الكاميرا:', error); alert('تعذر الوصول إلى الكاميرا'); } }); // التقاط صورة document.getElementById('takePhoto').addEventListener('click', () => { canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0); // تحويل إلى صورة const imageData = canvas.toDataURL('image/png'); photo.src = imageData; // إيقاف الكاميرا if (stream) { stream.getTracks().forEach(track => track.stop()); } }); // التحقق من الأجهزة المتاحة navigator.mediaDevices.enumerateDevices() .then(devices => { const cameras = devices.filter(d => d.kind === 'videoinput'); console.log('الكاميرات المتاحة:', cameras.length); }); </script>

<!-- Web Share API --> <button id="shareButton">مشاركة هذا المقال</button> <script> const shareButton = document.getElementById('shareButton'); if (navigator.share) { shareButton.addEventListener('click', async () => { try { await navigator.share({ title: 'دروس PWA مذهلة', text: 'اطلع على هذا الدليل الشامل لـ PWA!', url: window.location.href }); console.log('تمت المشاركة بنجاح'); } catch (error) { console.error('فشلت المشاركة:', error); } }); } else { // بديل للمتصفحات التي لا تدعم Web Share shareButton.addEventListener('click', () => { const shareUrl = `mailto:?subject=تحقق من هذا&body=${encodeURIComponent(window.location.href)}`; window.location.href = shareUrl; }); } // مشاركة الملفات (الصور، PDF، إلخ) async function shareFile(file) { if (navigator.canShare && navigator.canShare({ files: [file] })) { try { await navigator.share({ files: [file], title: 'ملف مشترك', text: 'تحقق من هذا الملف!' }); } catch (error) { console.error('فشلت مشاركة الملف:', error); } } else { console.log('مشاركة الملفات غير مدعومة'); } } </script>

<script> // اهتزاز واحد (200 مللي ثانية) if ('vibrate' in navigator) { navigator.vibrate(200); } // نمط اهتزاز: اهتزاز 100 مللي ثانية، توقف 50 مللي ثانية، اهتزاز 100 مللي ثانية navigator.vibrate([100, 50, 100]); // إيقاف الاهتزاز navigator.vibrate(0); // زر مع ردود فعل لمسية document.getElementById('actionButton').addEventListener('click', () => { navigator.vibrate(50); // اهتزاز قصير عند النقر // تنفيذ الإجراء... }); // نمط اهتزاز النجاح function successVibration() { navigator.vibrate([50, 50, 50]); } // نمط اهتزاز الخطأ function errorVibration() { navigator.vibrate([200, 100, 200]); } </script>

<button id="toggleWakeLock">إبقاء الشاشة مستيقظة</button> <script> let wakeLock = null; async function requestWakeLock() { try { wakeLock = await navigator.wakeLock.request('screen'); console.log('تم تفعيل قفل إيقاظ الشاشة'); wakeLock.addEventListener('release', () => { console.log('تم إطلاق قفل إيقاظ الشاشة'); }); } catch (error) { console.error('فشل طلب قفل الإيقاظ:', error); } } async function releaseWakeLock() { if (wakeLock !== null) { await wakeLock.release(); wakeLock = null; } } document.getElementById('toggleWakeLock').addEventListener('click', () => { if (wakeLock === null) { requestWakeLock(); } else { releaseWakeLock(); } }); // إعادة طلب قفل الإيقاظ عندما تصبح الصفحة مرئية document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible' && wakeLock !== null) { requestWakeLock(); } }); </script>

<script> // اتجاه الجهاز (alpha, beta, gamma) window.addEventListener('deviceorientation', (event) => { const alpha = event.alpha; // 0-360 درجة (البوصلة) const beta = event.beta; // -180 إلى 180 درجة (إمالة أمامية-خلفية) const gamma = event.gamma; // -90 إلى 90 درجة (إمالة يسار-يمين) console.log(`الاتجاه: α=${alpha}° β=${beta}° γ=${gamma}°`); }); // حركة الجهاز (التسارع) window.addEventListener('devicemotion', (event) => { const acceleration = event.acceleration; const rotationRate = event.rotationRate; console.log('التسارع:', { x: acceleration.x, y: acceleration.y, z: acceleration.z }); }); // طلب الإذن (iOS 13+) if (typeof DeviceOrientationEvent.requestPermission === 'function') { DeviceOrientationEvent.requestPermission() .then(permissionState => { if (permissionState === 'granted') { window.addEventListener('deviceorientation', handleOrientation); } }) .catch(console.error); } </script>

<button id="copyButton">نسخ النص</button> <button id="pasteButton">لصق النص</button> <textarea id="clipboardText"></textarea> <script> // نسخ إلى الحافظة document.getElementById('copyButton').addEventListener('click', async () => { const text = document.getElementById('clipboardText').value; try { await navigator.clipboard.writeText(text); console.log('تم نسخ النص إلى الحافظة'); } catch (error) { console.error('فشل النسخ:', error); // بديل للمتصفحات الأقدم const textarea = document.createElement('textarea'); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); } }); // لصق من الحافظة document.getElementById('pasteButton').addEventListener('click', async () => { try { const text = await navigator.clipboard.readText(); document.getElementById('clipboardText').value = text; console.log('تم لصق النص من الحافظة'); } catch (error) { console.error('فشل اللصق:', error); } }); // نسخ الصور async function copyImage(blob) { try { await navigator.clipboard.write([ new ClipboardItem({ [blob.type]: blob }) ]); console.log('تم نسخ الصورة'); } catch (error) { console.error('فشل نسخ الصورة:', error); } } </script>