فوائد تطبيقات الصفحة الواحدة وتطبيقات الويب التقدمية: تحسين تجربة العملاء

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

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

(يا للعجب. هذا كثير.)

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

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

كيف يمكن لتطبيقات الصفحة الواحدة وتطبيقات الويب التقدمية تحسين تجربة العملاء

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

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

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

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

ألن يكون من الرائع تقديم تجربة شبيهة بالتطبيق من خلال مستعرض ويب بحيث يصبح التمييز بين التطبيق المحلي والموقع الإلكتروني غير واضح؟

هذا هو المكان الذي تدخل فيه تطبيقات الصفحة الواحدة (SPAs) وتطبيقات الويب التقدمية (PWAs).

ما هو تطبيق الصفحة الواحدة؟

SPA هو تطبيق مكتوب بلغة JavaScript يعمل في مستعرض ويب ، ولا يتطلب عمومًا تحديث الصفحة لإظهار معلومات جديدة.

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

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

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

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

لقد استخدمنا جميعًا SPA منذ فترة ، ربما دون أن ندرك ذلك. يستخدم كل من Facebook و Gmail و Twitter و LinkedIn و Instagram (من بين العديد من الآخرين) مواقع SPA بدلاً من مواقع الويب الخاصة بهم.

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

فوائد تطبيقات الصفحة الواحدة

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

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

تقوم SPAs عمومًا بتحميل المحتوى بشكل أسرع بكثير من مواقع الويب القياسية ، حيث يتم تحميل الكثير من موارد العروض التقديمية (HTML ، CSS) مرة واحدة فقط. تتطلب التفاعلات مع التطبيق فقط استدعاء خادم النهاية الخلفية لاسترداد كميات صغيرة من البيانات ، بدلاً من صفحات HTML / CSS المكونة بالكامل. يمكن للتطبيق بعد ذلك عرض البيانات التي تم تغييرها بسرعة دون الحاجة إلى إعادة تحميل الصفحة.

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

مساوئ SPA

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

لقد أصبحت أيضًا مشكلة أقل بمرور الوقت ، حيث يتم تغيير روبوتات محرك البحث للتعامل مع SPAs. جوجل هي واحدة من الشركات التي تدافع عنهم ، بعد كل شيء.

تستغرق بعض تطبيقات SPA بعض الوقت للتحميل في الزيارة الأولى لأن موارد التطبيق والعرض التقديمي يتم تحميلها في عرض الصفحة الأولى.

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

ما هو تطبيق الويب التقدمي؟

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

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

• آمن - يتم تقديمه بموجب https
• متجاوب - يناسب أي عامل شكل
• قادر على العمل دون اتصال بالإنترنت - باستخدام عمال الخدمة لتخزين الصفحات في ذاكرة التخزين المؤقت
• سريع - قادر على التحميل بسرعة على اتصالات 3G
• يشبه التطبيق - استخدام وضع غلاف التطبيق والتصميم ليشعر وكأنه تطبيق
• قابل للتثبيت - استخدم ملف البيان للسماح بإضافة التطبيق إلى الشاشة الرئيسية
• الانخراط - استخدام أدوات مثل دفع الإخطارات
• تقدمي - يعمل على جميع المتصفحات ولكنه يتطور بشكل تدريجي على المتصفحات الحديثة

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

مرتبك حتى الآن؟

مزايا PWAs

كما هو الحال مع SPA ، تتمثل إحدى أكبر مزايا PWA في تحسين تجربة العملاء ، مما يمنحه إحساسًا شبيهًا بالتطبيق وسد الفجوة بين موقع ويب تقليدي للجوّال وتطبيق iOS أو Android أصلي.

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

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

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

عيوب PWAs

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

عيب آخر هو عدم وجود تعريف واضح ، والتي يمكن أن تكون مفتوحة للتفسير.

SPA و PWAs هي مستقبل تطوير المواقع الإلكترونية

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

في حين أن SPA هي تقنية محددة يمكن استخدامها لإنشاء تطبيق للتجارة الإلكترونية ، فإن PWAs هي بشكل عام مواقع ويب تم إنشاؤها وفقًا لمنهجية وضعتها Google ، والتي يشعرون أنها توفر أفضل تجربة للعملاء.

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

يستثمر العديد من مزودي البرامج مثل SAP و IBM بشكل كبير في إنشاء واجهات SPA الأمامية لمنصات التجارة الإلكترونية الخاصة بهم ، وأعتقد أنه في غضون بضع سنوات ، سيتم إنشاء معظم مواقع التجارة الإلكترونية بهذه الطريقة ، باستخدام أطر عمل JavaScript مثل Angular ، Vue أو React.

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

خلال الأوقات المضطربة ، ما الذي يجعل تجربة العملاء رائعة؟ انضم إلى الخبراء أثناء مناقشتهم.