Tinder PWA: مثال ناجح لتطبيق الويب التقدمي

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

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

نظرة عامة على Tinder

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

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

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

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

وفقًا لعدد المستخدمين ، يظل Tinder أكبر موقع مواعدة عالميًا ، حيث يجذب 75 مليون شخص على المنصة كل شهر ، من بينهم 7.8 مليون مستخدم أمريكي.

الموقف المؤدي إلى تكامل Tinder PWA

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

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

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

كيف يمكن للتحول إلى PWA أن يحل طلب Tinder؟

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

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

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

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

تأثير Tinder PWA

استغرق فريق مطوري Tinder ثلاثة أشهر قوية لإنجاز المشروع القوي ، من البداية إلى النهاية. تم استخدام React لمكتبة واجهة المستخدم الخاصة بـ Tinder PWA ، بينما كان Redux مسؤولاً عن إدارة الدولة.

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

من المؤكد أن أموال Tinder لا تحب الهزهزة. أتت جهودهم ثمارها عندما تم تسليم حزمة تجربة Tinder الأساسية بتكلفة منخفضة تصل إلى 10٪ من الاستثمار المسبق لمثل هذه البيئة الباهظة الثمن للبيانات.

مراجعة تجربة المستخدم

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

النتائج

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

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

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

كيف يمكنك بناء PWA مثل Tinder؟

هل تريد أن تعرف كيف تتخطى Tinder مع PWA؟ قل لا زيادة. سنقدم لك ملخصًا لما فعلوه.

الكشف عن الإطار

تقسيم الكود على مستوى الطريق

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

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

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

تنتمي React Loadable إلى مكتبة James Kyle الصغيرة المتمركزة حول المكونات لتقسيم الشفرة في React.

إنها وظيفة يمكنها إنشاء مكون آخر ، لذا من السهل تقسيم الحزم إلى مكونات. كانت النتيجة حزمة بحجم 101 كيلو بايت بدلاً من 166 كيلو بايت ، وتم اختصار DCL من 5.46 إلى 4.69 ثانية.

اضطر React 16 في النهاية إلى إصدار ترقيات قللت من حجم حزمة React من الإصدارات السابقة ، وهو جزء من إستراتيجية تغليف أفضل باستخدام Roll-up واستبدال الكود غير المستخدم.

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

التخزين المؤقت للأصول على المدى الطويل

استخرج الاستخدام الطويل مع إخراج الموارد الثابتة وحزمة الويب باستخدام [chunkhash] لإرفاق ملف تخزين مؤقت لكل ملف.

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

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

يجب أن يكون CSS عند حد 20 كيلوبايت لتجنب تراجع الأداء.

إستراتيجية CSS

أنشأ Tinder أنماط CSS عالية الجودة يمكن إعادة استخدامها بواسطة Atomic CSS ، والتي ظلت مضمنة مع الطلاء الأولي وأنماط CSS للتحميل الأخرى المستندة إلى ورقة الأنماط. 20 كيلوبايت gzipped في الجزء العلوي للأنماط المهمة ، ولكن يمكن إعادة بنائها مؤخرًا إلى أقل من 11 كيلوبايت.

استخدام Workbox والتخزين المؤقت للأصول في وضع عدم الاتصال

استفاد Tinder من اعتراض الشبكة مع المكون الإضافي Workbox Webpack ، والتخزين المؤقت لـ App Shell والأصل الثابت الرئيسي ، أي CSS ، وجميع الحزم الأساسية والموردين والبيان.

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

خدمات PWA المتميزة

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

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

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

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

أرسل لنا رسالة على [email protected] إذا كان لديك أي استفسارات حول PWA.

الماخذ الرئيسية

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

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