الأخبار التكنولوجية والاستعراضات والنصائح!

Bradley Taylor WooCommerce الأربعاء: إنشاء تطبيق ويب تقدمي لـ WooCommerce اقرأ المقال

ستساعدك المقالة التالية: Bradley Taylor WooCommerce الأربعاء: إنشاء تطبيق ويب تقدمي لـ WooCommerce اقرأ المقال

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

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

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

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

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

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

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

في هذا المنشور ، سنقوم بتفصيل بعض المزايا الرئيسية لتطبيق PWA forecommerce وكيف يمكنك إعداد تطبيقك التدريجي لـ WordPress و WooCommerce.

PWAs والتجارة الإلكترونية

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

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

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

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

فيما يلي بعض المزايا الرئيسية لإنشاء PWA لمتجر التجارة الإلكترونية الخاص بك:

تحسين أداء الموقع

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

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

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

إشراك تجارب المستخدم

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

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

هذه الإخطارات رائعة لزيادة الاهتمام بمنتجاتك. تظهر مباشرة في الجزء الأمامي من شاشة الهاتف ، مما يجعلها مرئية للغاية.

دعم غير متصل

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

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

يمكن لـ PWAs العمل في وضع عدم الاتصال بسبب قيام عمال الخدمة المدمجين بحفظ معلومات موقعك وتخزينها مؤقتًا.

قابلية اكتشاف أفضل

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

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

مزيد من التحكم في التطبيق

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

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

العناصر الرئيسية لـ PWA

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

  • يتم تقديم الموقع عبر HTTPS
  • الصفحات على الأجهزة اللوحية والأجهزة المحمولة سريعة الاستجابة
  • يتم تحميل جميع عناوين URL للتطبيق في وضع عدم الاتصال
  • تم توفير البيانات الوصفية للإضافة إلى الشاشة الرئيسية
  • أول تحميل سريع حتى على شبكة الجيل الثالث
  • يعمل الموقع عبر متصفحات مختلفة
  • لا تشعر انتقالات الصفحة بأنها تحظر على الشبكة
  • كل صفحة لها عنوان URL

يمكنك استخدام المكون الإضافي Chrome Lighthouse لقياس مدى تقدم تطبيقك.

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

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

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

إنشاء WooCommerce PWA

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

مع نظام WordPress CMS و WooCommerce للتجارة الإلكترونية ، هناك العديد من الأساليب التي يمكنك اتباعها لتنفيذ PWA الخاص بك.

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

على سبيل المثال ، إذا كنت ترغب في إنشاء تطبيقك باستخدام React ، فستقوم أولاً بتثبيت NodeJS و NPM عالميًا. ستحتاج بعد ذلك إلى تثبيت boilerplate create-reaction-app باستخدام npm install create-reaction-app -g.

بعد ذلك ، يمكنك استخدام حزمة create-reaction-app لإنشاء تطبيق React JS بسرعة. يحتوي هذا التطبيق على دعم PWA افتراضيًا.

لبدء التطبيق ، ستستخدم cd my-app & npm start. عندما تكون في التطبيق ، يمكنك البدء في إضافة وظائف وإنشاء التطبيق.

بمجرد الانتهاء ، يمكنك ربط التطبيق بموقع WordPress الخاص بك عبر API.

استخدام مكون إضافي لـ PWA الخاص بك

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

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

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

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

SuperPWA سهل التكوين ويمكنك تشغيل التطبيق ببضع نقرات فقط. بعد تنزيل الامتداد وتنشيطه ، سيتم نقلك إلى صفحة لتهيئة إعدادات المكون الإضافي.

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

الصفحة غير المتصلة هي ما سيظهر عندما يفقد المستخدم الاتصال ولا يتم تخزين الصفحة التي يزورها في ذاكرة التخزين المؤقت

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

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

باستخدام الإعدادات المتقدمة ، يمكنك تحديد عناوين URL لاستبعادها من قائمة ذاكرة التخزين المؤقت وكذلك عناوين URL لاستبعادها من عرض شعار الشاشة الرئيسية.

التثبيط

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

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

في الصفحة التالية ، سترى خيارين للوعظ ، يدوي وتلقائي. يمكنك تمكين أحدهما أو كليهما معًا.

باستخدام Automatic Precaching ، يمكنك تحديد عدد من الصفحات و / أو المنشورات وسيقوم عامل الخدمة مسبقًا بتخزينها مسبقًا. إذا اخترت يدوي ، فسيتعين عليك إدخال الصفحات المحددة التي تريد تحميلها في البداية.

PWA لـ WP & AMP

PWA لـ WP & AMP هي أداة مفيدة أخرى لتنفيذ PWA بسرعة لمتجر WooCommerce الخاص بك.

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

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

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

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

هناك أيضا ميزة دفع الإخطارات. لا يحتوي المكون الإضافي على الوظائف المضمنة ولكنه يعمل بدلاً من ذلك من خلال تكامل إما مع PushNotifications.io أو FCM Push Notification.

اختبار PWA الخاص بك

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

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

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

خاتمة

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

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