تثبيت التطبيق (إضافة إلى الشاشة الرئيسية)

let deferredPrompt; let installButton; window.addEventListener('beforeinstallprompt', (event) => { // منع مطالبة التثبيت الافتراضية event.preventDefault(); // تخزين الحدث للاستخدام لاحقًا deferredPrompt = event; // إظهار زر التثبيت المخصص installButton = document.getElementById('install-button'); if (installButton) { installButton.style.display = 'block'; } console.log('مطالبة التثبيت متاحة'); }); // التعامل مع نقرة زر التثبيت if (installButton) { installButton.addEventListener('click', async () => { if (!deferredPrompt) { console.log('مطالبة التثبيت غير متاحة'); return; } // إظهار مطالبة التثبيت deferredPrompt.prompt(); // انتظار استجابة المستخدم const { outcome } = await deferredPrompt.userChoice; console.log(`استجابة المستخدم: ${outcome}`); if (outcome === 'accepted') { console.log('قبل المستخدم مطالبة التثبيت'); } else { console.log('رفض المستخدم مطالبة التثبيت'); } // مسح المطالبة المؤجلة deferredPrompt = null; // إخفاء زر التثبيت installButton.style.display = 'none'; }); }

<!-- شريط تثبيت مخصص --> <div id="install-banner" class="install-banner" style="display: none;"> <div class="banner-content"> <img src="/icon-192x192.png" alt="أيقونة التطبيق" class="banner-icon"> <div class="banner-text"> <h3>ثبت تطبيقنا</h3> <p>احصل على وصول سريع واعمل دون اتصال</p> </div> <div class="banner-actions"> <button id="install-accept" class="btn-primary">تثبيت</button> <button id="install-dismiss" class="btn-secondary">ليس الآن</button> </div> </div> </div> <script> let deferredPrompt; const installBanner = document.getElementById('install-banner'); const installAccept = document.getElementById('install-accept'); const installDismiss = document.getElementById('install-dismiss'); window.addEventListener('beforeinstallprompt', (event) => { event.preventDefault(); deferredPrompt = event; // إظهار الشريط بعد 30 ثانية من التفاعل setTimeout(() => { if (installBanner) { installBanner.style.display = 'block'; } }, 30000); }); installAccept?.addEventListener('click', async () => { if (deferredPrompt) { deferredPrompt.prompt(); const { outcome } = await deferredPrompt.userChoice; console.log(`نتيجة التثبيت: ${outcome}`); deferredPrompt = null; } installBanner.style.display = 'none'; }); installDismiss?.addEventListener('click', () => { installBanner.style.display = 'none'; // تذكر الرفض لمدة 7 أيام localStorage.setItem('install-dismissed', Date.now() + (7 * 24 * 60 * 60 * 1000)); }); </script>

// تتبع عند تثبيت التطبيق window.addEventListener('appinstalled', (event) => { console.log('تم تثبيت PWA'); // إرسال حدث التحليلات if (window.gtag) { gtag('event', 'pwa_install', { method: 'browser_prompt' }); } // إخفاء أي مطالبات تثبيت const installButton = document.getElementById('install-button'); if (installButton) { installButton.style.display = 'none'; } }); // اكتشاف كيفية تشغيل التطبيق function detectLaunchMode() { const isStandalone = window.matchMedia('(display-mode: standalone)').matches; const isInWebAppiOS = (window.navigator.standalone === true); if (isStandalone || isInWebAppiOS) { console.log('تم التشغيل كـ PWA مثبت'); if (window.gtag) { gtag('event', 'pwa_launch', { display_mode: 'standalone' }); } } else { console.log('تم التشغيل في المتصفح'); } } detectLaunchMode();

{ "name": "تطبيقي PWA", "short_name": "PWA", "start_url": "/", "display": "standalone", "shortcuts": [ { "name": "رسالة جديدة", "short_name": "رسالة", "description": "إنشاء رسالة جديدة", "url": "/messages/new", "icons": [ { "src": "/images/shortcut-message.png", "sizes": "192x192", "type": "image/png" } ] }, { "name": "الإعدادات", "short_name": "إعدادات", "description": "فتح إعدادات التطبيق", "url": "/settings", "icons": [ { "src": "/images/shortcut-settings.png", "sizes": "192x192", "type": "image/png" } ] } ] }

// تعيين عدد الشارة if ('setAppBadge' in navigator) { navigator.setAppBadge(5); // يظهر "5" على رمز التطبيق } // مسح الشارة if ('clearAppBadge' in navigator) { navigator.clearAppBadge(); } // تحديث الشارة عند تلقي الإشعارات self.addEventListener('push', async (event) => { const data = event.data.json(); // إظهار الإشعار await self.registration.showNotification(data.title, { body: data.body, icon: '/images/icon-192x192.png' }); // تحديث عدد الشارة const unreadCount = await getUnreadCount(); if ('setAppBadge' in navigator) { navigator.setAppBadge(unreadCount); } });