تحويل موقع WordPress الخاص بك إلى PWA: مع الاتجاه

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

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

 يُنصح بالقراءة: 12 نموذجًا لتطبيقات الويب التقدمية لإلهامك

WordPress ، أو لنكون أكثر تحديدًا ، Automattic - الأشخاص الذين يقفون وراء WordPress ، بدأوا أيضًا حركة WordPress PWA مرة أخرى في Chrome Dev Summit 2017 من خلال الإعلان عن عملهم الجاري لدمج التقنيات التقدمية في سير عمل الأنظمة الأساسية مثل WordPress.

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

فهم PWA

على حد تعبير Google ، فإن تطبيقات الويب التقدمية

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

ببساطة ، PWAs هي مستقبل تجربة تصفح الويب. لمزيد من المعلومات حول PWAs ، راجع مقالتنا: ما هو PWA ؟.

لماذا PWA لـ WordPress؟

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

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

يلاحظ نيكولاس غالاغر ، رئيس قسم الهندسة في Twitter Lite:

يعد Twitter Lite الآن الطريقة الأسرع والأقل تكلفة والأكثر موثوقية لاستخدام Twitter. يتنافس تطبيق الويب مع أداء تطبيقاتنا الأصلية ولكنه يتطلب أقل من 3٪ من مساحة تخزين الجهاز مقارنة بتويتر لنظام Android.

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

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

• تتطلب تطبيقات الويب التقدمية أن يتم تقديم موقع WordPress الخاص بك من مصدر آمن ، أي يجب أن يكون موقع الويب الخاص بك HTTPS وليس HTTP .
• إصدار WordPress: أعلى من 3.5.0
• إصدار PHP: أعلى من 5.3

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

بمجرد تلبية المتطلبات المذكورة أعلاه ، يمكن لمالكي موقع WordPress اختيار التحويل إلى PWA باستخدام إحدى الطريقتين: يدويًا أو W ith plugins .

1. تطوير PWA يدويًا

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

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

2. مع الإضافات

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

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

1. SuperPWA

في الجزء العلوي من ملحقات PWA المجانية لـ WordPress ، يوجد SuperPWA مع تقليده الطويل الأمد المتمثل في الخدمة الممتازة والجودة.

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

التنصيبات النشطة: 30000+
التصنيف بالنجوم: ★★★★★

2. PWA

يهدف PWA إلى توفير اللبنات الأساسية لـ PWA وآلية التنسيق للموضوعات والإضافات لعدم إعادة اختراع العجلة وأيضًا عدم التعارض مع بعضها البعض.

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

آخر تحديث: منذ 5 شهور
التنصيبات النشطة: أكثر من 20000
التصنيف بالنجوم: ★★★★

3. PWA لـ WP & AMP

للحصول على عرض مجاني ، يعد PWA لـ WP & AMP رائعًا في ما يفعله. إنه جيد وسهل الاستخدام ويقدم خدمة عملاء استثنائية ؛ ومع ذلك ، فإن وثائقها تبدو ناقصة بعض الشيء مما قد يؤدي إلى صعوبة تشغيل كل شيء.
التنصيبات النشطة: 8000+
التصنيف بالنجوم: ★★★★★

4. WebSuite PWA

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

التنصيبات النشطة: 30+

التصنيف بالنجوم: ★★★★★

5. بسيط PWA لـ WordPress بواسطة Webkul

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

التنصيبات النشطة: المعلومات غير متوفرة

التصنيف بالنجوم: المعلومات غير متوفرة

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

عملية تثبيت WordPress PWA Plugins بسيطة ومباشرة. فيما يلي سنستخدم SuperPWA كمثال:

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

• قم بزيارة WordPress Admin> Plugins> Add New
• ابحث عن " تطبيقات الويب فائقة التقدم "
• انقر فوق " تثبيت الآن " ثم " تنشيط " تطبيقات الويب فائقة التقدم

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

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

استنتاج

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

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

قراءة متعمقة:

• Magento PWA Studio: مقارنة مفصلة مع Vue Storefront

• تكامل Magento WordPress: دليل خطوة بخطوة