تطوير التجارة الإلكترونية PWA: ما يجب وما لا يجب فعله في الاستثمار

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

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

المحتويات:
التجارة الإلكترونية PWA: ما الذي يجعلها تستحق الإطلاق؟
كيفية بناء PWA جيدة للتجارة الإلكترونية؟
PWA للتجارة الإلكترونية: المخاطر والمزالق المحتملة
قدرات PWA
حلول PWA القائمة على منصة التجارة الإلكترونية
قصص نجاح التجارة الإلكترونية PWA
تكاليف تطوير PWA للتجارة الإلكترونية

التجارة الإلكترونية PWA: ما الذي يجعلها تستحق الإطلاق؟ 

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

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

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

إذًا، ما الذي يجب على المطورين العمل بجد لتنفيذه في PWA؟

كيفية بناء PWA جيدة للتجارة الإلكترونية؟

سرعة

الأداء الفائق عبر الإنترنت، الذي يتميز بالسرعة والجودة، يجذب بشكل فعال تفاعل المستخدم ويحافظ عليه إلى حد أكبر من الأداء المتوسط ​​(تخيل ذلك). يجب أن يكون إعطاء الأولوية للمقاييس التي تركز على المستخدم ذا أهمية قصوى نظرًا للدور الحاسم الذي تلعبه السرعة في تعزيز مشاركة المستخدم. لماذا الرعاية؟ وبطبيعة الحال، تؤدي أوقات تحميل الصفحة البطيئة إلى زيادة بنسبة 123% في معدلات الارتداد.   

العمل في أي متصفح

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

أي حجم الشاشة

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

يمكن تركيبها 

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

متاحة حاليا

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

بحث 

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

أي إدخال

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

PWA للتجارة الإلكترونية: المخاطر والمزالق المحتملة

ما هي المخاوف عند اتخاذ قرار بإطلاق PWA للتجارة الإلكترونية؟ ما هي السلبيات وكيف يمكنك تجنبها؟

الإدراك والثقة

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

التثبيت

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

التعديل الظاهر

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

إدارة نطاق

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

الوصول إلى الجهاز

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

دفع الإخطارات على نظام التشغيل iOS 

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

قدرات PWA

توفر تطبيقات PWA تجربة مستخدم أصلية على الأجهزة المحمولة على الرغم من كونها أخف بكثير - على سبيل المثال، حجم تطبيق BookMyShow PWA أصغر بمقدار 54 مرة من تطبيق Android وأصغر بمقدار 180 مرة من تطبيق iOS - مقارنة بالتطبيقات الأصلية. تستفيد هذه التطبيقات من تصميم الويب سريع الاستجابة والتحسين التدريجي لتكييف أسلوبها البصري ووظائفها مع إمكانيات جهاز المستخدم ومتصفح الويب. 

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

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

تعمل PWAs على تمكين شركات التجارة الإلكترونية من إنشاء متاجر أكثر جاذبية عبر الإنترنت تبدو وكأنها تطبيقات حقيقية للعملاء على أي جهاز.

ما الذي يعتمد عليه PWA

1. عمال الخدمة تعتبر التكنولوجيا أمرًا بالغ الأهمية لنشر PWA. مع دفع الإشعارات، والتخزين المؤقت، والوظائف دون الاتصال بالإنترنت، تبدو واجهة المستخدم مثل تطبيق الهاتف المحمول.
2. إنّ بيان تطبيق الويب هو ملف JSON يحدد اسم التطبيق وأيقوناته ونظام الألوان. باستخدام هذه الميزة، يمكن للمستخدمين وضع إشارة مرجعية على PWA.
3. لأسباب تتعلق بالخصوصية والسلامة، يعد HTTPS إلزاميًا.
4. يتم تضمين HTML وCSS وJavaScript الضرورية في غلاف التطبيق. تم إعداد إطار العمل وواجهة المستخدم الخاصة بالتطبيق هنا.
5. وغني عن القول أنه نظرًا لتعدد استخداماتها في الاستجابة لأحجام العرض المختلفة، قد تكون مواقع الويب المستجيبة أساسًا مثاليًا لـ PWAs.

PWA: كيف يختلف عن تطبيق الهاتف المحمول الأصلي

يوفر Google Play وApp Store إمكانية الوصول إلى التطبيقات الأصلية التي تم تطويرها خصيصًا لمنصاتهم الأساسية. ولا تحتاج هذه التطبيقات إلى أي برامج وسيطة للوصول إلى ميزات الجهاز وواجهات برمجة التطبيقات.

ولهذا السبب تعمل التطبيقات الأصلية بشكل أكثر سلاسة وتتفاعل بشكل أكبر مع نظام التشغيل.

يتم الإشادة بـ PWA لقدرتها على عدم الاعتماد على النظام الأساسي، والعمل عبر العديد من الأنظمة الأساسية ومتصفحات الويب، والحصول على التحديثات تلقائيًا. 

التجارة الإلكترونية PWA: كيف تختلف عن موقع الويب سريع الاستجابة

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

PWA مقابل التطبيقات الأصلية مقابل مواقع الويب المستجيبة 

تطوير PWA للتجارة الإلكترونية من الصفر أو التحويل من الإرث؟

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

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

التحويل من موقع ويب سريع الاستجابة

الإيجابيات: إعادة استخدام محتوى/تصميم الويب الحالي، والإلمام بمعايير الويب

السلبيات: لم يتم تحسينه ليناسب ميزات PWA، وقد يحتاج إلى جهد إضافي للتنفيذ

التحويل من التطبيق الأصلي

الايجابيات: إعادة استخدام منطق التطبيق، الواجهة الأمامية

السلبيات: يحتاج إلى تحديثات ليتوافق مع معايير PWA، وعمل إضافي لدعم الويب

تطوير PWA من الصفر

الايجابيات: مخصص بالكامل لمعايير PWA من البداية

السلبيات: مزيد من الوقت/التكلفة 

PWA: كيف يختلف عن الأطر الهجينة الأخرى 

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

PWA مقابل الأيونية 

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

PWA ضد الرفرفة

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

PWA مقابل React Native

React Native هو إطار عمل مفتوح المصدر لبناء تطبيقات الهاتف المحمول باستخدام React. يمكن أيضًا استخدام React لتطوير الواجهة الأمامية لـ PWA، مما يوفر واجهة مستخدم سريعة الاستجابة وتفاعلية.

حلول PWA القائمة على منصة التجارة الإلكترونية

ستوديو ماجنتو PWA

يمكن إنشاء تطبيقات PWA بمساعدة Magento PWA Studio، وهي عبارة عن مجموعة من الأدوات والمكتبات التي تم إنشاؤها لهذا الغرض. تستفيد المنصة من الأدوات المتطورة مثل React وRedux وGraphQL لإنشاء متاجر إلكترونية سريعة الاستجابة وقوية.

مجموعة Salesforce Commerce Cloud PWA

إذا كنت تتطلع إلى إنشاء PWA للتجارة الإلكترونية على منصة Salesforce Commerce Cloud، فإن مجموعة Commerce Cloud PWA Kit ستوفر لك كل ما تحتاجه للبدء. لتحقيق هدفه المتمثل في توفير تجربة تسوق سريعة الاستجابة وجذابة، يستخدم هذا الحل أطر عمل JavaScript مثل React وVue.js.

البنية المرجعية لواجهة المتجر السحابية التجارية لـ Salesforce (SFRA)

تعد البنية المرجعية لواجهة المتجر (SFRA) الخاصة بـ Commerce Cloud إطارًا مفيدًا آخر لإنشاء تطبيقات PWA. عند إنشاء تطبيقات PWA لسحابة التجارة، يمكن لإطار عمل SFRA توفير أساس متين. تعد القدرة المتزايدة على التكيف ومجموعة كبيرة من خيارات التخصيص مجرد اثنتين من المزايا العديدة التي تقدمها.

SAP التجارة سبارتاكوس

على SAP Commerce Cloud، يمكن تطوير تطبيقات PWA بمساعدة إطار عمل SAP Commerce Spartacus القوي. تم إنشاء الواجهة الأمامية للتطبيق فوق Angular، وهي تتواصل مع خدمات الواجهة الخلفية لـ SAP Commerce Cloud دون أي عوائق ملحوظة.

فو واجهة الموقع

Vue Storefront هو إطار عمل متقدم مفتوح المصدر مصمم لبناء متاجر إلكترونية موثوقة وقابلة للتطوير. يتم استخدام إطار عمل Vue.js لإنشاء تطبيقات PWA بسرعة يمكنها التكيف مع احتياجات مستخدميها وتوفير تجربة سلسة وسريعة الاستجابة. تعد الإشعارات الفورية والقدرة على تصفح الويب أثناء عدم الاتصال من الميزات البارزة.

المزيد من أدوات PWA للتجارة الإلكترونية التي يجب وضعها في الاعتبار

• ScandiPWA: حل PWA مفتوح المصدر مصمم خصيصًا لمنصة Magento 2.
• Gatsby: منشئ موقع ثابت يمكن استخدامه لإنشاء تطبيقات PWA باستخدام React.‍
• GoPWA: إطار تطوير PWA لبناء PWAs قابلة للتطوير وفعالة.

قصص نجاح التجارة الإلكترونية PWA

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

المقياسان الأكثر أهمية، التحويل (أظهرت أمثلة متعددة زيادة في معدل التحويل من 27٪ إلى أكثر من 80٪) ومعدلات التفاعل (تشمل الأمثلة 3 أضعاف الوقت في الموقع، وارتفاع عدد مشاهدات الصفحة، وعرض المزيد من المنتجات)، يظهران تحسنًا ملحوظًا بشكل ثابت.

ومع ذلك، فهذه ليست نهاية فوائد PWA:

• أداء محسّن - أبلغ الكثيرون عن أوقات تحميل أسرع بكثير، واستخدام أقل للبيانات، وانخفاض الارتداد.
• زيادة عدد الزيارات/العملاء الجدد - رأى البعض ضعفي المستخدمين يوميًا، و2% من العملاء الجدد من PWA.
• إيرادات أعلى – الحالات التي شهدت زيادة في الإيرادات لكل زيارة، وارتفعت الإيرادات من حركة المرور بنسبة 79%.
• تكاليف أقل - تكاليف أقل لاكتساب العملاء، وأحجام تطبيقات أصغر بكثير من تلك الموجودة في التطبيق الأصلي.
• الوصول دون اتصال - تمكين التسوق المستمر دون اتصال بالإنترنت.
• إشعارات الدفع – زيادة إعادة المشاركة ومعدلات النقرات وعربات التسوق المستردة.
• الوصول عبر الأنظمة الأساسية - تجربة موحدة على أي جهاز عبر تقنيات الويب.
• الميزات المشابهة للأجهزة الأصلية - يتم الاستفادة من إمكانات الأجهزة/نظام التشغيل عادةً في التطبيقات الأصلية فقط.

تكاليف تطوير PWA للتجارة الإلكترونية

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

مصدر من جرينتيك

إخلاء المسؤولية: يتم توفير المعلومات المذكورة أعلاه بواسطة grinteq.com بشكل مستقل عن Chovm.com. لا تقدم Chovm.com أي تعهدات أو ضمانات فيما يتعلق بجودة وموثوقية البائع والمنتجات.