Progressive Web Apps (PWA)

ما هي Progressive Web Apps أو PWA؟

Progressive Web Apps هي اندماج تقني بين التطبيقات الأصلية وتطبيقات الويب القائمة على HTML5 التي نعرفها. ظهرت PWA لسدّ الفجوة التقنية بين التطبيقات وصفحات الويب.

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

الميزات التي يجب أن تمتلكها Progressive Web Apps

لتوضيح مفهوم PWA بشكل كافٍ، لنتعمق في الميزات الأساسية التي يجب أن تتمتع بها هذه التقنيات.

نتحدث طبعاً بمعنى عام. ومن هناك، سيكيّف كل نموذج عمل/خدمة الأهداف بما يناسب احتياجات جمهوره المستهدف.

السرعة

الوقت من ذهب. ليس لـ Google فحسب، بل لأي عمل قد يدفع التحميل البطيء للمنتج المستخدم إلى التخلي عن شراء محتمل.

أكدت Google هذا المبدأ منذ زمن طويل. كان مولد مشروع AMP لهذا الغرض، وتنضم الآن PWA إلى الحاجة للوصول السريع إلى معلومات التطبيق.

اليوم، المستخدم لا يصبر. لا ينتظر تحميل الموقع كاملاً. وفقاً لـ Think with Google، 53% من المستخدمين لا ينتظرون أكثر من 3 ثوانٍ لتحميل موقع ويب.

الموثوقية

عند الحديث عن الموثوقية نقصد ضمان عمل الموقع. بفضل ما يُعرف بـ Service Workers، يجب ألا تعيق مشاكل الاتصال بالشبكة تحميل PWA.

قابلية التثبيت

يمكن تثبيت PWA دون الحاجة للذهاب إلى Chrome Store أو Apple Store أو متاجر التطبيقات التقليدية. تذكّر أنها ليست تطبيقات أصلية، فيمكن الوصول إليها دون المرور عبر هذه المتاجر.

يعمل التثبيت ببساطة كاختصار. لا يحتاج إلى مساحة لتخزين ملفات أخرى.

أجهزة مختلفة: محمولة وسطح مكتب

تتطبق تقنيات التصميم المتجاوب للهواتف وسطح المكتب لأن قاعدة الكود موحّدة بين الجهازين.

مزايا وعيوب PWA

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

• ›توفير الموارد
• ›لا حاجة لتثبيت
• ›سرعة تحميل عالية جداً
• ›إشعارات push مباشرة إلى الهاتف الذكي
• ›تعمل في كل أنظمة التشغيل
• ›أمان مُحسَّن
• ›عمل تطوير وصيانة أقل من التطبيقات الأصلية
• ›اقتصادية أكثر من التطبيقات الأصلية

العيوب

• ›تحتاج إلى اتصال بالإنترنت.
• ›ليست كل المتصفحات تدعم PWA.
• ›استهلاك بطارية مرتفع

ما هو Service Worker؟

عودة سريعة إلى الجانب التقني، يجب أن نتحدث عن جانب محدد لا يمكن للتطبيقات التقدمية أن تعمل دونه. Service worker هو سكربت يعمل في الخلفية ويوجّه طلبات إلى تطبيق الويب أو إلى الذاكرة المؤقتة أو إلى الشبكة نفسها.

من المهم معرفة أن Service Workers لا يمكنها العمل إلا إذا كان لديك شهادة SSL وتقدّم الخدمة عبر https.

والآن لنرَ كل شيء بمثال: موقع BMW وPWA الخاص بها.

مثال على PWA: BMW

حاولنا الكتابة دون التعمق في الجانب التقني، والآن سنرى مثالاً لتطبيق سيساعد على فهم مفهوم PWA بشكل أفضل.

عند الدخول إلى موقع BMW، نلاحظ أنه يمتلك تصميماً جذاباً جداً يُولي الأولوية للجانب البصري، لكن لنرَ بصرف النظر عن التصميم، أيّ نوع من المواقع نتعامل معه.

ظاهرياً موقع "عادي"، لكن إذا تعمقنا في الكود، نجد المفاجأة الأولى. فهو في الواقع موقع مُطوَّر بالكامل بـ AMP، لا في النسخة المحمولة فحسب.

لكن لنعد إلى الموضوع الذي نتناوله اليوم.

بعد الدخول إلى الموقع، لنذهب إلى "تخصيص والتحكم" في Chrome.

كما ترى، فُتحت نافذة بمحتوى موقع BMW. عند مقارنة المحتويين، نلاحظ أنهما متطابقان تقريباً.

صورة الموقع في المتصفح (Chrome)

صورة الموقع في PWA لسطح المكتب

تمكّن مطورو BMW من الحفاظ على المظهر البصري نفسه. عند قبول "تثبيت" PWA من مجلد تطبيقات Chrome أو على سطح المكتب (بحسب نظام التشغيل، نستخدم حالياً MacOS)، تم تنزيل اختصار لـ PWA.

إذا غمرتك التطبيقات المثبّتة وأردت إزالتها، فاذهب فقط إلى نافذة نسخة PWA وانقر يميناً كما في Chrome واختر إلغاء التثبيت.

في النسخة المحمولة الأمر مشابه تقريباً. عند الدخول إلى موقع لديه نسخة PWA، تتلقى إشعار "إنشاء اختصار".

عند الدخول إلى موقع لديه PWA، نرى خيار إنشاء اختصار.

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

DevTools لتعلم المزيد عن PWA

في هذه النقطة، نريد الدخول في مثال لشرح مفاهيم وميزات هذا النوع من التطبيقات.

لذلك سنستخدم أدوات المطور التي يقدمها Chrome (DevTools). افتح المُفحِّص بالنقر اليميني واذهب إلى Application.

Chrome Devtools

App Manifest (Web Application Manifest)

manifest هو ملف JSON صغير يقدّم للمتصفح جوانب الأسلوب الأساسية لتجنب التغييرات المفاجئة.

مثال على Manifest (JSON)

Service Workers

كما شرحنا سابقاً، يمكننا الآن رؤية ما هي. نرى ملفات JS والسكربتات المستخدمة فيها. تُثبَّت Service Workers في المتصفح. سيكون لديك عدة منها لتطبيقات ويب مختلفة.

من الوظائف الرئيسية لهذا النوع من الكود ضمان تقديم النسخة نفسها دائماً حتى لو فُتحت تبويبات أخرى (يتحكم في التخزين المؤقت).

كيف نطبّق PWA في WordPress؟

إذا طوّرت موقعك بكود مخصص، فعليك القيام بعمل يدوي كبير، لكن إذا طوّرته في WordPress، فالوضع مختلف جداً. في هذه الحالة، لدينا عدة إضافات تتيح تفعيل تقنية PWA بنقرتين. في الواقع، نسخة PWA لـ SEOcrawl هي نتيجة الإضافة التي نوصي بها.

أكثر الإضافات شعبية لتطبيق PWA في WordPress.

PWA في التسويق

بالنسبة لنا في التسويق، يمكن لـ Progressive Web Apps أن تساعد في تحقيق الأهداف التي يضعها أي قسم تسويق في باله لتنمية العلامة التجارية.

الولاء والمبيعات

أحد الأهداف التي لا تجيد بعض العلامات التجارية إدارتها. نعلم جميعاً المشاركة المنخفضة لعلامات الهواتف المحمولة في تعاملها مع العميل، مثلاً.

إشعارات push من PWA من أكثر الإجراءات فعالية، وتسهم في توليد المبيعات.

تقدم دراسة Gartner عن PWA سلسلة من الإحصائيات المثيرة جداً للاهتمام بشأن Lancome وAlibaba. تذكر Lancome زيادة بنسبة 17% في معدل التحويل، و51% في الجلسات من الأجهزة المحمولة، و52% في iOS. حسّنت Alibaba (المجموعة التي تنتمي إليها Aliexpress) معدل التحويل بنسبة 76%.

تحدثنا عن عملاقَين عالميَّين، لكن ثبت أن وجود تطبيق على الهاتف لا يثقل بأوقات تحميل وتنفيذ، ويحترم تصميماً جيداً، يزيد معدل التحويل.

في الختام، يمكن القول إن PWA تنتشر تدريجياً، خاصة بين العلامات التجارية الكبيرة. في إسبانيا سيستغرق إدراك الإمكانات الهائلة لهذه التقنية بعض الوقت، لكنها ستُطبَّق دون تأخير.

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

مراجع

• ›توثيق Google عن PWA