تطبيقات الويب التقدمية PWA .. ما هي وكيف يمكنها زيادة عدد زوار موقعك الإلكتروني

تطبيقات الويب التقدمية PWA .. ما هي، وكيف يمكنها زيادة عدد زوار موقعك الإلكتروني

تطبيقات الويب التقدمية أو ما تعرف في اللغة الإنجليزية بمصطلح Progressive Web Apps واختصارها PWA هي عبارة عن برنامج يستخدم أحدث تقنيات برمجة الويب، وعادةً قد تقدم تطبيقات الويب التقدمية PWA إشعارات الدفع باستخدام JavaScript، ويمكن تحديثه بسهولة بهذه الطريقة ولا يتطلب أي خطوات تثبيت معقدة.

كما تعرف أيضاً تطبيقات الويب التقدمية أو PWA بأنها عبارة عن سلالة جديدة من برامج تطبيقات الويب التي تجمع بين مزايا التطبيق المحلي مع انخفاض الاحتكاك بالويب، أو ببساطة هي عبارة عن موقع ويب به جميع مزايا التطبيق وتمنحك التطبيقات التقدمية (PWA) إصداراً أسرع وأكثر موثوقية وجاذبية لموقعك على الويب أو متجر التجارة الإلكترونية الخاص بك.

وتبدأ تطبيقات الويب التقدمية PWA كمواقع ويب بسيطة ولكن مع تفاعل المستخدم معها فإنها تكتسب تدريجياً قوى جديدة تتحول بعد ذلك من موقع ويب إلى شيء يشبه إلى حد كبير تطبيقاً محلياً تقليدياً، وهناك من يرى أن PWA هي نقطة التقاطع بين تفاعل الويب وتجربة مستخدم تطبيقات الأجهزة المحمولة.

وقد تم إنشائها عن طريق استخدام تقنيات الويب الشائعة بما في ذلك HTML وCSS وJavaScript، والغرض من تطبيقات الويب التقدمية هو العمل على أي نظام أساسي يستخدم مستعرضاً متوافقاً مع أجهزة سطح المكتب والأجهزة المحمولة، وقد تم الإعلان عن هذا النظام في عام 2015م عن طريق المصمم فرانسيس بيرمان Frances Berriman ومهندس جوجل كروم Google Chrome أليكس راسيل Alex Russell.


فوائد استخدام PWA

يتم تطبيق تطبيقات الـ PWA على تطبيقات الويب السريعة والجذابة والموثوقة، وسوف تحاول بشكل تدريجي تحسين تجربة المستخدم بغض النظر عن المستعرضات أو الأنظمة الأساسية أو الأجهزة.

تطبيقات الويب التقدمية PWA .. ما هي وكيف يمكنها زيادة عدد زوار موقعك الإلكتروني

وبعبارة أخرى فإن PWA ليست مجرد إطار عمل أو أداة أو كلمة طنانة خيالية، ولكنها عقلية للتحسين المستمر من خلال الاستفادة من واجهات برمجة التطبيقات الحديثة للمتصفحات مما يؤدي إلى رضا كل مستخدم، بغض النظر عن إطار العمل الذي تختاره أو اللغة التي تختارها لكتابة الكود الخاص بك، لذا فهناك بعض الخصائص والمميزات الخاصة التي تتمتع بها التطبيقات التقدمية PWA نذكرها فيما يلي:

  • قابلة للتكيف؛ حيث تتكيف وظائفها مع الجهاز بغض النظر عما إذا كان جهازاً محمولاً أو جهاز كمبيوتر مكتبياً أو جهازاً لوحياً وما إلى ذلك، كما أنه يمكنك استخدامها في أي مكان ويمكنك اتخاذ العديد من الإجراءات مثل: نشر الرسائل أو الرد على الأحداث أو التعليق على المنشورات أو غير ذلك مع العلم أن تلك الإجراءات سوف تستكمل بمجرد عودتك إلى الإنترنت.
  • أيضاً من ميزات تطبيقات الويب التقديمة الاتصال المستقل؛ حيث أنها تدعم الوظائف غير المتصلة بالإنترنت، بالإضافة إلى الاتصالات منخفضة الجودة، ولا تعتمد PWA على اتصال المستخدم مثل مواقع الويب التقليدية، ويمكن أن يوفر تجربة مستخدم كاملة الميزات للمستخدمين غير المتصلين بالإنترنت أو المتصلين أو الذين يعانون من اتصال غير موثوق به.
  • كذلك من مميزات تطبيقات PWA التقدمية أنها تعمل لكل مستخدم، أيضاً بالنسبة للمستخدمين فهذه التطبيقات تشبه تطبيقاً قابلاً للتنزيل من المتجر، فضلاً عن أنها تستجيب لأي حجم من شاشات أجهزة سطح المكتب وأجهزة الهاتف المحمول، لذلك فمن الأفضل التأكد من إمكانية استخدام التطبيق الخاص بك على أي حجم شاشة وأن محتواه متاح بأي حجم لإطار العرض.
  • بفضل استراتيجيات التخزين المؤقت الخاصة بتطبيقات الويب التقديمة PWA فإنه يتم تحديثها في كل مرة يتوفر فيها اتصال بالإنترنت.
  • من مميزات تطبيقات الويب التقدمية أنها آمنة؛ ويعد الأمان هو الأولوية القصوى حيث تعمل مع HTTPS.
  • إمكانية إعادة المشاركة؛ حيث أنها تسمح بإرسال الإشعارات إلى مستخدميها بعد تثبيت المستخدمين لها، على غرار التطبيقات التي تقوم بتنزيلها من المتجر، حتى بعد أيام من مغادرتهم الموقع؛ حيث توفر هذه الإشعارات فرصة رائعة لإعادة التفاعل مع المستخدمين وتذكيرهم بالعودة إلى تطبيقك، وتتمتع إشعارات PWA بطابع أصلي تماماً ولا يمكن تمييزها عن إشعارات التطبيق المحلي.
  • قابلة للربط Linkable؛ حيث يمكن مشاركتها بسهولة عن طريق استخدام URL.
  • قابل للتثبيت Installable؛ حيث يسمح للمستخدمين بإتاحة تثبيت التطبيق على اجهزتهم المحمولة أو سطح المكتب Desktop مع رمز وصول تماماً مثل التطبيقات التي يتم تنزيلها من المتجر، وتتميز بسرعة تثبيتها على الشاشة الرئيسية للأجهزة المحمولة أو سطح المكتب، وذلك باستخدام واجهة مستخدم التثبيت المتوفرة في التطبيق.
  • توفر لمطوري الويب القدرة على بناء مواقع ويب أسرع وأكثر مرونة وجاذبية يمكن الوصول إليها من قِبَل ملايين الأشخاص حول العالم.
  • يمكن تشغيلها في الخلفية أو حتى القيام بمعالجة البيانات أثناء قيامك بشيء آخر على جهازك.
  • تخزن PWA واجهة المستخدم الأساسية للتطبيق مؤقتاً على الجهاز المحلي، لذلك عندما يفتح المستخدم التطبيق فإنه يتم تحميل واجهة المستخدم بسرعة قبل أن يحاول التطبيق الخروج والحصول على بيانات محدثة من الشبكة، وبالتالي فإن تطبيقات PWA تبدو أكثر سرعة من تطبيقات الويب التقليدية.
  • تشغل تطبيقات PWA مهام الخلفية أو Background مما يتيح لك تخزين الموارد مؤقتاً ومعالجة الخلفية في حين أن تطبيقات الويب التقليدية لا تستطيع القيام بذلك أو ربما يمكنها ذلك لكنها سوف تتطلب الكثير من التعليمات البرمجية المصنوعة يدوياً أو مكتبة تابعة لجهات خارجية.
  • تتميز أيضاً تطبيقات الويب PWA بالتحميل الفوري؛ حيث أنه يجب تحميل التطبيق بسرعة ويجب أن يكون تفاعلياً بسرعة كبيرة، كما أنه يمكنك إنشاء مواقع يتم إطلاقها في لحظة سواء كان لديك اتصال سريع للغاية أو حتى لا يوجد اتصال على الإطلاق، يمكن تحميل المواقع في أجزاء من الثانية وغالباً ما يكون أسرع من التطبيقات المحلية.
  • الإضافة إلى الشاشة الرئيسية: واختصارها (A2HS) وهي ميزة متوفرة في المتصفحات الحديثة التي تسمح للمتصفح بتثبيت تطبيق ويب، وبمجرد أن يبدي المستخدم اهتماماً بإحدى تطبيقات الويب التقدمية سوف يقترح المتصفح تلقائياً أن يضيف اختصاراً إلى شاشته الرئيسية.
  • المظهر الأصلي: يمكن أن يكون لتطبيقات الويب التقادمية التي يتم إطلاقها من الشاشة الرئيسية مظهر أصلي تماماً يشبه التطبيق، ويمكن أيضاً أن يكون لديها شاشة البداية أثناء التحميل، كما يمكنها التشغيل في وضع ملء الشاشة.

لماذا يتم بناء وتفعيل PWA ؟

يفتح استخدام تطبيق الويب التقدمي أو PWAs عالماً جديداً من الاحتمالات لتوسيع القدرات في تطبيقات الويب وتزويد المستخدمين بتجربة مألوفة، وفيما يلي بعض المزايا في اختيار بناء هذه التطبيقات بدلاً من استخدام تقنيات أخرى:

  • منصة الويب: قدرات الويب قوية وممتدة في أنظمة تشغيل الأجهزة المحمولة وسطح المكتب الرئيسية.
  • مطورو الويب: البدء في تطوير الويب يمكن الوصول إليه وشامل كما أن جميع تقنيات الويب مفتوحة وليس لديك قيود على البرامج.
  • التوزيع: متصفحات الويب هي قنوات التوزيع؛ حيث تتم مشاركة تطبيقات الويب التقديمة PWA بسهولة مع عناوين URL.
  • سهولة النشر: أنت لست بحاجة إلى انتظار الموافقة على الإصلاحات أو الميزات الجديدة فقط كل ما عليك هو دفع الكود الخاص بك إلى الخادم وعلى الفور سوف يصبح لديك إصدار جديد.
  • تعد متاجر التطبيقات تجربة مرهقة للمستخدمين المبتدئين ولكن مع تطبيقات الويب التقديمة PWAs ما عليك سوى رابط لتثبيتها.

ما هو هيكل PWA؟

التطبيقات التقدمية بشكل عام هي تطبيق عادي للصفحة الواحدة. أي أن لديهم البنية العادية لتطبيق ويب أو تطبيق من صفحة واحدة (SPA) مع فهرس (index.html) وملفات (HTML) وأوراق النمط المتتالية أو (CSS) وجافا سكريبت (JS)، ولكن بالإضافة إلى هذه العناصر هناك ثلاثة أشياء أخرى مطلوبة ليتم اعتبارها PWA:

  1. ملف بيان أو A Manifest File: وهو عبارة عن ملف يصف المعلومات الموجودة في PWA، كما أنه يتحكم في كيفية ظهور تطبيقك للمستخدم ويضمن إمكانية اكتشاف التطبيق، بالإضافة إلى أنه يصف اسم التطبيق وعنوان URL والأيقونات وجميع التفاصيل الأخرى اللازمة لتحويل موقع الويب إلى تنسيق يشبه التطبيق.
  2. أيقونة التطبيق An App Icon: وهي عبارة عن صورة تستخدم كرمز على الأجهزة المحمولة عند تثبيتها.
  3. عمال الخدمة Service Workers: وهو عبارة عن برنامج نصي أو ملف جافا سكريبت JavaScript مسجل في المتصفح يسمح ببعض المهام المحددة مثل التخزين المؤقت ودفع الإشعارات، كما أنه يسمح بالتحكم في كيفية تعامل متصفح الويب مع طلبات الشبكة والتخزين المؤقت، ويمكن لمطوري الويب إنشاء صفحات ويب سريعة وموثوقة وتجارب غير متصلة بالإنترنت.

الفرق بين تطبيقات الويب التقدمية والتطبيقات الأصلية:

من المعروف أن تطبيقات الويب التقدمية PWA هي أرخص في التطوير مقارنة بالتطبيقات الأصلية؛ لأنه عندما تقوم بتطوير تطبيق أصلي سوف يتعين عليك تعلم لغة برمجة معينة ثم إنشاء إصدار من هذا التطبيق لكل نوع من أنواع الأجهزة المحمولة المختلفة سواء كانت Android أو iOS، بالإضافة إلى أنك سوف تحتاج إلى موارد مادية أو غيرها للحفاظ على التطبيق وتحديثه، مما يعني أن هذا الأمر سوف يتطلب الكثير من الوقت والجهد والمال.

بينما في حالة استخدامك لتطبيقات ويب تقدمية يمكن أن يكون لديك قاعدة كود واحدة للأنظمة الأساسية لأجهزة المحمول المختلفة، فضلاً عن أنه سوف يوفر عليك الكثير من الوقت لأنك لن تحتاج إلى تطويره من البداية، كما تتميز هذه التطبيقات بسرعة التحميل العالية، في حين أن التطبيقات الأصلية أو التقليدية أدائها ضعيف وسرعة تحميلها بطيئة للغاية، لذا فسرعة التحميل سوف تضمن لك زيادة عدد الزوار والمستخدمين وعدم فقدانهم.


علاقة تطبيقات الويب التقدمية PWA بتحسين محركات البحث SEO

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

لذا يجب ملاحظة أنه إذا أردت تحويل موقعك الإلكتروني إلى تطبيق ويب تقدمي PWA فلا ينبغي عليك أن تقوم بتحسين محركات البحث SEO لهذا الموقع مباشرة ظناً منك أن تطبيقات الويب التقدمية لها فوائد رائعة في تحسين محركات البحث، ولكنها تقدم للمستخدمين تجربة مستخدم رائعة مما قد تجعلك بعد ذلك تتفوق على منافسيك.


أسباب تحويل الموقع الإلكتروني إلى تطبيق ويب تقدمي

فضلاً عن العديد من ميزات وفوائد استخدام التطبيقات التقدمية PWA والتي قمنا بالإشارة إليها آنفاً، هناك بعض الأسباب الهامة التي تجعلك تقوم بتحويل موقعك الإلكتروني إلى تطبيق ويب تقدمي، وهذه الأسباب هي:

  • دفع الإشعارات: تعد دفع الإشعارات من أهم الأسباب التي تجعلك تقوم بتحويل موقع الويب الخاص بك إلى تطبيق ويب تقدمي؛ حيث أثبتت الدراسات الحديثة في هذا المجال أن المستخدمين الذين يدعمون دفع الإشعارات لديهم معدل مشاركة اعلى بنسبة 88%، وعادةً لا تقدم تطبيقات الويب التقليدية هذه الميزة، ولكن من خلال إنشاء PWA فإنه يمكنك استخدام تلك الميزة بكل سهولة.
  • سرعة التحميل: تعد سرعة التحميل هي سبب آخر حول تحويل موقعك الإلكتروني إلى تطبيق ويب تقدمي؛ حيث أنه إذا كان تحميل موقعك على الويب بطيئاً فمن المحتمل أنك تفقد الكثير من حركة المرور، في حين أنه إذا قمت بتحويل موقعك الإلكتروني إلى إحدى تطبيقات الويب التقدمية PWA فسوف يكون المحتوى الخاص بك متاحاً حتى إذا كان المستخدم غير متصل بالإنترنت وسيتم تحميله بسرعة وبشكل موثوق.
  • كذلك هناك إحدى الدراسات تشير إلى أنه عند إنشاء PWA لموقعك على الويب فإنه يحاكي واجهة تطبيق أصلي لهاتف المحمول، ومن الممكن أن تحصل على معدلات مشاركة وتحويل أعلى.
  • يمكن تحويل أي موقع إلكتروني إلى تطبيق ويب تقدمي، وهناك العديد من المواقع التي نجدها على شبكة الإنترنت هي في الأصل عبارة عن تطبيق ويب تقدمي PWA، على سبيل المثل موقع تويتر Twitter.com إذا قمت بزيارة هذا الموقع على هاتفك المحمول فيمكنك تثبيته على شاشة الهاتف الرئيسية، وعند فتح موقع تويتر سوف تلاحظ أنه يبدو ويعمل تماماً مثل أي تطبيق محلي، ولا يوجد أي فرق بين تشغيله من هاتف iPhone أو هاتف أندرويد Android.

علاقة الووردبريس WordPress بتطبيقات الويب التقدمية PWA

هناك علاقة قوية بين الووردبريس وتطبيقات الويب التقدمية؛ حيث يمكن تحويل موقع الووردبريس WordPress الخاص بك إلى تطبيق ويب تقدمي، يمنح تحويل موقع WordPress الخاص بك إلى PWA للمستخدمين تجربة مماثلة لاستخدام تطبيق ويب وذلك عن طريق زيارة موقع الويب الخاص بك باستخدام متصفح الهاتف المحمول الخاص بالمستخدمين، وإذا كان لديك موقع WordPress فيمكنك إنتاج تطبيقات ويب مصممة بشكل جيد وعملية للغاية في بضع خطوات فقط.

ويرى العديد من المطورين وأصحاب المواقع أن عدم تحويل موقع الووردبريس WordPress الخاص بك إلى تطبيق ويب تقدمي PWA سوف يسبب لك خسارة مضمونة في رضا الزائر أو المستخدم.

ولكي تقوم بإعداد تطبيق الويب التقدمي في الووردبريس الخاص بك هناك بعض المتطلبات الأساسية التي تحتاجها لذلك وهي: يجب تقديم موقع الووردبريس WordPress الخاص بك من مصدر آمن، أي أنه يجب أن يكون مصدر الويب الخاص بك هو HTTPS وليس HTTP، كذلك يجب أن يكون إصدار الووردبريس أعلى من 3.5.0، وإصدار لغة البرمجة وهي الـ PHP أعلى من 5.3


طريقة تحويل موقع الووردبريس WP الخاص بك إلى تطبيق ويب تقدمي PWA:

هناك طريقتين لتحويل وهما:

أولا: التحويل عن طريق تثبيت الووردبريس: ويتم ذلك في الخطوات التالية:

  • قم بزيارة مدير الووردبريس أو WordPress Admin، ثم الإضافات أو الـ Plugins، ثم إضافة أو Add New.
  • بعد ذلك ابحث عن Super Progressive Web Apps.
  • انقر على التنصيب الآن أو Install Now ثم تنشيط Activate.
إضافة Super Progressive Web Apps لتفعيل تطبيقات الويب التقدمية PWA

ثانياً: التثبيت يدوياً Install Manually: ويتم ذلك عن طريق الخطوات التالية:

  • حمل إضافة Super Progressive Web Apps إلى محتوى الووردبريس / الإضافات Plugins مباشرة إلى الخادم أو الـ Server الخاص بك.
  • انتقل بعد ذلك إلى مدير الووردبريس أو WordPress Admin ثم الإضافات Plugins.
  • ثم أخيراً نشط المكون الإضافي لتطبيق الويب التقدمي الفائق Super Progressive Web App Plugin من القائمة.

تخصيص تطبيق الويب التقدمي PWA الخاص بك:

يجب أن يكون تطبيق الويب التقدمي PWA الخاص بك جاهزاً للاختبار باستخدام الإعدادات الافتراضية عند التنشيط حتى يمكنك تخصيصه بشكل أكبر وجعله خاصاً بك بطريقة فعالة، وتستطيع أن تفعل ذلك عن طريق الخطوات التالية:

  • انتقل إلى مدير الووردبريس WordPress Admin ثم Super PWA.
  • قم بتعيين لون الخلفية لشاشة البداية ليتم عرضها عند فتح تطبيق الويب التقدمي على جهاز الهاتف المحمول.
  • قم بتعيين أيقونة أو رمز التطبيق وسوف يكون ذلك رمز تطبيق الويب التقدمي PWA الخاص بك عند إضافته في الشاشة الرئيسية لجهاز الهاتف المحمول، ويجب أن يكون الرمز أو الأيقونة عبارة عن صورة بصيغة PNG وحجمها 192 ×192 بكسل.
  • بعد ذلك قم بتعيين الصفحة غير المتصلة بالإنترنت، وسوف يتم عرض هذه الصفحة إذا كان المستخدم أو الزائر غير متصل بالإنترنت ولم يتم تخزين الصفحة التي طلبها مؤقتاً، ويجب عليك إنشاء صفحة ووردبريس WordPress مخصصة وتعيينها في هذه الصفحة أي داخل الصفحة التي تقوم بإنشائها، كما يمكنك إضافة ملاحظة للزائر يكون نصها مثلاً: “يبدو أنك غير متصل بالإنترنت والصفحة التي طلبتها غير متاحة الآن، يرجى التحقق مرة أخرى عند اتصالك بالإنترنت” .
  • ثم أخيراً احفظ الإعدادات.

طريقة اختبار تطبيق الويب التقدمي PWA الخاص بك

لكي تقوم بتجربة اختبار تطبيق الويب التقدمي الخاص بك حاول أن تتبع الخطوات التالية:

تخصيص إضافة Super Progressive Web Apps لتفعيل تطبيقات الويب التقدمية PWA
  • افتح متصفحاً مدعوماً مثل جوجل كروم Google Chrome في جهاز هاتف محمول Android.
  • ادخل في شريط البحث موقع الويب الخاص بك وأضغط تحميل ومن ثم انتظر حتى يتم تحميل موقعك بالكامل، ويجب أن ترى أيقونة التطبيق الخاصة بك وزر ضغط يشير إلى “إضافة إلى الشاشة الرئيسية أو Add To Home Screen”.
تثبيت تطبيقات الويب التفاعلية PWA على الموبايل
  • بعد ذلك اضغط فوق هذا الزر وسوف يتم إضافة تطبيق الويب التقدمي PWA الخاص بك إلى شاشتك الرئيسية وانتظر بعدها حتى يكتمل التثبيت.
  • انتقل بعد ذلك إلى شاشتك الرئيسية وافتح التطبيق ثم تصفح بعض الصفحات ثم أغلق التطبيق.
  • افصل الإنترنت وافتح التطبيق مرة أخرى، ويجب أن تكون قادراً على رؤية جميع الصفحات التي قمت بتصفحها مسبقاً.
  • بعد ذلك حاول أن تقوم بزيارة صفحة ما لم تفتحها من قبل، سوف تشاهد الصفحة التي قمت بتعيينها على أنها صفحة غير متصلة بالإنترنت OFFLINE PAGE في إعدادات SuperPWA.

أخيرًا، إذا كنت تسعى إلى جذب العديد من العملاء لشراء منتجاتك أو قراءة المحتوى الخاص بك أو غير ذلك فربما يكون امتلاكك لموقع ويب غير كافياً لجذب هؤلاء العملاء، لذا قد يكون استخدام تطبيقات الويب التقدمية PWA مفيداً جداً لكي يتفاعل الزوار مع موقعك الإلكتروني وتقديم تجربة أفضل لهم.

وتعد تطبيقات PWA التقدمية شكلاً جديداً ومثيراً لتطبيقات الويب الحديثة؛ حيث تستفيد هذه التطبيقات من أحدث إمكانيات الويب لتقديم تجربة تجمع بين الميزات الفريدة لتطبيقات الأجهزة المحمولة الأصلية ومزايا الويب.

المجتمع الأكبر عربيًا لمستخدمي ووردبريس

انضم لمجتمع عرب ووردبريس الأكبر عربيًا لدعم مستخدمي ووردبريس. من خلال المجتمع ستحصل على المساعدة اللازمة في إنشاء موقعك الووردبريس أو تخصيص متجرك على ووكومرس

زيارة منتدى عرب ووردبريس ←
مدرس مساعد بكلية الآثار – جامعة جنوب الوادي، باحث دكتوراه في مجال الأثار الإسلامية والمسيحية، حاصل على درجة الماجستير في تخصص العمارة المسيحية والقبطية. مهتم بمجال الووردبريس وبرمجة الويب، ومؤمن جدا بأهميتهما؛ فهما مستقبل الأجيال القادمة.