ما هي PWA ؟

في السنوات الأخيرة ، سمعنا الكثير عن تطبيقات الويب التقدمية Progressive Web Apps (اختصار PWA). هذه التطبيقات هي تطبيقات الويب التي تستفيد من أحدث الميزات في متصفحات اليوم ، ويمكن إضافتها إلى الشاشة الرئيسية للهاتف لجعلها تبدو مثل أي تطبيق جوال أصلي. لذلك ، فإن تطبيق الويب التقدمي ليس تقنية أو إطار عمل جديد لجافا سكريبت ، ولكنه مجموعة من الممارسات الجيدة والميزات التي يجب أن تتوفر في تطبيق الويب ، والتي تشبه تطبيق الهاتف الأصلي الذي قمنا بتنزيله مسبقًا من متجر Google Play. الهواتف المحمولة ومتجر التطبيقات لهواتف وأجهزة Apple. الهدف هو تزويد مستخدمي تطبيقات الويب بتجربة مستخدم مماثلة لتلك الموجودة في التطبيقات الأصلية. يجب أن يكون هذا النوع من التطبيقات قادرًا على العمل بشكل طبيعي في جميع الأجهزة مع جميع الإمكانات التقنية. على سبيل المثال ، قد لا تتوفر بعض الوظائف في بعض الهواتف أو الأجهزة القديمة ، ولكن يجب التأكد من أن التطبيق يمكنه الاستمرار في العمل بشكل طبيعي ، خاصة من حيث الأداء والسرعة.

مميزات تطبيقات الويب التقدمية PWA

1- أمنة: تتعامل تطبيقات PWA مع العديد من الواجهات الأصلية في المتصفح ، وتعمل هذه التقنيات فقط على الصفحات والمواقع المقدمة من خلال بروتوكول https لحماية المستخدمين من هجمات man-in-the-middle ضد بياناتهم الحساسة. بشكل عام ، أصبح استخدام بروتوكول HTTPS أمرًا يوصى به بشدة لكل مالك موقع على الإنترنت ، وحتى محرك البحث Google قرر منذ اعتماده كأحد معايير تصنيف نتائج البحث.
2-متجاوب: يجب أن تستجيب تطبيقات الويب التقدمية لجميع أنواع وأشكال الأجهزة. بغض النظر عن حجم الشاشة التي يفتح عليها المستخدم التطبيق ، يجب أن يكون التعامل مع واجهة المستخدم سهلاً ويمكن الوصول إليه.
3- اتصال بحالة offline: في تطبيقات الهاتف المحمول الأصلية ، يمكننا فتح التطبيق ورؤية الأجزاء الرئيسية لواجهة المستخدم (على سبيل المثال ، الشريط العلوي) حتى لو لم يكن الجهاز متصلاً بالإنترنت. ليس هناك شك في أنك حاولت قبل الدخول إلى تطبيق Facebook أو Twitter دون اتصال ، ولكنك لاحظت أن التطبيق يعرض محتوى قديمًا تم تخزينه في ذاكرة التخزين المؤقت. هذه التجربة هي ما تحاول تطبيقات الويب التقدمية محاكاته ، وتعرف طريقة تحقيق ذلك باسم Service Workers.

ماهو Service workers ؟

باختصار Service workers عبارة عن رمز أو نص برمجي (بدون الوصول إلى DOM) يعمل فيه المتصفح في الخلفية ويعمل بشكل منفصل عن صفحة الويب. تُستخدم هذه الوظيفة لوظائف التطبيق التي لا تتطلب تفاعلًا مباشرًا مع المستخدم. من بين تلك الوظائف التي تستخدم SW ، أبرزها: إرسال تنبيهات للمستخدمين من خلال Push API. تخزين أجزاء معينة من التطبيق في وضع غير متصل بالشبكة. في وضع التطوير ، يمكنك استخدام Service workers من خلال الخادم المضيف المحلي ، بينما في وضع الإنتاج ، يجب عليك تثبيت شهادة SSL على الخادم يتطلب HTTPS . على أي حال ، موضوع Service workers طويل جدًا إذا كنت تريد حقًا معرفة كيفية عمل هذه التقنية ، أقترح عليك زيارة هذا الرابط.

4- قابل للتثبيت: الهدف الرئيسي من إنشاء تطبيق ويب تقدمي هو تمكين المستخدمين من فتحه من الشاشة الرئيسية للهاتف تمامًا مثل استخدام التطبيق الأصلي من أجل تحقيق هذا الهدف ، يجب عليك إضافة ملف Web Manifest إلى التطبيق ، وهو ملف JSON يحتوي على مجموعة من المعلومات المتعلقة بالتطبيق ، مثل الرمز والاسم واتجاه الشاشة وما إلى ذلك.
5- السرعة: يجب أن تعمل هذه التطبيقات بسرعة كبيرة ، خاصة أثناء التنزيل. وفقًا لـ Google ، يغلق حوالي 53٪ من المستخدمين أي موقع ويب يستغرق تحميله أكثر من 3 ثوانٍ ، لذلك يجب أن تكون سرعة التطبيق وخفة التطبيق محور تركيزك الأساسي وتركيزك عند إنشاء تطبيقات ويب حديثة. فقط من خلال تحسين سرعة تحميل الموقع تمكنت الشركات الكبيرة والمواقع الإلكترونية من زيادة عدد الجلسات لكل زائر ، مما يعني تقليل معدل ارتداد الزائر وبالتالي زيادة معدل التحويل بمعدلات تتراوح من 10٪ إلى 15٪ في كثير من الحالات .

المزايا الإيجابية لـ تطبيقات الويب التقدمية PWA

  • تطويره وتوسيعه أرخص وأسرع مقارنة بالتطبيقات الأصلية.
  • Google هي الداعم الرئيسي لمشروع تطبيقات الويب التقدمية ، وهي وحدها كافية لضمان مستقبل التطبيقات.
  • صديق لمحركات البحث
  • حجمه صغير ، لا يزيد عن 1 ميغا بايت في معظم الحالات.

الخلاصة: ليس هناك شك في أن تطبيقات الويب التقدمية PWA لا يزال لديها الكثير لتقدمه ، وقد حققت العديد من العلامات التجارية التي استثمرت في تطبيقات الويب التقدمية نتائج مبهرة بسرعة مع ميزات جديدة، وقد نرى تنزيل متجر خاص مشابه للتطبيقات الأصلية من Google.

المصادر:
web.dev
wikipedia

English Version

Share on facebook
Share on twitter

مواضيع ذات صلة

3 Replies to “ماهي تطبيقات الويب التقدمية PWA ؟ مميزاتها وطريقة عملها”

التعليقات مغلقة.