تعرف علي تطبيقات الويب المتقدمة ونوعها الجديد PWA
2 minute read
ما هي تطبيقات الــ Progressive Web App
هي تطبيقات تعمل علي متصفحات الهواتف الذكية وبالاخص Chrome ولها بعض المزايا التي تجعلها افضل تطبيقات الويب الخاصة بمتصفحات الهواتف مثل: ارسال التنبيهات لكل جديد علي الموقع , تعمل بدون اتصال بالشبكة (مثل التطبيقات الاساسية).وهي بالطبع قد صرح عنها شركة Google في احدي مؤتمرات IO الخاصة به وكان بعنوان
Great Experiences Everywhere (Google I/O '17)
اذا فما الذي يتمتع به هذا النوع من تطبيقات الويب عن غيرها ؟؟
سؤال اكثر من رائع والاجابة تنقسم الي ثلاثة اجزاء :
- الفعالية : وهي بامكانك تحميل اللتطبيق حتى في ظروف انقطاع الشبكة.
- السرعة : سريع الاستجابة لتفعلات المستخدم
- المشاركة : يشعر وكأنه تطبيق طبيعي علي الجهاز من خلال تجربة المستخدم.
اولا : Reliable (الفعالية)
عندما يقوم المستخدم بتحميل او تثبيت تطبيق الويب علي الشاشة الرئيسية لدي هاتفه فان هذه الميزة تجعله قادر علي تصفح الموقع دون الحاجة الي انترنت وبعد دخول مرة اخري الهاتف الي الشبكة او الانترنت يمكنه ان يقوم باستعادة جميع البيانات المفقودة اثناء انقطاع الشبكة و يقوم بارسال تنبيهات بما قد تم تحديثة في الموقع كما يحدث في التطبيقات الاساسية في الهواتف.
ثانيا : Fast (السرعة)
سيتخلى 53٪ من المستخدمين عن الموقع إذا استغرق تحميله أكثر من 3 ثوان! وبمجرد تحميل المستخدم يتوقع منه أن يكون سريع
لذلك تدعم هذه التطبيقات سرعة استجابة عالية .
ثالثا : Engaging (المشاركة)
عندما يقوم المستخدم بتخزين التطبيق علي الهاتف يظهر ايكونة علي الشاشة الرئيسية للموقع يمكنك ان تقوم بفتحها في اي وقت وتدعم ايضا خاصية Full Screen وايضا تقوم بارسال تنبيهات لدي الهاتف بما تم تجديده بالموقع .
جميل جدا لقد انتهينا من اهم جزئية نظرية في هذا التدوينة اذا كيف اقوم بعمل لتطبيق الويب الخاص بي ايكونة تعمل علي Home Screen وايضا splash Screen تعمل عند فتح الموقع كل ذلك يقوم عن طريق ملف يسمي Manifest.JSON
مما يتكون ملف manifest.json
يتكون من
← اسم قصير للتطبيق
← اسم التطبيق بالكامل
← مسار الايكونة
← حجم الايكونة
← نوع الايكونة
{"short_name": "AirHorner","name": "Kinlan's AirHorner of Infamy","icons": [{"src": "launcher-icon-1x.png","type": "image/png","sizes": "48x48"},{"src": "launcher-icon-2x.png","type": "image/png","sizes": "96x96"},{"src": "launcher-icon-4x.png","type": "image/png","sizes": "192x192"}],"start_url": "index.html?launcher=true"}
شاهد ماذا يحدث بعد اضافة هذا الملف
المصادر من هنا :
https://developers.google.com/web/progressive-web-apps/
https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
Post a Comment