تطبيق الويب التقدمي: التكنولوجيا والمزايا والعيوب

تؤثر حمى الهواتف المحمولة على الجميع ، والمحلات التجارية عبر الإنترنت ليست استثناءً. تحتاج كل علامة تجارية إلى أن يكون لها حضور متنقل في الوقت الحاضر. هذه هي الطريقة التي يمكن القيام بها:

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

تطبيق الويب التقدمي (PWA) عبارة عن مجموعة من التقنيات التي تتيح لك تثبيت موقع ويب على جهاز كتطبيق. هذا يعني أنك لست بحاجة إلى تطوير تطبيقات iOS و Android مع موقع الويب. بصرف النظر عن ذلك ، ليس من الصعب تطوير PWAs: على سبيل المثال ، يمكن لفريقك القيام بذلك عن طريق تخصيص السمات الجاهزة مثل Magento 2 PWA studio.

يتم استخدام PWAs على نطاق أوسع مما قد تتخيله. يتم استخدامه للتجارة الإلكترونية والمشاريع التعليمية وشركات السفر وخدمات البث وغيرها. تستخدم العلامات التجارية الكبرى ، مثل Agent Provocateur و UK Meds و Alibaba و Eleganza ، تطبيقات PWA كأساس أو بالإضافة إلى تطبيقات الهاتف المحمول الخاصة بهم.

هندسة تطبيقات الويب التقدمية (PWA)

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

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

نتيجة لذلك ، يتلقى PWA أفضل صفاته ، مثل UX الجيد ، والسرعة العالية ، والاستجابة ، وما إلى ذلك. وإليك العناصر الرئيسية لـ PWA.

موصى به لك: الأطر الأكثر شيوعًا لبناء تطبيقات الويب التقدمية (PWAs).

عمال الخدمة

تعمل البرامج النصية المعروفة باسم "عمال الخدمة" في خلفية المتصفح. تعمل بدون صفحة ويب ولديها ميزات رائعة مثل التعامل مع الإشعارات وإدارة طلبات الشبكة. حتى الآن ، دعمت وظائف مثل التخزين المؤقت ، ومزامنة الخلفية ، ووضع عدم الاتصال ، ودفع الإشعارات.

شل التطبيق

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

بيان تطبيق الويب

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

مخبأ

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

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

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

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

وفقًا لـ Statista ، في عام 2021 ، تم إجراء حوالي 75 ٪ من مبيعات التجزئة العالمية في التجارة الإلكترونية من خلال قنوات الهاتف المحمول. في عام 2017 ، بدت الأرقام والتنبؤات للمستقبل كما يلي:

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

مصدر الصورة: Statista.

أداء رائع

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

رؤية أفضل

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

تجربة مستخدم تشبه التطبيقات

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

عبر الدعم

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

تكلفة تطوير أقل

يتطلب تطوير التطبيق الأصلي اثنين من قواعد الرموز المميزة. على سبيل المثال ، يتطلب إنشاء التطبيق الأصلي مطورين مهرة في Swift أو Objective-C لتطوير iOS و Kotlin أو Java لنظام Android ، وهو أمر مكلف. تعتمد تطبيقات الويب التقدمية بدورها على لغات البرمجة المستخدمة على نطاق واسع مثل HTML و CSS و JavaScript. بصرف النظر عن ذلك ، تتطلب صيانتهم فريقًا واحدًا متخصصًا في تطوير الويب.

يعمل دون اتصال

إحدى الميزات البارزة لـ PWA هي التنقل دون اتصال بالإنترنت. إذا فشل اتصالك ، فلن تفقد الوصول إلى البيانات والخدمات المهمة.

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

لا حاجة لوضع التطبيق في متاجر التطبيقات

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

باستخدام PWA ، يمكنك تجنب مشكلة متجر التطبيقات بالكامل. تعد PWAs عملية لكل من العملاء والشركات لأنها تسمح للعملاء باستخدام التطبيق الخاص بك وتلقي التحديثات دون تنزيله أو انتظار جولة تحقق جديدة.

قد يعجبك: React Native vs Flutter vs PWA: Battle of Trending Mobile App Frameworks.

عيوب تطبيق الويب التقدمي (PWA)

عند اختيار نوع تطبيق الهاتف المحمول الذي تريد تقديمه لعملك ، ضع في اعتبارك أنه نظرًا لأن التكنولوجيا جديدة نسبيًا ، فهناك بعض الأخطاء التي يجب مراعاتها.

التوافق مع نظام iOS غير كافٍ

لا يدعم iOS كل ميزات PWA. بالمقارنة مع Android ، فإن دعم العاملين في الخدمة محدود للغاية. يمكنك فقط حفظ بيانات التطبيق وتخزين ملفاته مؤقتًا (لا توجد مهام في الخلفية). سعة التخزين تصل إلى 50 ميغا بايت. نتيجة لهذا ، يتم تقييد وصول العديد من المستخدمين إلى PWAs. هناك أيضًا قيود على استخدام بعض الوظائف المضمنة مثل Siri والمدفوعات داخل التطبيق وما إلى ذلك. تجربة المستخدم في PWA تفقد مقارنة بتجربة المستخدم التي تقدمها التطبيقات الأصلية. وهي خسارة حقيقية في عالم تكون فيه تجربة المستخدم على الأقل بنفس أهمية التسويق.

وظائف محدودة

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

زيادة استهلاك البطارية

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

كيف تعمل عملية التثبيت؟

دعونا نرى كيف تعمل عملية التثبيت على مثال من موقع Lancome.com

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

مصدر الصورة: لانكوم.

قد يعجبك أيضًا: Magento PWA Studio: أداة تطبيق الويب التقدمي لـ Magento!

ما هي النتائج التي يمكن أن تتوقعها؟

تنتج تطبيقات الويب التقدمية نتائج ممتازة للشركات التي تطلقها. على سبيل المثال ، وفقًا لموقع web.dev ، بعد تقليل حجم التطبيق بنسبة 97 بالمائة تقريبًا ، شهد Twitter زيادة بنسبة 65 بالمائة في مشاهدات الصفحة لكل جلسة ، وتغريدات أكثر بنسبة 75 بالمائة ، وانخفاضًا بنسبة 20 بالمائة في معدل الارتداد. كما كان لديها 2.3 مرة حركة مرور عضوية ، و 58 بالمائة أكثر من المشتركين ، و 49 بالمائة أكثر من المستخدمين النشطين يوميًا بعد التحويل إلى PWA. شهدت Hulu زيادة بنسبة 27 في المائة في عدد الزائرين المتكررين من خلال تقديم تطبيق ويب تقدمي بالإضافة إلى تجربة سطح المكتب الخاصة بالمنصة.

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

 هذا المقال بقلم أليكس هوسار. أليكس هو كبير مسؤولي التكنولوجيا في شركة تقدم خدمات تطوير تطبيقات الويب التقدمية. من خلال العمل في الشركة لما يقرب من عقد من الزمان ، اكتسب Alex الكفاءة في تطوير الويب وإنشاء تطبيقات ويب تقدمية (PWAs) وإدارة الفريق. يعمق أليكس باستمرار معرفته في مختلف المجالات التكنولوجية ويشاركها في مقالاته. يساعد المبرمجين في التغلب على التحديات المشتركة والبقاء على اطلاع بأحدث اتجاهات تطوير الويب. يمكنك متابعته على LinkedIn.