ما هو PWA أو البرنامج التدريجي ولماذا يجب الانتباه إليه؟
ما هو PWA ولماذا يجب الانتباه إليه؟
في السنوات القليلة الماضية ، ازداد عدد مستخدمي الهواتف المحمولة. اليوم ، أكثر من 60٪ من إجمالي استخدام الإنترنت يحدث من خلال الهواتف المحمولة.
من الواضح أن هذا النمو قد حدث لأسباب مثل سهولة النقل ، والأجهزة الرخيصة ، وسهولة الوصول إلى الإنترنت ، وزيادة عدد الخدمات على الإنترنت.
بالنظر إلى أن المزيد من المستخدمين يستخدمون الهواتف المحمولة ، فقد أصبح تحسين تجربة المستخدم للهواتف المحمولة أمرًا ضروريًا.
بالنسبة للشركات الأصغر التي لا تمتلك غالبًا تطبيقات أصلية بسبب قيود الوقت والتكلفة ، تعد تطبيقات الويب فرصة رئيسية للاحتفاظ بعملائها من خلال توفير أفضل تجربة ممكنة.
حتى إذا كانت الشركات قد خصصت تطبيقات تقليدية للأجهزة المحمولة ، فقد لا يزال بعض المستخدمين يفضلون إصدار الويب لتجنب التحميل والتثبيت بسبب قيود الأجهزة والذاكرة أو بعض التفضيلات الشخصية الأخرى.
اليوم ، التوقعات المختلفة من مواقعنا عالية جدًا. منذ ما يقرب من 25 عامًا عندما تم اختراع مواقع الويب ، كان الغرض الرئيسي منها هو مشاركة المعلومات بشكل أساسي. اليوم ، أصبح موقع الويب متجرًا للبقالة ، وشبكة اجتماعية ، ومكانًا للدردشة ، وما إلى ذلك.
حاليًا ، يمكن أن يوفر موقع الويب جميع ميزات البرامج مثل PowerPoint و Excel.
تعرف على تطبيقات الويب التقدمية (progressive)
لنأخذ مثالاً لتطبيق الهاتف المحمول. ضع في اعتبارك Whatsapp.
عندما لا يكون الإنترنت متصلاً ، لا يزال بإمكانك فتح هذا التطبيق ، والتحقق من الرسائل السابقة وحتى الرد على أصدقائك. يتم إرسال الرسائل تلقائيًا عند إنشاء اتصال الإنترنت بالهاتف.
هذا ما وعدت PWA بتقديمه في تطبيقات الويب. يمكّن PWA تطبيقات الويب من المزامنة في الخلفية عند عدم توفر الإنترنت وأداء المهام بسلاسة مع توفير تجربة أصلية لمستخدميها.
لماذا نحتاج إلى PWA وما هي ميزاتها؟
دعنا نتحدث عن بعض الميزات الرئيسية غير الموجودة في تطبيقات الويب العادية والتي يتم تقديمها في التطبيقات التقدمية PWA:
مصداقية
عند تحميل التطبيق ، يجب أن يكون سريعًا ، ويجب أن تكون سرعة التحميل في غضون دقيقة ، ويجب أن يفتح التطبيق الخاص بك عندما لا يكون هاتفك متصلاً بالإنترنت أو تكون سرعة الإنترنت منخفضة.
في أحدث استطلاع أجرته Google ، وجدت Google أن 53٪ من المستخدمين يغادرون موقع الويب إذا استغرق تحميل الصفحة أكثر من 3 ثوانٍ.
سريع
يجب أن يكون الانتقال والتنقل بين صفحات التطبيق سلسًا وسريعًا في نفس الوقت.
الجميع يكره التمرير البطيء والصعب.
متجاوب
يجب أن يكون التطبيق قابلاً للاستخدام على جميع أحجام الأجهزة المختلفة.
يجب أن يكون تطبيق الويب مثل السائل الذي يغطي كامل مساحة الحاوية عند سكبه في وعاء.
يمكن تركيبه
إذا أردنا جعل تطبيقات الويب أقرب إلى التطبيقات التقليدية ، فنحن بحاجة إلى إنشاء القدرة على تثبيتها.
يجب أن يكون اختصار البرنامج موجودًا على الصفحة الرئيسية مع البرامج الأصلية الأخرى ، بحيث يمكن للمستخدم الوصول إلى PWA المطلوب بنقرة واحدة.
Splash Screen
Splash Screen هي الصورة التي تظهر عند تحميل تطبيق أو لعبة.
هذا يجعل PWA يبدو وكأنه أصلي.
القدرة على الإشعارات
يجب على البرنامج إشراك المستخدمين. يحتوي PWA على ميزات مثل الإخطار من خلال الإشعارات ، ورمز على الشاشة ، والقدرة على الفتح في حالة عدم وجود شبكة ، وما إلى ذلك .
جميع الميزات المذكورة أعلاه ممكنة في برامج PWA
PWA وأطر واجهة المستخدم الحديثة
يعتقد بعض الناس أن PWA يأتي مع أطر واجهة مستخدم حديثة مثل ReactJs أو Angular 6 أو Vue.js.
لا علاقة لـ PWA بالإطارات التي تستخدمها ولا تتطلب سوى مكونات معينة.
كيف تجعل PWA مواقع الويب متاحة في وضع عدم الاتصال؟
كان هذا بالضبط سؤالي الأول حول PWA. كيف بالضبط يمكنك فتح تطبيقات الويب بدون الإنترنت؟
نعلم جميعًا أنه يمكن فتح التطبيقات الأصلية بدون اتصال بالإنترنت لأنه عندما نقوم بتحميلها وتثبيتها ، يتم تخزين مواردها الحيوية مثل مكونات واجهة المستخدم وبعض المعلومات الأخرى في جهاز الهاتف
هذا بالضبط ما يحدث في PWA .
يحفظ PWA ملفات HTML وملفات CSS والصور في ذاكرة التخزين المؤقت للمتصفح ، ويمكن للمطورين التحكم بشكل كامل في اتصالات الشبكة.
كل هذا يمكن الوصول إليه عن طريق Service Worker.
ما هي المكونات الفنية للموديل PWA؟
يحتوي PWA على بعض المكونات التقنية المهمة التي تعمل معًا لتشغيل تطبيق الويب بانتظام.
المكونات التالية مطلوبة لإنشاء برنامج PWA جيد.
1.Service Worker
تتصل تطبيقات الويب الخاصة بنا مباشرة بالإنترنت وإذا لم تكن هناك شبكة
يتم عرض صفحة الديناصو الشهيرة.
إن Service Worker هو مكون من كود JavaScript يعمل كوكيل بين المتصفح والشبكة.
يساعد A Service Worker في إنشاء تطبيق غير متصل بالإنترنت باستخدام ذاكرة التخزين المؤقت للمتصفح API.
يمكن لـ Service Worker تحسين أداء وكفاءة تطبيقك ، سواء كان جهازك متصلاً بالإنترنت أم لا.
يجب أن يتمتع المطور بالتحكم الكامل في سلوك التطبيق وكيفية استجابته في سيناريوهات مختلفة.
يحتوي service worker على دورة الأحداث الخاصة به.
بمجرد اكتمال عملية التخزين المؤقت ، يكون تطبيقك جاهزًا للعب في وضع عدم الاتصال.
2. Manifest.json
Manifest.json هو ملف config من نوع JSON ، والذي يحتوي على معلومات البرنامج ، مثل أيقونة العرض على الشاشة الرئيسية ، والاسم المختصر للبرنامج ، ولون الخلفية أو الموضوع ، وما إلى ذلك.
مثال على هذا الملف أدناه:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | { "short_name": "Spinner", "name": "Fidget spinner", "icons": [ { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/home/?source=pwa", "background_color": "#3367D6", "display": "standalone", "scope": "/home/", "theme_color": "#3367D6" } |
يمكنك رؤية Manifest.json قيد التشغيل في الصور التالية: 
3.HTTPS
Service workers قادرة على رفض طلبات الشبكة وتعديل الاستجابات. Service workers تنفيذ جميع الإجراءات من جانب العميل.
وبالتالي ، يتطلب PWA بروتوكول HTTPS.
Status : يخبرنا ما إذا كان service worker نشطًا أم غير نشط.
غير متصل على الانترنت : بتحديد هذا الخيار ، سيعالج Chrome التطبيق إذا كان غير متصل بالإنترنت.
قم بتحديث التطبيق وشاهد كيف سيستجيب PWA لك في حالة عدم وجود شبكة.
Cache : يشير هذا القسم إلى أن جميع الملفات مخزنة مؤقتًا بواسطة service worker.
استنتاج
تعد التطبيقات التقدمية مساعدة لنا كمطورين لأنها توفر تجربة مستخدم أفضل .
أخيرا نتمنى أن يكون درس ما هو PWA ولماذا يجب الانتباه إليه؟ قد أفادكم
يسعدنا إثراء الموضوع من خلال تعليقاتكم و استفساراتكم المفيدة
مع تحيات موقع hdegy