كيف تحول موقع WordPress الخاص بك إلى تطبيق ويب تقدمي (PWA)؟

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

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

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

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

ما هو PWA؟

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

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

الخصائص الرئيسية لتطبيق الويب التقدمي

اعتبارًا من Google ، هناك خصائص معينة يجب اعتبارها تطبيق ويب تقدميًا. هنا على النحو التالي ،

• تقدمي - تم تصميمه ليكون أكثر تقدمًا كعقيدة أساسية ويجب أن يكون لديه القدرة على العمل لكل مستخدم ، بغض النظر عن المتصفح ونظام التشغيل الذي يختاره المستخدم.
• متجاوب - يهدف إلى الحصول على تصميم وواجهة سريعة الاستجابة تناسب أي شكل من أشكال الشاشة ، بما في ذلك الأجهزة المحمولة وسطح المكتب والأجهزة اللوحية والمزيد من الأجهزة الأخرى التي لم تظهر بعد.
• غير متصل بالإنترنت - يمكن لـ PWA العمل بسلاسة في بعض المناطق حتى في حالة عدم وجود اتصال بالإنترنت. يتم تحميل كل المحتوى مسبقًا لإظهار المستخدمين حتى في وضع عدم الاتصال.
• يشبه التطبيق الأصلي - تشبه تجربة المستخدم للتطبيق تمامًا تطبيقًا محليًا له تفاعلات وتنقلات مماثلة للمستخدم.
• جديد - مع PWA ، كلما كان المستخدم لديه وصول إلى الإنترنت ، يقوم التطبيق تلقائيًا بتحديث نفسه دون أي إجراءات من جانب المستخدم.
• الإضاءة السريعة - يجب تحميل PWA في غضون 3 ثوانٍ والاستجابة بسرعة لتفاعلات المستخدم بغض النظر عن اتصال الإنترنت غير المناسب.
• آمن ومضمون - يتم تقديم PWA من خلال HTTPS للتخلص من مخاطر ممارسات البيانات الخاطئة والتأكد من عدم وجود متسللين للتلاعب بالتطبيق.
• قابل للاكتشاف - يجب أن يكون PWA قابلاً للاكتشاف بسهولة على محركات البحث على الرغم من تصنيفه على أنه تطبيق.
• الانخراط - يجب أن يكون PWA قادرًا على التفاعل مع المستخدمين من خلال إشعارات الدفع عبر الويب من مالكي التطبيق والتي تشبه إلى حد بعيد ميزة إعلام الدفع للتطبيق الأصلي.
• قابل للربط - يجب أن يكون PWA قادرًا على المشاركة بسهولة عبر عنوان URL ويجب ألا يتطلب تثبيتًا يدويًا.

لماذا PWA لـ WordPress؟

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

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

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

فوائد إنشاء PWA لموقعك على الويب

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

حدود PWA

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

حالات الاستخدام الشائعة لـ PWAs

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

• تويتر لايت
• اوبر
• خرائط جوجل
• انستغرام
• تيندر
• ليفت
• فليبكارت
• سنابديل
• متوسط
• مستكشف جيثب

المتطلبات الأساسية لإعداد PWA في WordPress

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

• يجب أن يكون موقع WordPress مؤمنًا باستخدام HTTPS.
• يجب أن يحتوي موقع WordPress على سمة سريعة الاستجابة تعمل بشكل جيد على الأجهزة المحمولة وسطح المكتب والجهاز اللوحي.
• يجب أن يحتوي موقع WordPress على عنوان URL فريد إلى جانب كل صفحة أخرى بداخله.
• نسخة ووردبريس: أعلى من 3.5.0
• إصدار PHP: أعلى من 5.3

كيفية تحويل موقع WordPress الخاص بك إلى PWA؟

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

قم بتطوير PWA يدويًا

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

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

يجب فحص واختبار العوامل التالية في مرحلة الحد الأدنى من المنتج القابل للتطبيق (MVP) قبل إطلاق PWA الفعلي للمستخدمين. فيما يلي خصائص PWA النموذجية التي يجب فحصها يدويًا. من الضروري إصلاح الأخطاء لتجنب ردود الفعل السلبية من المستخدمين.

• يجب فهرسة محتوى الموقع بواسطة Google
• يجب أن تكون معلومات المخطط والبيانات الوصفية مناسبة
• البيانات الوصفية الاجتماعية
• عناوين URL الأساسية
• History API على جميع الصفحات داخل الموقع
• القدرة على الرجوع من الصفحة المقصودة والحفاظ على موضع التمرير في الصفحة السابقة
• محتوى قابل للمشاركة
• المدخلات التي لم يتم حظرها بواسطة لوحة المفاتيح على الشاشة
• خيار لتعطيل الإخطارات
• دفع الإخطار ذات الصلة وفي الوقت المناسب
• خيارات دفع سهلة وفورية على واجهة المستخدم الحالية

استخدام الإضافات

بالنسبة لغير المطورين ، هناك مجموعة واسعة من مكونات WordPress الإضافية المتاحة المناسبة لما تبحث عنه. هناك نوعان: الإضافات المجانية والمدفوعة.

الإضافات المجانية

1. SuperPWA

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

• آخر تحديث : منذ شهرين
• التثبيت النشط : 20000+
• تم اختباره حتى 5.1.1

2. PWA

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

• آخر تحديث : منذ شهر
• التنصيبات النشطة : 20000+
• تم الاختبار حتى 5.0.4

3. PWA لـ WP & AMP

PWA لـ WP & AMP هو مكون إضافي جيد متاح مجانًا للاستخدام. إنه سهل الاستخدام ويقدم خدمة استثنائية ولكنه يفتقر إلى الوثائق المناسبة.

• آخر تحديث : منذ شهرين
• التثبيت النشط : 8000+
• تم الاختبار حتى 5.0.4

4. (PWA)

يمكن تثبيت البرنامج المساعد مباشرة ويحظى بشعبية كبيرة. يحتوي على واجهة خفيفة للغاية وأضيق الحدود. يوفر هذا المكون الإضافي خدمات مماثلة لـ SuperPWA ، كما أنه يتضمن دعمًا لـ Google AMP و OneSignal والتي تعد واحدة من خدمات إشعارات الدفع الرائدة في العالم.

• آخر تحديث : منذ شهرين
• التنصيبات النشطة : 2000+
• تم الاختبار حتى 5.2

الإضافات المدفوعة

1. WordPress Mobile Pack

تحتوي حزمة WordPress Mobile Pack على أكثر من مليون عملية تنزيل. يقدم المكون الإضافي العديد من تطبيقات وإضافات الويب التقدمية للجوال والتي يمكنك شراؤها إما بشكل فردي أو كحزمة.

• آخر تحديث : منذ عام واحد
• التنصيبات النشطة : 100000+
• السعر : 49 دولار - 99 دولار

2. PWAThemes

يحتوي PWAThemes على تطبيقات ويب تقدمية ممتازة للهاتف المحمول تم إنشاؤها باستخدام Angular أو React. يأتي كل من PWAThemes بنسخة إنتاج مجمعة ومعبأة ومجموعات من جميع ملفات JS و CSS الضرورية لتشغيل PWA بشكل جيد.

• آخر تحديث : منذ عام واحد
• التنصيبات النشطة : 1000+
• السعر $ 0 - $ 49

كيفية تثبيت ملحقات PWA؟

عملية تثبيت البرنامج المساعد مبسطة بشكل جيد وسهلة المتابعة. على سبيل المثال ، سنستخدم SuperPWA هنا.

تثبيت ووردبريس

• قم بزيارة WordPress Admin> Plugin> Add New
• ابحث عن " SuperPWA "
• انقر فوق "التثبيت الآن" ثم قم بتنشيط المكون الإضافي SuperPWA.

التثبيت اليدوي

• قم بتحميل مجلد SuperPWA إلى الدليل / wp-content / plugins / على الخادم الخاص بك.
• انتقل إلى WordPress Admin> Plugins
• ثم قم بتنشيط المكون الإضافي SuperPWA من القائمة.

استنتاج

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

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

كل التوفيق في تطوير تطبيق الويب التقدمي (PWA)!