الدليل النهائي لتطبيقات الويب التقدمية في عام 2022 - مع 50 مثالاً لـ PWA

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

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

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

ومع ذلك ، لا يوجد شيء مثالي. التطبيقات الأصلية ليست بديلاً عن تجارب الويب الرائعة.

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

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

أدخل تطبيقات الويب التقدمية (PWAs). إذا كان لديك موقع ويب ، وكان مهمًا لك أو لشركتك عن بُعد - فأنت بحاجة إلى PWA.

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

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

سنبدأ بالسؤال الأساسي - ما هو PWA؟

ما هو تطبيق الويب التقدمي بالضبط ؟ دعنا نحدد PWA

تجمع تطبيقات الويب التقدمية بين أفضل ما في الويب والميزات التي كانت ممكنة في السابق فقط في التطبيقات المحلية.

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

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

ربما لا تزال غير متأكد مما هي عليه بالضبط .

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

التعريف الأصلي لتطبيق الويب التقدمي

تمت صياغة مصطلح "تطبيق الويب التقدمي" في عام 2015 بواسطة فرانسيس بيريمان ومهندس Google أليكس راسل. لقد كانوا يراقبون ظهور فئة جديدة من تطبيقات الويب ، وقرروا خلال العشاء تعريفها وتسميتها.

توصلوا إلى المعايير التالية:

• متجاوب: ليناسب أي عامل شكل
• اتصال مستقل : يتم تحسينه تدريجيًا مع عمال الخدمة للسماح لهم بالعمل دون اتصال بالإنترنت
• تفاعلات شبيهة بالتطبيقات: استخدم نموذج تطبيق Shell + Content لإنشاء تنقلات وتفاعلات للتطبيق
• حديث : يتم تحديثه دائمًا بشفافية بفضل عملية تحديث عامل الخدمة
• آمن : يتم تقديمه عبر TLS (أحد متطلبات عامل الخدمة) لمنع التطفل
• قابلة للاكتشاف : يمكن التعرف عليها على أنها "تطبيقات" بفضل بيانات W3C ونطاق تسجيل عامل الخدمة الذي يسمح لمحركات البحث بالعثور عليها
• قابل لإعادة المشاركة: يمكنه الوصول إلى واجهات مستخدم إعادة المشاركة لنظام التشغيل ؛ على سبيل المثال دفع الإخطارات
• قابل للتثبيت : على الشاشة الرئيسية من خلال المطالبات التي يوفرها المتصفح ، مما يسمح للمستخدمين "بالاحتفاظ" بالتطبيقات التي يجدونها مفيدة للغاية دون متاعب متجر التطبيقات
• قابلة للربط : مما يعني أنها خالية من الاحتكاك وعدم التثبيت وسهلة المشاركة. القوة الاجتماعية لعناوين URL مهمة.

يمكنك أن ترى كيف تفي هذه المعايير بجزء "تطبيق الويب" من التعريف.

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

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

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

هذا ما لاحظه بيريمان ورسل. لم يخترعوا أي شيء ، لقد لاحظوا تحولًا في الويب وأطلقوا عليه اسم.

ماذا عن الجزء "التقدمي"؟

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

إذن ، هل تعريف بيريمان وراسيل كافٍ؟ تكمن المشكلة في أن القليل من PWAs يفي بالفعل بكل هذه المعايير. إنها تشبه إلى حد كبير قائمة الرغبات ، أو الهدف الذي تهدف إليه ، أو الحالة النموذجية.

تعريف Google لتطبيق الويب التقدمي

كانت Microsoft متحمسة بشأن PWAs لبعض الوقت. أخذت شركة آبل بعض الإقناع وهي الآن (في الغالب) في. على الرغم من ذلك ، كانت Google هي التي دافعت حقًا عن تطبيقات الويب التقدمية منذ البداية.

ومع ذلك ، لا يبدو أن Google نفسها متأكدة بنسبة 100٪ من التعريف. في عام 2015 ، وضعوا قائمة من 10 خصائص ، ثم خفضوها إلى ستة ، ثم أضافوا ثلاث خصائص جديدة.

حاليًا ، يتضمن تعريف Google لتطبيق الويب التقدمي ثلاث ركائز. في صفحة المقدمة الخاصة بهم ، يذكرون أن PWAs هي:

"تطبيقات الويب التي تم تصميمها بحيث تكون قادرة وموثوقة وقابلة للتثبيت . هذه الركائز الثلاث تحولهم إلى تجربة تبدو وكأنها تطبيق خاص بمنصة معينة "

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

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

الطريقة الثالثة التي يمكننا من خلالها تحديد PWA هي تحديد المعايير التقنية البحتة ، بدلاً من معايير UX.

هذا ما حاول مطور الويب والمؤلف جيريمي كيث في تدوينة عام 2017 ما هو تطبيق الويب التقدمي؟ .

يعتقد كيث أن الالتباس حول تعريفات PWA لا أساس له ، وأنه في الأساس ، يجب استيفاء ثلاثة معايير:

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

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

لذلك رأينا تعريف الملاحظة / الطموح الأصلي ، وتعريف Google الذي يحركه UX ، وتعريف تقني مبسط. ماذا يمكننا أن نخمن؟ على الرغم من أنه قد لا يزال هناك القليل من الغموض ، إلا أن لدينا الآن فكرة جيدة عن ماهية تطبيق الويب التدريجي.

PWA هو موقع ويب حديث وآمن وسريع التحميل يستخدم تقنيات الويب المتطورة لتحقيق هذه الخصائص. على عكس مواقع الويب التقليدية ، فإنه يعمل ويشعر المستخدم بأنه تطبيق محلي - و "يهرب" من علامة تبويب المتصفح في هذه العملية.

كما قال أليكس راسل:

"لا يتم حزم هذه التطبيقات ونشرها من خلال المتاجر ، إنها مجرد مواقع ويب تناولت جميع الفيتامينات المناسبة"

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

سننتقل الآن إلى فوائد إنشاء تطبيق ويب تقدمي ، قبل النظر في 50 مثالاً من PWA لإلهام مشروعك.

فوائد تطبيق الويب التدريجي

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

قد يبدو هذا كأنه بيان جريء ، لكنها الحقيقة. لماذا ا؟

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

”الأرقام لا تكذب! حققت الشركات التي أطلقت تطبيقات الويب التقدمية نتائج مبهرة. على سبيل المثال ، شهد Twitter زيادة بنسبة 65٪ في الصفحات لكل جلسة ، وزيادة بنسبة 75٪ في التغريدات ، وانخفاضًا بنسبة 20٪ في معدل الارتداد ، كل ذلك مع تقليل حجم التطبيق بنسبة تزيد عن 97٪. بعد التحول إلى PWA ، شهد مؤشر Nikkei زيادة في حركة المرور العضوية بمقدار 2.3 مرة ، واشتراكات أكثر بنسبة 58٪ ، وزيادة في عدد المستخدمين النشطين يوميًا بنسبة 49٪. استبدلت Hulu تجربة سطح المكتب الخاصة بالنظام الأساسي بتطبيق ويب تقدمي وشهدت زيادة بنسبة 27٪ في تكرار الزيارات "

هذا فقط خدش السطح.

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

• عززت Alibaba تحويلات الويب عبر الأجهزة المحمولة بنسبة 76٪ ، وشهدت 14٪ مستخدمين أكثر نشاطًا على iOS و 30٪ على Android
• شهدت شركة Debenhams زيادة بنسبة 40٪ في إيرادات الهاتف المحمول ، وزيادة بنسبة 20٪ في التحويلات ، ونمو أعلى من نمو السوق عبر الإنترنت
• شهدت Pinterest زيادة بنسبة 40٪ في إجمالي الوقت المستغرق ، ونموًا بنسبة 44٪ في أرباح الإعلانات الناتجة عن المستخدمين ، وزيادة المشاركة الأساسية بنسبة 60٪
• حصلت Forbes على زيادة بنسبة 43٪ في الجلسات لكل مستخدم ، وتحسن بنسبة 20٪ في إمكانية عرض الإعلان ، ومزيد من التفاعل بنسبة 100٪
• شهدت BMW زيادة بنسبة 30٪ في نسبة النقر إلى الظهور لموقع مبيعاتها ، وأوقات تحميل أسرع 4 مرات ، ونموًا بنسبة 50٪ في مستخدمي الهاتف المحمول ، و 49٪ زيادة في حركة المرور العضوية
• عززت MakeMyTrip سرعة الصفحة بنسبة 38٪ ، وضاعفت معدلات التحويل ثلاث مرات ، وشهدت زيادة بنسبة 160٪ في جلسات المتسوقين
• عزز موقع AliExpress معدلات التحويل للمستخدمين الجدد بنسبة 104٪ (+ 82٪ على iOS) وشهد زيادة بنسبة 74٪ في الوقت المستغرق في كل جلسة مع زيادة عدد الصفحات التي تمت زيارتها بمعدل ضعفين في كل جلسة
• شهد موقع Housing.com تحويلات أكثر بنسبة 38٪ ، ومتوسط ​​جلسة أطول بنسبة 10٪ ، ومعدل ارتداد أقل بنسبة 40٪ - ووقت تحميل أسرع للصفحة بنسبة 30٪ بشكل عام
• ضاعف موقع ويجو نسبة النقر إلى الظهور ثلاث مرات ، وشهد 26٪ زيادة في الزوار و 95٪ تحويلات أكثر بشكل عام. على نظام iOS ، حصلوا على زيادة مذهلة بنسبة 50٪ في التحويل وزيادة بنسبة 35٪ في مدة الجلسة
• شهد تريبو زيادة قدرها 4 أضعاف في التحويلات على أساس سنوي. كرر المستخدمون الذين تم تحويلهم 3 مرات أعلى.
• خفضت Tinder أوقات التحميل بأكثر من النصف من 11.91 ثانية إلى 4.69 ثانية وشهدت تفاعلًا كبيرًا في جميع المجالات باستخدام PWA بنسبة 90٪ أصغر من التطبيق الأصلي

كيف تكون كل هذه النتائج المذهلة ممكنة؟ يتلخص الكثير منها في حقيقة أن PWAs توفر تجربة مستخدم أفضل بكثير ، وتتدفق نتائج الأعمال الرائعة من ذلك.

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

PWAs سريعة البرق

يتوقع المستهلكون المعاصرون التحميل الفوري. إذا لم يتم تحميل شيء ما بنبض القلب ، سيفقد الكثيرون الاهتمام ، ربما بشكل دائم. هذا واضح بذاته ، ويدعمه عدد كبير من البيانات:

• يقول ما يقرب من 50٪ من المستخدمين أن أكبر إحباط لديهم على الجوال هو انتظار تحميل الصفحات البطيئة (المصدر)
• الصفحات التي يتم تحميلها في غضون ثانيتين لها معدل ارتداد يبلغ 9٪ ، والصفحات التي تستغرق 5 ثوانٍ يكون معدل ارتدادها 38٪ (المصدر)
• يرتبط "الانخفاض الحاد في معدل التحويل" بزيادة متوسط ​​أوقات التحميل من 1 إلى 4 ثوانٍ (المصدر)
• كل ثانية واحدة من التحسينات في وقت التحميل تعزز معدل التحويل بنسبة 2٪ ، في حين أن التحسين 100 مللي ثانية يولد ما يصل إلى 1٪ من العائدات المتزايدة (المصدر)

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

يؤدي تحسين سرعة الموقع إلى نتائج أفضل في جميع المجالات. هذا كل ما في الامر.

إذن كيف يمكن لـ PWA مساعدتك على تحقيق ذلك؟ تطبيقات الويب التقدمية سريعة. سريع حقا.

على سبيل المثال ، تمكنت Pinterest من تقليل وقت التحميل التفاعلي من 23 ثانية إلى 5.6 ثانية فقط. كان هذا في المتوسط ​​أجهزة Android عبر اتصال 3G بطيء. كان لهذا تأثير مرحب به على المقاييس الرئيسية.

ليس سيئا على الإطلاق. ومع ذلك ، فإن نتائج Pinterest ليست غير عادية على الإطلاق.

ضاعفت منصة البث ZEE5 سرعة الموقع ثلاث مرات وقلصت وقت التخزين المؤقت إلى النصف من خلال بناء PWA. يتم تحميل PWA من Uber في أقل من 3 ثوانٍ على شبكات 2G. خفضت Forbes أوقات تحميل الهاتف المحمول من 6.5 ثانية على موقعها المحمول السابق إلى 2.5 ثانية فقط باستخدام PWA.

يتم ضمان تحسينات السرعة عند إنشاء تطبيق ويب تقدمي جيد ومصمم جيدًا.

لماذا تطبيقات الويب التقدمية سريعة جدًا؟

PWAs سريعة جدًا بفضل عمال الخدمة المهمين. كما قال جيسون جريجسبي في كتابه الممتاز تطبيقات الويب التقدمية:

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

يشرح غريغسبي أن:

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

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

توفر PWAs تجربة مستخدم تشبه التطبيقات على الويب

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

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

على سبيل المثال ، يمكن لـ PWAs:

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

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

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

على سبيل المثال - هل سبق لك استخدام Instagram Lite أو Google Maps Go أو Twitter Lite؟

يمكنك تنزيلها من متجر Google Play والاطلاع عليها - ومعرفة شعورها مثل أي تطبيقات أصلية أخرى.

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

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

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

PWAs موثوقة

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

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

هذا يمكن أن يأخذ خطوة أبعد أيضا. من خلال "preaching" ، وهو عندما يتم تنزيل التطبيق بالكامل وتخزينه في الزيارة الأولى ، يمكن لـ PWAs أيضًا العمل دون اتصال بالإنترنت تمامًا!

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

PWAs آمنة وفعالة وقابلة للتكيف

لكي يقوم عمال الخدمة بعملهم ، يجب أن يكون موقع الويب الخاص بك آمنًا تمامًا باستخدام HTTPS.

نأمل أن يتم ذلك بالفعل ، ولكن إذا لم يكن إنشاء PWA ، فسوف يجبرك على القيام بكل الأعمال اللازمة لجعل موقعك آمنًا بنسبة 100٪.

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

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

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

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

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

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

إنه أمر سهل مثل تحديث موقعك اليوم - والتحديثات (المنتشرة على الخادم) متاحة على الفور تقريبًا للمستخدم.

تتيح لك تطبيقات الويب التقدمية (PWA) إشراك المستخدمين من خلال الإشعارات الفورية

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

فيما يلي بعض الأمثلة عن كيفية استخدام الشركات المختلفة للإشعارات الفورية:

• ناشرو الأخبار

"الأخبار العاجلة ، حدث X و Y للتو!"

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

• متاجر التجارة الإلكترونية

"عرض خاص / لقد تخليت عن عربة التسوق / تم إرسال العناصر الخاصة بك"

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

• المنتديات والمجتمعات الاجتماعية

"أرسل لك صديقك للتو رسالة / طلب صداقة / رد عليك"

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

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

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

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

على سبيل المثال ، بعد بناء PWA ، رأت لانكوم أن 8٪ من المستهلكين الذين ينقرون على إشعار الدفع يجرون عملية شراء ، وتحسن معدلات التحويل على العربات المستردة بنسبة 12٪ عبر إشعارات الدفع.

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

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

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

ستعمل تطبيقات الويب التقدمية على تنمية أعمالك

لقد مررنا ببعض أهم فوائد تحويل موقعك إلى تطبيق ويب تقدمي.

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

ما هي سلبيات بناء PWA؟

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

هل ما زلت بحاجة إلى الإقناع؟

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

أمثلة على تطبيقات الويب التقدمية: أفضل 50 تطبيقًا لتطبيقات الويب التقدمية على الإنترنت في عام 2020

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

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

دعنا ندخل في أفضل 50 مثالاً لـ PWA.

التجارة الإلكترونية والتجزئة

ستاربكس

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

تم تصميم التطبيق ليحل محل تطبيقه القديم للجوّال للحفاظ على تفاعله بشكل أفضل بغض النظر عن الجهاز.

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

تتميز بقية صفحة التطبيق بالطلبات المخصصة وتوافر المتجر وتفاصيل التسليم وقائمة التطبيقات.

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

ما نحبه في هذه التجارة الإلكترونية PWA:

• يعمل بشكل جيد حتى في اتصالات الشبكة الضعيفة
• متكامل تمامًا مع المنصات والخدمات الأخرى من العلامات التجارية الأخرى مثل Spotify و Lyft و Ford
• عمليات الدفع والسداد السلسة عبر الهاتف المحمول
• تصميم سهل الاستخدام للغاية

جوميا

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

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

كان تقديم PWA هو الحل الأمثل لتقديم تجربة مستخدم شبيهة بالتطبيقات دون استهلاك نطاق ترددي كبير للبيانات.

النتائج؟ وفقًا لـ Google ، عززت الشركة معدل التحويل بنسبة 33٪ وزادت مستخدميها 12 مرة (مقارنة بالتطبيقات المحلية). بالإضافة إلى ذلك ، فقد خفضت بشكل كبير معدل الارتداد ومتطلبات تخزين جهاز المستخدم.

ما نحبه في هذه التجارة الإلكترونية PWA:

• وصول موثوق في وضع عدم الاتصال
• القدرة على البحث السريع
• عملية تحميل سريعة
• سهل التركيب

OLX.in

عندما يتعلق الأمر بـ PWA للسوق عبر الإنترنت ، ثق في شركة الإعلانات المبوبة الهندية OLX.in. من خلال فئاته القوية التي تمتد من العقارات إلى الأزياء ، يكون البائعون والمشترين أكثر توافقًا مع PWA الخاص بالشركة.

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

كشفت OLX أنها شهدت نسبة نقر إلى ظهور أعلى على إعلاناتها وانخفاضًا هائلاً بنسبة 80٪ في معدلات الارتداد منذ انتقالها إلى PWA كما ذكرت Google.

ما نحبه في هذه التجارة الإلكترونية PWA:

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

فليبكارت

منافس آخر في مشهد التجارة الإلكترونية الهندي هو Flipkart الذي يواصل إعادة تعريف تجربة التسوق عبر الإنترنت من خلال PWA.

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

بدأ تطبيق PWA الخاص بـ Flipkart في عام 2015 من خلال Flipkart Lite. أرادت الشركة جعل التسوق أكثر سهولة بين الهنود حتى لو كانت اتصالات الإنترنت متقطعة في معظم المناطق.

ما نحبه في هذه التجارة الإلكترونية PWA:

• إخطارات الدفع لآخر الأخبار والتحديثات متسقة
• تم تبسيط عملية الشراء عبر الإنترنت
• القدرة على البحث دقيقة

صيغ نقية

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

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

أبلغت عن تحويلات أعلى وزيادة في متوسط ​​قيمة الطلب (AOV).

ما نحبه في هذه التجارة الإلكترونية PWA:

• عملية دفع مريحة للغاية
• تصميم بسيط
• متطلبات تخزين الجهاز خفيفة للغاية
• معاملات آمنة للغاية

AliExpress

من خلال تطبيق PWA سريع الاستجابة ، يعتبر Ali Express أحد أكثر التطبيقات المطلوبة اليوم لمعاملات B2C.

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

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

ما نحبه في هذه التجارة الإلكترونية PWA:

• سهولة تصفح المنتج
• وقت تحميل أسرع
• تصميم سهل الاستخدام

علي بابا

لا يحتاج Jack Ma's The Alibaba Group إلى مزيد من التعريف عندما يتعلق الأمر بنجاح Alibaba PWA. يعد تطبيق B2B للتجارة الإلكترونية نموذجًا مثاليًا لأي PWA: سريع وسريع الاستجابة وخفيف وجذاب للغاية.

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

أبلغت عن زيادة بنسبة 76 ٪ في إجمالي التحويلات وفقًا لـ Google.

ما نحبه في هذه التجارة الإلكترونية PWA:

• سهولة تصفح المنتج
• التكامل مع أدوات الموقع مثل Feeds و Messenger وحساب My Alibaba
• وقت تحميل أسرع

استهداف

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

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

ما نحبه في هذه التجارة الإلكترونية PWA:

• خيار سهل الإضافة إلى عربة التسوق
• صور سريعة التحميل بغض النظر عن الحجم

وول مارت

للحصول على تجربة تطبيق سلسة ، يصل تطبيق PWA من Walmart إلى قائمة التحقق الطويلة لمطور التطبيق. مع الآلاف من عروض المنتجات ، يمكن لعملاق البيع بالتجزئة دمج عمليات الشراء عبر الإنترنت وخيارات الاستلام / التسليم لكل معاملة.

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

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

ما نحبه في هذه التجارة الإلكترونية PWA:

• قسم الملاحظات
• خاصية التتبع الجغرافي
• واجهة سريعة الاستجابة للغاية
• أداء سلس على شبكة غير مستقرة

ميسي

كان لدى علامة البيع بالتجزئة الراقية ، Macy's ، هدف في الاعتبار عندما أطلقت PWA: تقديم أفضل تجربة لملايين زوارها شهريًا.

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

ما نحبه في هذه التجارة الإلكترونية PWA:

• أداة العثور على متجر موثوقة
• تخطيط المنتج المنظم

لانكوم

واجهت العلامة التجارية الفرنسية لمستحضرات التجميل الفاخرة لانكوم عقبة في مبيعاتها عبر الإنترنت: ارتفع مستخدمو الهواتف المحمولة لكن التحويلات كانت تتراجع.

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

تحولت العلامة التجارية إلى PWA لتقليل وقت التحميل وجعل التطبيق سهل الوصول إليه. وفقًا لـ Google ، ساهمت الإشعارات الفورية بنسبة 12٪ في التحويلات وارتفعت جلسات الهاتف المحمول إلى 51٪.

ما نحبه في هذه التجارة الإلكترونية PWA:

• Fast search results
• Easy navigation

News

Financial Times

The Financial Times PWA is considered as one of the best PWAs in the news industry. Covering business and global markets, the app takes a similar look and feel of the paper with its traditional salmon-colored background.

The publication is one of the first news sites to abandon its native app and transition to a PWA. It works well even on slow networks, making news easily accessible for business people on the go.

What we like about this News Publisher PWA:

• Reliable offline
• Very fast loading time
• Real-time updates on content
• Seamless video content experience

Infobae

This Buenos Aires-based news website has proven to be successful in the PWA scene thanks to its Spanish readers. According to Google, the Latin American audience contributed to three times more page views compared to its old mobile site, and spent more sessions on the app as well.

Infobae switched from its mobile site to PWA in 2017 to improve the speed of access among its mobile users. This was influenced by the huge drop in session duration (3 minutes on mobile compared to 27 minutes on desktop).

What we like about this news publisher PWA:

• Very fast loading time
• High-quality visuals loading seamlessly
• Easy navigation

Nau.ch

One of Switzerland's leading news websites became extremely popular when it began flashing content in public areas such as terminals and petrol stations.

Nau (an abbreviation for “new”) was founded in 2007 with the goal of prominently displaying news in public transport to reach millions of commuters on their daily route.

To improve its reach, the company launched its PWA and has achieved 400 times more installations than its old mobile site in the first two days.

What we like about this news publisher PWA:

• Impressive user interface
• Easy navigation
• Content loads much faster relative to other news-related PWAs

Nikkei

Regarded as the world's largest financial newspaper (more than 3 million in daily circulation), Nikkei launched its PWA in 2017 with the goal of reducing load time, improve reader interaction and boost engagement.

Realizing that their website was not mobile-friendly (even taking more than 20 seconds to be fully interactive), the company assembled a team of five front-end engineers who worked on launching a PWA.

The result was truly impressive: improved loading speed, higher interactivity as well as better user experience with offline support according to Google.

What we like about this news publisher PWA:

• Prefetch feature (instant page navigation)
• Preloaded key requests
• Optimized JavaScript bundles
• Optimized images
• Enabled HTTP caching

The Washington Post

As a global authoritative news organization, The Washington Post has released one of the most responsive PWAs to reach out to a wider audience on mobile.

Launched in March 2016, the paper's goal is to provide “frictionless, uninterrupted reading.” This comes after its readers expressed their concerns over slow load times on its old mobile app.

With more than 1,000 articles published daily, they have announced that an 88% improvement in load times was initially observed. This has contributed to an increase in retention rate and longer readership according to Google.

What we like about this news publisher PWA:

• Fast loading time
• Real-time live updates
• Same look and feel as the website

متوسط

With social journalism becoming a necessity for readers and publishers alike, Medium has made a mark in the online publishing industry with its 120 million readers.

Medium's initial goal in 2012 was to reinvent the blogging platform through small stories that matter to any type of audience.

Now that it has grown into subscription-based service, its loyal users can follow exclusive content and audio narrations through its PWA even when working offline.

What we like about this news publisher PWA:

• متجاوب
• Seamless functionality even on an unstable connection

Wired

When tech publisher Wired launched its PWA in 2017, its main objective was to increase its app's page speed and reach out to its 11 million users.

And true enough, it did. Not only did it result in higher readership but also more impressions per session, leading other Conde Nast publications to follow suit through what its chief of technology refers to as Alien Web Apps (AWA).

What we like about this news publisher PWA:

• Fast loading time
• Highly responsive
• Reliable background caching

Forbes

With almost a 50% lift in sessions, triple the rise in scroll depth and 100% boost in engagements according to Google, Forbes has definitely reaped the benefits of launching its fully functional PWA in 2017.

Its Chief Product Officer, Lewis Dvorkin, wanted a no-friction experience for its users to have content served to their devices the way they want.

In addition, Dvorkin states that the more people stay longer on their app, the more they view ads, thanks to increased personalization that yields better engagement.

What we like about this news publisher PWA:

• Stunning visual content
• Fast loading times
• Unique number of readers infographic

The Guardian

To make its online content more accessible, UK's leading news and media outlet, The Guardian, launched its PWA in 2017.

The app features high-quality images, interactive multimedia, and thousands of new content without compromising loading time and user experience.

The company also created a US-based innovation team called The Guardian Mobile Innovation Lab, which operated from 2015 to 2018, which explored mobile tools and chat apps to improve user experience.

What we like about this news publisher PWA:

• Customizable sections
• News alert feature
• Offline access

Sports Mole

Sports fans – football, F1, tennis, rugby, cricket, golf and even snooker – are able to enjoy Sports Mole's website features right in their own devices through the site's PWA.

Video clips, real-time scores and game schedules are just some of the exciting features in the PWA.

The result of this move led to higher readership rate and increased session time on the app.

What we like about this news publisher PWA:

• Search functionality
• Seamless video playback
• Real-time updates
• No lag on page transitions

The Weather Channel

Since the 1980s, The Weather Channel has been a trusted companion by travelers and households when it comes to providing an average of 40 billion daily weather forecasts.

While its previous native app was used by half of its total users through mobile web, the company found out that there are still users who don't enjoy reliable connections or are not equipped with advanced smartphones.

Through its PWA, The Weather Channel is able to cater to millions of its global users in 62 languages. Google reports that it has improved its page load time by 80% through the app.

What we like about this news publisher PWA:

• Search functionality
• Multiple language availability
• دفع الإخطارات

MyNet

Offering a wide range of content from news to sports, travel to education, and weather to finance, MyNet is one of Turkey's largest web portals.

Its old mobile site was plagued with complaints, most especially very slow loading speed. This led the company to develop a PWA to deliver fast and a highly engaging website.

Google reports that introducing PWA to MyNet's readers influenced a 15% rise in average views per session and a 23% drop in bounce rate.

What we like about this news publisher PWA:

• تحديثات في الوقت الحقيقي
• وظيفة البحث

الدليل

كوبا

يُعرف Kopa سابقًا باسم PadPiper ، وهو سوق للشقق المفروشة والمستأجرين. يوفر التحقق لكل من المستأجرين والمضيفين المستأجرين ، لذا فإن مطابقتهم أكثر أمانًا.

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

ما نحبه في هذا الدليل PWA:

• نتائج بحث سريعة
• ميزات استضافة الإيجار
• تصميم بسيط

رينتيو

يعد سوق تأجير الكاميرات والأجهزة المنزلية هذا حلاً لأولئك الذين يحتاجون مؤقتًا إلى مثل هذه العناصر.

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

يوفر Rentio's PWA (باللغة اليابانية أو الإنجليزية) واجهة سهلة التنقل ونتائج بحث سريعة والعديد من الفئات ووقت استجابة سريع.

ما نحبه في هذا الدليل PWA:

• قدرات البحث
• عملية معاملات سريعة
• تنقل مريح

جوبي

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

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

تم تصميم Joppy's PWA بوضوح لكل من المجند ومقدم الطلب (الذين هم أساسًا في برشلونة) لجعل عملية التقديم أكثر بساطة.

ما نحبه في هذا الدليل PWA:

• وقت استجابة سريع
• عملية المطابقة السريعة

OpenRent

يمكن أن يكون البحث عن سوق عقارات إيجارية في المملكة المتحدة مصدر إزعاج بدون الأداة الصحيحة عبر الإنترنت. مع OpenRent's PWA ، يمكن للمستأجرين وملاك العقارات البحث بسهولة عن المكان المناسب عندما يتعلق الأمر بالعقارات المتاحة.

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

ما نحبه في هذا الدليل PWA:

• القدرة على تصفية النتائج
• إضافة سهلة للممتلكات
• وقت استجابة سريع

بيع السيارات

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

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

يقدم PWA أيضًا نصائح الخبراء من خلال المراجعات والتوصيات والنصائح حول العناية بسيارتك.

ما نحبه في هذا الدليل PWA :

• تجربة رائعة للجوّال أولاً
• تستجيب لأي حجم شاشة
• تجربة سهلة في وضع عدم الاتصال

كاريجامي

Carigami هو وسيط بيع بالتجزئة فرنسي لبيع السيارات يربط بين الموردين والمستأجرين. يوفر PWA مقارنات موثوقة لأسعار السيارات وفقًا لتفضيلات بحث المستخدم عن المدينة وعمر السائق والتاريخ والوقت.

يعرض التطبيق نتائج البحث في غضون ثوان كاملة مع جميع التفاصيل الخاصة بكل تأجير سيارة.

ما نحبه في هذا الدليل PWA:

• وقت التحميل السريع
• نتائج بحث دقيقة
• مرشحات البحث

يلمع

Shine هي ثاني أفضل بوابة للوظائف في الهند تأسست في عام 2008. وهي تطابق المرشحين لأكثر من 15000 شركة في مجموعة متنوعة من الصناعات.

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

يتم تسليم تنبيهات الوظائف أيضًا بسلاسة إلى جهاز المستخدم.

ما نحبه في هذا الدليل PWA:

• دفع الإخطارات
• يمكن الوصول إليها بالكامل
• صفحة مخصصة غير متصلة بالإنترنت

اجتماعي أو مجتمعي

صوفان

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

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

كما أبلغت عن تحميل أسرع للصفحة ومشاركة أفضل من قبل المستخدمين (من حيث الضرب والمراسلة والشراء والإنفاق).

ما نحبه في PWA الاجتماعي:

• دفع الإخطارات
• سهولة الاستعمال
• الأداء الأمثل (تقسيم الكود على أساس المسار)

بينتيريست

لمدة ثلاثة أشهر ، قامت Pinterest ، منصة مشاركة الصور والوسائط الاجتماعية الشهيرة ، ببناء PWA لتوسيع قاعدة مستخدميها الدوليين. وفقًا لـ Google ، بالمقارنة مع موقعها المحمول القديم الذي كان يبلغ 650 كيلوبايت ، كان حجم PWA البالغ 150 كيلوبايت كافياً لإقناع مستخدميها.

يمكن لمشتركي Pinterest الآن أيضًا الانتظار 5.6 ثانية فقط حتى تصبح واجهة المستخدم قابلة للاستخدام مقارنة بالثانية 23 السابقة على تطبيق الهاتف المحمول السابق.

كانت النتائج المبكرة للانتقال إلى PWA واعدة: زيادة أكثر من 40٪ في الوقت المنقضي على التطبيق ، وزيادة الإعلانات التي ينشئها المستخدمون بنسبة 44٪ ، وزيادة النقرات على الإعلانات بنسبة 50٪ وتحسين التفاعلات الأساسية بنسبة 60٪.

ما نحبه في PWA الاجتماعي:

• دفع الإخطارات
• استخدام نطاق ترددي منخفض
• دعم رائع في وضع عدم الاتصال

برقية

عطلت Telegram خدمة المراسلة الفورية في عام 2013 من خلال توفير أداة قائمة على السحابة متوافقة مع الأجهزة المختلفة.

حتى كتابة هذه السطور ، يعتمد أكثر من 400 مليون مستخدم نشط شهريًا على هذه الخدمة الآمنة عبر الأنظمة الأساسية لتبادل الرسائل النصية والصور ومقاطع الفيديو والملفات الصوتية.

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

ما نحبه في PWA الاجتماعي:

• قابل للتثبيت على iOS و Android
• دعم غير متصل
• قائمة

تويتر

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

وفقًا لـ Google ، كان هدف PWA هو تحسين إعادة مشاركة مستخدميها يوميًا البالغ عددهم 250 ألف مستخدم الذين يتحققون من حساباتهم أربع مرات في المتوسط ​​كل يوم.

من خلال خفض استهلاك البيانات ، وتحسين التحميل الفوري (5 ثوانٍ على شبكة الجيل الثالث) ، وتحسين تفاعل المستخدمين ، أبلغت الشركة عن زيادة بنسبة 65٪ في مشاهدات الصفحة لكل جلسة ، وزيادة بنسبة 75٪ في التغريدات المرسلة ، وانخفاض بنسبة 20٪ في معدل الارتداد .

ما نحبه في PWA الاجتماعي:

• متصفح محسن (تقسيم الكود على أساس الطريق)
• استخدام أقل لعرض النطاق الترددي
• تحديثات سريعة

انستغرام

اتبع Instagram إستراتيجية Twitter في تقديم PWA بمجرد إصدار تطبيق الأخير. في أوائل عام 2020 ، قام Instagram أيضًا بتحديث تطبيق Windows 10 ليكون PWA مكتمل بالرسائل المباشرة.

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

ما نحبه في PWA الاجتماعي:

• دفع الإخطارات
• وقت التحميل الفوري
• ردفعل سريع

السفر والحجز

Airbnb

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

بعد عشر سنوات ، تمت ترقية PWA للعمل بشكل جيد مع Edge على Windows 10 mobile. والنتيجة هي انتقالات أكثر سلاسة للصفحة الفورية للعملاء. حتى الآن ، هناك أكثر من 80 مليون زائر شهريًا على Airbnb ، معظمهم على تطبيقه.

ما نحبه في PWA هذا:

• دفع الإخطارات
• ردفعل سريع
• صور عالية الجودة يتم تحميلها في غضون ثوان

تريبو

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

وفقًا لـ Google ، يتم تحميل PWA في أربع ثوانٍ فقط عبر شبكة 3G. يشير الموقع أيضًا إلى أنه حقق خمسة أضعاف النقرات إلى الظهور وزاد معدل التحويل بمقدار ثلاثة أضعاف.

ما نحبه في PWA هذا:

• التقديم من جانب الخادم
• وقت سريع للتفاعل
• العرض التدريجي (تدفق HTML)

نذهب

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

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

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

ما نحبه في PWA هذا:

• استجابة سريعة للغاية
• تصميم بسيط
• نتائج بحث دقيقة
• وزن خفيف

MakeMyTrip

انضمت MakeMyTrip ، وهي إحدى وكالات السفر عبر الإنترنت الرائدة في الهند ، إلى عربة PWA لتلبية احتياجات زوارها البالغ عددهم 8 ملايين زائر شهريًا بشكل أفضل.

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

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

والنتيجة هي زيادة هائلة بنسبة 160٪ في جلسات العملاء وانخفاض بنسبة 20٪ في معدل الارتداد وفقًا لـ Google. بالإضافة إلى ذلك ، كان من المرجح أن يقوم المتسوقون في المرة الأولى بالتحويل ثلاث مرات أكثر من أولئك الذين استخدموا التطبيق المحلي من قبل.

ما نحبه في PWA هذا:

• تصفح سهل
• قابل للتثبيت على أي نظام تشغيل
• وقت التحميل السريع

ترافلستارت

بالاستفادة من نجاح سوقها عبر الإنترنت ، دخلت جوميا في صناعة السفر من خلال Jumia Travel. كان PWA دورًا أساسيًا في زيادة حركة المرور بمقدار اثني عشر ضعفًا ومعدلات التحويل بنسبة 33٪ وفقًا لـ Google.

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

ما نحبه في PWA هذا:

• وقت التحميل السريع
• واجهة بسيطة

تريفاجو

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

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

تمت إضافة PWA من قبل أكثر من نصف مليون مستخدم من 55 دولة إلى شاشاتهم الرئيسية مما أدى إلى زيادة بنسبة 150٪ في المشاركة و 97٪ في النقرات على صفقات الفنادق بناءً على تقرير Google.

ما نحبه في PWA هذا:

• قابل للتثبيت على Android و iOS
• دعم رائع في وضع عدم الاتصال
• ردفعل سريع
• مرشحات البحث
• دعم متعدد اللغات

اوبر

تطبيق Uber's PWA هو أحد أكثر التطبيقات المصممة بشكل فريد اليوم. وضعت شركة سيارات الأجرة تطبيق Window 10 خلف الكواليس في عام 2018 لصالح PWA الذي تم إطلاقه لأول مرة في يوليو 2019.

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

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

ما نحبه في PWA هذا:

• وقت التحميل السريع
• دعم غير متصل
• وزن خفيف
• عملية حجز سريعة للغاية

ليفت

قامت شركة Lyft ، منافس Uber ، والتي تأسست في عام 2012 ، بتوسيع قواعد السائقين والسائقين في الولايات المتحدة وكندا.

من خلال تقديم أسعار أرخص (من حيث خطة الاشتراك للمسافرين الدائمين) ، استحوذت الشركة على حصة سوقية ضخمة كانت تسيطر عليها شركة Uber في السابق. قدمت PWA في عام 2016

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

ما نحبه في PWA هذا:

• وقت استجابة سريع
• تحديثات موثوقة في الوقت الحقيقي

تجول

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

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

ما نحبه في PWA هذا:

• سريع جدا في تحميل الصفحة
• معاملات آمنة

FlyWeekend

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

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

PWA سهل الاستخدام ، مما يضمن مشاركة أعلى بسبب المفهوم الفريد.

ما نحبه في PWA هذا:

• وقت استجابة سريع
• تحميل سريع للصفحة

كول ابن عم

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

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

تم إطلاق PWA في عام 2018 لتوفير تجربة وصول أسرع وأكثر سلاسة بين مستخدميها. أعلنت الشركة في تحديثها الرسمي أن التطبيق قد قلل من وقت التحميل بنسبة 25٪ وقلل من وصول المستخدمين إلى مصادر أخرى عبر الإنترنت.

ما نحبه في PWA هذا:

• وقت استجابة سريع
• تصفح سهل

وسائل الترفيه

ساوندليس

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

يعد تطبيق Soundslice's PWA مثاليًا لجلسات التدريس الذاتي باستخدام جهاز محمول. يسمح للمستخدم بتغيير درجة الصوت ، وأقسام التكرار ، وتدوين الموسيقى. من ناحية أخرى ، يمكن لمدرسي الموسيقى تطوير جلسات تفاعلية باستخدام الأداة.

تتيح عينات "الشرائح" للمستخدمين تشغيل الصوت مصحوبًا بدليل خط عمودي متحرك على ورقة الموسيقى.

ما نحبه في PWA هذا:

• التصميم التفاعلي
• وقت التحميل السريع

سبوتيفي

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

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

ما نحبه في PWA هذا:

• واجهة مستخدم تكيفية
• دعم غير متصل
• التصميم التفاعلي

1 موالف

خلافا للاعتقاد السائد ، فإن الراديو لم يمت. مع 1Tuner ، يمكن لأي مستخدم الاستماع إلى محطات الراديو (في أي مكان في الكلمة) والبودكاست.

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

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

ما نحبه في PWA هذا:

• موضوع قابل للتخصيص
• عدد كبير من توصيات المحتوى

9GAG

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

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

تحول 9GAG إلى PWA لتقليل سرعات تحميل الصفحة وتشجيع مشاركة أفضل للمستخدم. كشف الموقع أن مستخدميه ظلوا على التطبيق لمدة أطول بنسبة 25 في المائة مقارنة بالتطبيق الأصلي.

ما نحبه في PWA هذا:

• قابل للتثبيت على Android و iOS
• دعم غير متصل
• وقت التحميل السريع

Lotto.de

توفر المعلومات المجمعة في الوقت الفعلي حول أحدث نتائج Euro lotto على PWA هذا موردًا مفيدًا من اللاعبين.

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

ما نحبه في PWA هذا:

• تجربة مستخدم سلسة
• التوفر باللغتين الألمانية والإنجليزية

اختتام أفضل 50 مثالاً لـ PWA

نأمل أن تكون أمثلة تطبيقات الويب التقدمية هذه قد أبرزت بعض النقاط الرئيسية التي طرحناها في هذا الدليل.

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

ربما كنت تتلاعب بفكرة إنشاء تطبيقات iOS و Android بنفسك ، وقد تم تعقبك بشكل جانبي للنظر في PWAs بدلاً من ذلك. ربما لم تكن قلقًا بشأن الإطلاق في متاجر التطبيقات ، وتريد فقط موقعًا أفضل بكثير.

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

ما نوع التطبيق الذي يجب أن تنشئه؟ تطبيقات الويب التقدمية مقابل التطبيقات الأصلية

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

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

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

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

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

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

التطبيقات الأصلية هي "منزل" رائع لأكبر المعجبين بك.

تضع Google الأمر على هذا النحو:

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

توصيتنا - بناء كليهما!

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

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

كيفية بناء تطبيق ويب تقدمي

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

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

هل هو شرعي رغم ذلك؟

نعم و لا. هذه "الاختراقات" لـ PWA هي أيضًا للوفاء بالحد الأدنى المطلق من المعايير - HTTPS وبيان الويب وعامل الخدمة. إذا كنت مهتمًا بإنشاء تطبيق ويب تقدمي أساسي جدًا وعملي - يمكنك تجربة PWABuilder من Microsoft. مع القليل من الترقيع والمعرفة الفنية ، يمكنك الحصول على شيء لائق وتشغيله.

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

1. قم بشراء شهادة SSL ليتم تكوينها من خلال خدمة الاستضافة الخاصة بك
2. تطوير هيكل التطبيق
3. تحقق مما إذا كان المستعرض يدعم العاملين في الخدمة
4. تسجيل ملف عمل الخدمة
5. إضافة دفع الإخطارات وبيان تطبيق الويب
6. قم بإعداد موجه التثبيت
7. اختبر وظائف التطبيق
8. قم بتدقيق قائمة التحقق الخاصة بـ Lighthouse المستندة إلى التطبيق
9. إصلاح الخلل
10. قم بتشغيل التطبيق

يبدو سهلا ، أليس كذلك؟

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

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

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

التكلفة والجدول الزمني لإنشاء تطبيق ويب تقدمي

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

يعتمد الأمر كليًا على مدى تعقيد التطبيق الذي تريد إنشاءه. وفقًا لمؤلفي كتاب PWA:

سيستغرق بناء PWA من نقطة الصفر شيئًا ما بين 3400 واط (لتطبيق صغير) إلى 9000 واط (مشروع مخصص قمنا بإنجازه). وهذا يعني أن التكلفة تتراوح بين 400 ألف دولار ومليون دولار. سيكون استخدام النظام الأساسي السحابي أرخص بنسبة 75٪ على الأقل ، كما سيكون وقت التسويق أقصر بنسبة 75٪ (2-3 أشهر بدلاً من 8-12 شهرًا).

- الفصل العاشر كتاب سلطة المياه الفلسطينية

يبدو هذا في النهاية باهظة الثمن ، لكنه يمنحك فكرة عن كيفية استثمار العلامات التجارية الكبرى مثل تلك التي نظرنا إليها أعلاه في تجاربها.

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

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

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

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

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

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

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

تواصل مع أحد خبرائنا المتنقلين للحصول على استشارة لمعرفة المزيد.

إنه بين يديك - ابدأ في إنشاء تطبيق ويب تقدمي اليوم!

يجب أن يكون لديك نظرة عامة جيدة حول خصائص وقوة تطبيقات الويب التقدمية الآن.

لمعرفة المزيد ، تحقق من هذه الموارد:

• كتاب PWA
• موارد Google على web.dev و Google Developers
• إحصائيات PWA (مقاييس ودراسات حالة مثيرة للاهتمام)
• Google's PWA Roadshow (سلسلة فيديو رائعة)
• إرشادات PWA الممتازة من Mozilla
• كتاب جيسون جريجسبي "تطبيقات الويب التقدمية"
• ما الذي يمكن أن يفعله الويب اليوم؟ (يوضح كيف تطورت تقنية الويب)
• نعم ، يجب أن يكون مشروع الويب هذا عبارة عن PWA (دليل / مقال ممتاز)
• دليلنا حول الفرق بين التطبيقات الأصلية وتطبيقات الويب والتطبيقات المختلطة

حان الآن دورك. قد تبدو مهمة شاقة - لكنك تحتاج إلى تحويل موقع الويب الخاص بك إلى تطبيق ويب تقدمي للحصول على حضور ويب رائع وحديث ومثالي.

عندما تكون جاهزًا للإطلاق ، ستكون سعيدًا ، ونضمن لك ذلك. وسيكافئك عملاؤك بقضاء المزيد من الوقت والاهتمام والمال في التعامل مع عملك.

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

هل يجب عليك إنشاء تطبيقات أصلية أيضًا؟

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

إذا كنت تشارك هذه المخاوف ، ولكنك مهتم بإنشاء تطبيقات iOS و Android لعلامتك التجارية ، فيجب عليك التحقق من منصاتنا News أو Canvas for eCommerce أو Canvas. أيهما مناسب لك - يمكنك تحويل موقعك أو تطبيق الويب الخاص بك إلى تطبيقات أصلية عالية الجودة في غضون أسابيع فقط ، مقابل أقل من 100 دولار / م.

يمكن استخدام منصاتنا لتحويل أي موقع ويب إلى تطبيق جوال. لا يهم ما تم بناء موقعك به. MobiLoud رائع لبناء:

• تطبيقات WordPress
• تطبيقات الفقاعات
• تطبيقات Squarespace
• تطبيقات Wix
• تطبيقات WooCommerce
• تطبيقات Webflow

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

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