كيفية الاختبار على iOS و Android

اختبار على Android

افتح Chrome: افتح موقع الويب الخاص بك في متصفح Google Chrome على جهاز Android.
مطالبة التثبيت: إذا تم تكوين PWA بشكل صحيح، فقد ترى مطالبة "إضافة إلى الشاشة الرئيسية" (Add to Home Screen) في الجزء السفلي من الشاشة.
التثبيت اليدوي: إذا لم تظهر المطالبة، انقر على قائمة النقاط الثلاث في Chrome (أعلى اليمين) وابحث عن "إضافة إلى الشاشة الرئيسية" (Add to Home Screen) أو "تثبيت التطبيق" (Install app).
التحقق: بعد التثبيت، سيظهر أيقونة التطبيق على شاشتك الرئيسية. انقر عليها لفتح التطبيق في وضع ملء الشاشة.
اختبار وضع عدم الاتصال: قم بتعطيل Wi-Fi وبيانات الجوال على جهازك وحاول الوصول إلى التطبيق. يجب أن يتم تحميل الصفحات المخزنة مؤقتًا، وإذا حاولت الوصول إلى صفحة غير مخزنة، يجب أن تظهر صفحة offline.html.

اختبار على iOS (Safari)

افتح Safari: افتح موقع الويب الخاص بك في متصفح Safari على جهاز iOS.
زر المشاركة: انقر على زر "المشاركة" (Share) في شريط التنقل السفلي (أو العلوي على iPad).
إضافة إلى الشاشة الرئيسية: قم بالتمرير لأسفل في قائمة المشاركة وانقر على "إضافة إلى الشاشة الرئيسية" (Add to Home Screen).
التثبيت: انقر على "إضافة" (Add) في الزاوية العلوية اليمنى.
التحقق: سيظهر أيقونة التطبيق على شاشتك الرئيسية. انقر عليها لفتح التطبيق في وضع ملء الشاشة.
اختبار وضع عدم الاتصال: قم بتعطيل Wi-Fi وبيانات الجوال على جهازك وحاول الوصول إلى التطبيق. يجب أن يتم تحميل الصفحات المخزنة مؤقتًا.

ملاحظة هامة لـ iOS: لا يدعم Safari على iOS حاليًا واجهة برمجة تطبيقات beforeinstallprompt، لذا لن تظهر المطالبة التلقائية. يجب على المستخدمين تثبيت التطبيق يدويًا عبر زر المشاركة.

ملاحظات إضافية:

أبعاد الأيقونات: تأكد من أن الأيقونات في مجلد public/icons/ تتطابق مع الأحجام المحددة في manifest.json وعلامات apple-touch-icon.
صفحة عدم الاتصال (offline.html): تأكد من وجود ملف offline.html بسيط وواضح في مجلد public/ لتقديمه عندما يكون المستخدم غير متصل بالإنترنت ولا يمكن الوصول إلى المحتوى المخزن مؤقتًا.
اختبار شامل: استخدم أدوات المطور في المتصفح (مثل Lighthouse في Chrome) لاختبار أداء PWA وقابليته للتثبيت.