ما هو PWA؟ شرح سهل لغير التقنيين

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

ما هو PWA؟

يسمح PWA ( P rogressive W eb A pps) لمتصفح الويب بالحصول على شكل ومظهر تطبيق الأجهزة المحمولة الأصلي (مثل التطبيقات التي تم تنزيلها من متاجر iOS و Android). تم تحسين هذه التطبيقات الأصلية للحصول على تجربة هاتف محمول سلسة مع وجود بعض الوظائف الفريدة مثل إشعارات الدفع عبر الويب. تستفيد تقنية PWA من تجربة تصفح الويب على متصفحات مثل Chrome & Safari ، بحيث تقترب من التطبيق الأصلي. هذا ، نتيجة لذلك ، يعزز حركة المرور والمشاركة على الويب.

تم تقديم المصطلح لأول مرة بواسطة Google في عام 2015. يمكن تفسير الجزء "التقدمي" ، وفقًا لـ Pete LePage - محامي مطوري Google ، على أنه " نظرًا لأن المستخدم يبني علاقة مع التطبيق تدريجيًا بمرور الوقت ، فإنه يصبح أكثر قوة ".

هل PWA هو نفس موقع الويب؟

نعم ، تطبيقات الويب التقدمية هي مواقع ويب.

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

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

دعنا نلقي نظرة على مثال على موقع ويب PWA ، حيث يمكن أن يساعدك على فهم PWA بشكل أسهل.

مثال على PWA

موقع التجارة الإلكترونية G-SP هو PWA. عندما تزور موقع الويب على الهاتف المحمول ، يمكنك بالفعل إضافة عنوان URL لموقع الويب إلى الشاشة الرئيسية لهاتفك.

بعد ذلك ، في أي وقت تريد فيه زيارة موقع الويب مرة أخرى ، ستجده هناك مع رمز على شاشتك الرئيسية تمامًا مثل أي تطبيقات أخرى مثل Facebook أو Linkedin.

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

 اقتراحات للقراءة:
- دراسة حالة G-SP PWA: تحول لتجربة الهاتف المحمول من الدرجة الأولى
- أهم 3 حالات لاستخدام PWA

نصائح لمعرفة ما إذا كان موقع الويب هو PWA

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

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

موقع من صفحة واحدة

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

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

يمكننا أن نقول إن موقع New York Times الإلكتروني ليس PWA:

دعنا نلقي نظرة على موقعنا ، SimiCart ، كمثال:

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

عمال الخدمة

لا ، هذا ليس عمال بشريين. Service Workers (عمال الخدمة) هو اسم التقنية الكامنة وراء تطبيق الويب التقدمي ، والذي يدعم قدرته في وضع عدم الاتصال ، ودفع الإخطارات والتخزين المؤقت للموارد. وفقًا لـ Google ، فإن عمال الخدمة هم في صميم تقنيات PWA. لذلك ، إذا تمكنا من معرفة ما إذا كان موقع الويب يستخدم تقنية عمال الخدمة ، فيمكننا معرفة ما إذا كان الموقع قد يكون PWA.

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

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

إذا كنت ترغب في معرفة المزيد عن PWA Service Worker ، فلدينا مقال حصري لتتعلم كل شيء عن هذه التكنولوجيا المدهشة.

مصدر آمن لبروتوكول HTTPS

ومع ذلك ، يمكنك معرفة ما إذا كان موقع الويب ليس PWA من خلال النظر إلى عنوان URL الخاص به. إذا كان عنوان URL لموقع الويب يبدأ بـ http: // بدلاً من https: // ، فهو ليس PWA. هذا لأن PWA يمكن أن يعمل فقط على مواقع الويب التي تعمل على مجال آمن ، وهو HTTPS .

ما مدى شعبية PWA؟

كما تقترح Google ، PWA هو "مستقبل تطبيقات الأجهزة المحمولة" ، تكتسب PWA شعبية ، أولاً بين اللاعبين الكبار ، ثم الشركات والمؤسسات الصغيرة.

إنها تقود المسابقات في كل مكان تقريبًا - من منصة Windows إلى أسواق التطبيقات الرئيسية مثل متجر Google Play

يمكنك أن تجد أن العديد من مواقع الويب الخاصة بالأسماء الكبيرة هي PWA مثل Telegram و AliExpress و FlipBoard وحتى إصدارات PWA لألعاب PWA المألوفة مثل 2048 أو Web Flap.

فوائد PWA: ما الذي يمكن أن تفعله تطبيقات الويب التقدمية؟

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

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

دعنا نتعمق قليلاً في مزايا PWA على تطبيق الهاتف العادي ومواقع الويب سريعة الاستجابة:

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

بالمقارنة مع موقع ويب ، على سبيل المثال ، فإن PWA متفوق للأسباب التالية:

• السرعة: بالنظر إلى نفس المحتوى ، يتم تحميل PWA بشكل أسرع من مواقع الويب العادية بفضل تقنية Service Workers . إنه سريع عند التحميل الأول وأسرع في الأحمال الثانية فصاعدًا لأنه يخزن مسبقًا جميع المحتويات مؤقتًا ويسلمها عند الحاجة.
• وضع عدم الاتصال: أصبح التوفر في وضع عدم الاتصال ممكنًا أيضًا باستخدام تقنية عمال الخدمة. مع دمج عمال الخدمة بشكل صحيح ، يتم تحميل جميع المحتويات مسبقًا في المرة الأولى التي تزور فيها PWA ويتم تسليمها بعد ذلك باستخدام Javascript ، مما يجعل PWA نهج الانتقال الجديد لمواقع الويب التي لا بد من تجربتها دون انقطاع. لدينا دليل حول كيفية جعل PWA الخاص بك يعمل في وضع عدم الاتصال ، في حال احتجت إلى واحد في أي وقت.
• إشعار الدفع عبر الويب: تمامًا مثل تطبيق الهاتف المحمول الأصلي ، يمكن لـ PWA إرسال إشعارات الدفع إلى الشاشة الرئيسية للمستخدمين مباشرةً من متصفحات الويب على الأجهزة المحمولة. هذا مفيد بشكل خاص لمتاجر التجارة الإلكترونية لإرسال صفقات وعروض مخصصة لعملائها. تم تمكين دفع الويب لـ PWA Android للأعمار ، ولحسن الحظ ، سيصل إلى PWA iOS قريبًا جدًا.
• إضافة إلى الشاشة الرئيسية : تطالب هذه الوظيفة مستخدمي الجوال "بتثبيت" PWA. بعد قبول المستخدم للمطالبة ، ستتم إضافة PWA إلى الشاشة الرئيسية للجوال ، وسيتم تشغيله مثل أي تطبيق آخر مثبت. إليك دليلنا إلى PWA Add to Home Screen. لا تفوتها!

ستبدو مطالبة "إضافة إلى الشاشة الرئيسية" القديمة في Chrome بالشكل التالي:

 >> القراءة الموصى بها: PWA vs Responsive Website مقارنة كاملة

PWA مقابل التطبيق الأصلي

وليس فقط PWA أفضل من مواقع الويب ، ولكن العلامات التجارية تختار الآن PWAs على التطبيقات المحلية بسبب الامتيازات التالية التي تجلبها PWAs:

• عبر الأنظمة الأساسية : بمجرد إنشاء PWA ، يمكن الوصول إليه عبر أي أنظمة أساسية للجوّال مثل Android أو iOS أو Windows ، نظرًا لأن PWA يعتمد على المستعرض ، ولا يعتمد على نظام التشغيل.
• مُحدَّث : ستصبح التغييرات التي تم إجراؤها على PWA سارية المفعول فورًا بمجرد تحديث المستخدمين للصفحة.
• القابلية للفهرسة : نظرًا لأن PWA لا يزال موقعًا تقنيًا ، يمكن فهرسة محتواه واكتشافه على محركات البحث مثل Google. هذا يفتح فرصًا لممارسات تحسين محركات البحث (SEO) ، والتي تمكن PWA من الوصول إلى قاعدة أكبر من المستخدمين مقارنة بالتطبيق المحلي.
• لا حاجة للنشر : مع التطبيقات الأصلية ، يمكن أن تكون عملية نشر متاجر التطبيقات في بعض الأحيان بمثابة ألم حقيقي. تخيل إرسال تطبيقك إلى متاجر التطبيقات ، وانتظر بحماس لمدة 5 أيام ، فقط لاستعادة الرفض لسبب يأخذك 10 مرات لإعادة القراءة وما زلت لا تعرف ما الذي يتحدث عنه. وفي بعض الحالات ، قد لا يتم قبول تطبيقك أبدًا. (محلات الجنس أو منتجات السجائر الإلكترونية ، أي شخص؟). مع PWA ، لا يوجد تقديم للتطبيق. يا له من راحة! إذا كنت ترغب في نشر تطبيقات الويب الخاصة بك على Apple Appstore و Google Play و Microsoft Store ، فإليك الطريقة!
• تكلفة تطوير منخفضة : نظرًا لأنه يمكن تطوير PWA مرة واحدة ثم إتاحتها لأي منصات ومتصفحات محمولة تدعمها ، فإن تكلفة تطوير PWA صغيرة نسبيًا مقارنة بالتطبيقات الأصلية. سبب آخر هو أن PWA يستخدم لغات وتقنيات البرمجة الأكثر شيوعًا والتي لديها قاعدة مطورين أكبر بكثير.

 اقتراحات للقراءة:
- تطبيق الويب التقدمي مقابل التطبيق الأصلي: أيهما يناسبك بشكل أفضل؟
- فوائد PWA للتجارة الإلكترونية

عيب PWA

من الواضح أن كل هذا يبدو جيدًا لدرجة يصعب تصديقها ؛ وعندما يبدو الأمر جيدًا لدرجة يصعب تصديقها ، يسأل الناس غالبًا "حسنًا ، ما الفائدة".

PWA ، على الرغم من خصائصها المحددة للصناعة ، لا تزال لها عيوبها:

• قابلية الوصول

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

• التواصل مع التطبيقات المثبتة الأخرى :

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

التعليمات

ما هو استخدام PWA؟

يمكن تقديم تطبيق ويب سريع وموثوق وممتع للاستخدام لعدة أغراض. على سبيل المثال ، Tik Tok ، PWAs من Aliexpress تجعل الناس يتعرفون على المواقع ، وبالتالي ، تطالبهم بتنزيل تطبيقاتهم الأصلية. يستخدم Spotify PWA لتحسين أداء موقعه على الويب واستجابته بشكل أكبر ، وبالتالي ، يقدم لمستخدميه خيارًا آخر بجانب تنزيل تطبيقهم. تستخدم ألعاب مثل pacman أو 2048 أيضًا PWA للوصول إلى المزيد من مستخدمي الويب.

ما هو الفرق بين PWA والتطبيق العادي؟

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

هل يعمل PWA على الأجهزة المحمولة فقط؟

لا ، يعمل PWA على كل من سطح المكتب والجوال والكمبيوتر اللوحي.

ما هي لغة برمجة PWA؟

تم تصميم PWA باستخدام تقنيات الويب ولغة البرمجة الشائعة بما في ذلك HTML و CSS و Javascript و WebAssembly.

استنتاج

"هل ستحل PWA محل التطبيقات المحلية؟"

لا نعتقد ذلك.

حتى الآن.

اعتبارًا من الربع الرابع من عام 2019 ، يوجد ما يقرب من 3 ملايين تطبيق على Google Play وأكثر من 2 مليون تطبيق على Apple App Store (Statista ، 2019). لا يزال هذا الرقم في تزايد ولا يبدو أنه سيتم استبدال كل هذه التطبيقات في أي وقت قريب. عادة المستخدم شيء وليس من السهل تغييره.

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

في الواقع ، تشير الإحصائيات إلى أن التأخير لمدة شهر واحد في تنفيذ PWA يمكن أن يؤدي إلى خسارة تصل إلى 1.4 مليون دولار في الإيرادات ، و 6.8 مليون دولار أخرى إذا قررت العلامات التجارية تأخيرها لمدة ستة أشهر.

لأصحاب متاجر التجارة الإلكترونية الذين يبحثون عن حل Magento PWA مثالي شامل ، هنا في SimiCart نقدم حزمة كاملة لك ولمتجرك.