Twitter PWA: ما تحتاج إلى معرفته
نشرت: 2022-07-03لم تكن الفجوة التكنولوجية بين الشركات الكبرى والشركات الصغيرة التالية أقرب من أي وقت مضى. مع تطبيق الويب التقدمي ، فإن أحد أكبر المساهمين هو أن القدرة المالية قد انخفضت بشكل كبير. من خلال تطبيق الاستخدام الجديد والمتقدم لتقنية تطبيقات الويب التي يجب أن تذكر بعمق عمال الخدمة ، يمكن للشركات من جميع الأحجام تعديل PWA وفقًا لاحتياجاتها الوظيفية وميزانياتها. إذا كنت تبحث عن مصدر إلهام من عمليات تبني PWA الرائعة في العالم ، فإن دراسة الحالة أدناه على Twitter PWA هي شيء لا يمكنك تفويته.
محتويات
قصة تويتر قبل تكامل PWA
في أبريل 2017 ، تم إطلاق Twitter Lite ، التحسين الجديد لموقعه على متصفح الجوال ، بعد تعاون مع Google. جاء الاسم من حقيقة أنه تم تصميمه ليكون أخف وأسرع وأكثر قابلية للاستخدام.
سريعًا حتى يومنا هذا ، يعد Twitter ثالث أشهر مواقع التواصل الاجتماعي في الولايات المتحدة والمرتبة الخامسة عشر على مستوى العالم. على الرغم من أن معظم الديموغرافية لمستخدميهم موجودون في الولايات المتحدة ، إلا أن اليابان والهند هما أكبر ممثلين لمستخدمي Twitter اللذان يتجاوزان معًا عدد المستخدمين في الولايات المتحدة.
يجب أن يعود تاريخ قصة Twitter Lite من عام 2010 إلى عام 2017 ، مع Twitter في طريقه ليصبح أفضل موقع وسائط اجتماعية في العالم.
كان لدى Twitter بداية صعبة مقارنةً بأكبر منافسة لهم ، Facebook ، في الأيام الأولى. ومع ذلك ، من عام 2010 فصاعدًا ، شهد بلوبيرد مشهدًا رائعًا على الرسم البياني ، ونموًا ثابتًا ربعًا تلو الآخر. بين 2015 و 2016 و 2017 ، تباطأ معدل النمو.
إدراكًا للإمكانيات خارج الولايات المتحدة ، كان Twitter يصل بسرعة إلى السوق الدولية.
بمجرد أن قدمت Google PWA ، عرف Twitter كيف يمكنه التوسع واكتساب مستخدمين جدد. كان Twitter Lite هو الإجابة النهائية ، وهو مكرس للبلدان الناشئة التي لديها اتصالات شبكة غير موثوقة. يشغل Twitter PWA الجديد أقل من ميغا بايت من مساحة التخزين أثناء الأداء باستخدام وضع توفير البيانات المحسن. الصور ومقاطع الفيديو في معاينة غير واضحة حتى ينقر عليها المستخدمون.
صرح نيكولاس غالاغر ، رئيس قسم الهندسة في Google for Twitter Lite: "يعد Twitter Lite الآن الطريقة الأسرع والأقل تكلفة والأكثر موثوقية لاستخدام Twitter." احتل نجاح Twitter Lite عناوين الصحف للعديد من المقالات المتعلقة بـ PWA.
حل أكبر PWA في العالم - Twitter PWA
لمساعدتك في الحصول على المعرفة الفعلية لتطوير PWA ، سيتم تقديم النقاط المهمة حول إطار عمل Twitter PWA أو Twitter Lite والأساليب المبتكرة المخصصة للطلبات عند الطلب أدناه.
لاحظ أن الهدف الكامل من Twitter Lite هو ضمان حصول المستخدمين على تجربة ممتازة في الموقع ، بغض النظر عن ضعف اتصالات الإنترنت ، مما يؤدي إلى زيارات لاحقة وتحويل الزوار إلى مستخدمين متكررين. بفضل القدرة على تعزيز السرعة والموثوقية والأمان لـ PWA ، يمكنك تجربتها على mobile.twitter.com.
فكرة العمارة
Twitter Lite ، في جوهره ، هو خادم Node.js بسيط الحجم وتطبيق جافا سكريبت من جانب العميل. سيمكن PWA بناء API للتخزين المؤقت للبيانات وتخزينها. سيهتم الخادم أولاً بعملية المصادقة ، ويجمع الحالة الأولى للتطبيق ، ويحول رموز الويب إلى صفحات تفاعلية عن طريق عرض HTML الأولي في غلاف التطبيق.
بمجرد التحميل في الخلفية ، سيتم طلب البيانات مباشرة من Twitter API. تساعد البساطة في هذه البنية Twitter PWA على تقديم خدمة متميزة وموثوقة بكفاءة حتى على نطاق واسع.
أداء التصميم
تعد سهولة الاستخدام من أهم أولويات Twitter Lite. سيصل الملايين ، إن لم يكن مئات الملايين من المستخدمين ، إلى هذه الشبكة الاجتماعية كل شهر. لذلك يريدون إنشاء رحلة مستخدم تكون قابلة للاستخدام بشكل كبير تحت أي ظروف اتصال.
استخدم المطورون سلسلة من النفوذ المتزايد للأداء ، ونمط PRPL ، جنبًا إلى جنب مع آخر التحديثات من المتصفحات الحديثة ، لبناء عامل الخدمة ، وإشعارات دفع الويب ، و IndexedDB ، وشعارات تثبيت تطبيقات الويب. لقد كانوا جميعًا جزءًا من سرعة التحميل الرائعة والاستقلال عن الاتصال.
استخدام البيانات
بالاعتماد على الموارد المخزنة مؤقتًا لخدمة بيانات أصغر مقدمًا ، إلى جانب وضع حفظ البيانات ، تم تعيين Twitter Lite بطبيعته لتقليل استخدام البيانات ، مما يؤدي إلى خصم 40٪ على صفحة المخطط الزمني. لتحميل الصورة المحسنة عند الطلب ، يتم تنفيذ طلب HEAD لعرض حجمها بنقرة زر.
التحميل التدريجي
بعد ملء استجابة HTML الأولية للمتصفح ، يتم إرسال التعليمات لتحميل الموارد الأساسية مسبقًا للخادم لتجميع الحالة التفاعلية. يتم تقسيم البرامج النصية إلى أجزاء دقيقة باستخدام حزمة الويب للتحميل فقط عند الطلب.
بعبارة أخرى ، يكون التحميل الأولي من Twitter Lite سريعًا بشكل استثنائي لأنه يتم إجراء ضرورة العرض المرئي فقط ، بينما يقوم عامل الخدمة بتخزين موارد إضافية مسبقًا لتمكين المظهر الفوري تقريبًا والانتقال السلس في التفاعلات المستقبلية.
التوفر في وضع عدم الاتصال
تمامًا مثل التطبيق الأصلي ، يجعل عامل الخدمة الاستخدام المؤقت في وضع عدم الاتصال ممكنًا. يتم إعادة فتح جميع الصفحات التي تم تحميلها مسبقًا على الفور من خلال التخزين المؤقت في غلاف تطبيق HTML والأصول الثابتة وبعض الرموز التعبيرية الأكثر شيوعًا.
يتم توفير زر "إعادة المحاولة" عند حدوث فشل في تحميل البيانات أو النصوص البرمجية لضمان معالجة المشكلة. ما عليك سوى تمكين التصفح دون اتصال بالإنترنت وتحسين سرعة التحميل في البدء والزيارات اللاحقة بشكل كبير.
استدعاء
ننسى أعمال التقديم باهظة الثمن ؛ تم تحسين Twitter Lite لعرض المكونات. ومع ذلك ، تكمن المشكلة الأكبر في تعقيد التغريدات مع القوائم اللانهائية للمتطلبات لأداء إضافي.
ثم فكروا في مكون قائمة افتراضي يعرض المحتوى فقط للعرض المعروض أعلاه ويتم الاحتفاظ به للتمرير عبر الشاشات. كان هناك تحديث آخر من خلال تأجيل العرض غير الحاسم إلى الوضع غير النشط وتوفير استهلاك البيانات بواسطة requestIdleCallback API.
الأنظمة والسرعة المضاعفة
Twitter Lite هو نظام تصميم سريع الاستجابة مبني على أساس تفاصيل مكونات التطبيق ليتوافق مع أي طلبات شكل. أدى العمل مع مكونات واجهة المستخدم إلى إفراغ مساحة للتكرار السريع وإعادة استخدام الكتل الأساسية. من الجدير بالذكر أيضًا أن flexbox يعتمد بشكل كبير على تصميم التخطيط ، وأرقام محدودة مثبتة على الألوان وأحجام الخطوط والأطوال.
نتيجة Twitter PWA
موقع الجوال وسطح المكتب
يُزعم أن Twitter PWA أصبح تفاعليًا لمدة 5 ثوانٍ وأقل عبر معظم الأجهزة المزودة بشبكة 3G. يتم تحميل الإصدار Lite بشكل أسرع بنسبة 30٪ ويوفر ما يصل إلى 70٪ من استخدام البيانات مع تقليل التأخير في التفاعل بأكثر من 25٪.
مقارنةً بالتطبيق الأصلي القديم ، لا يشغل Twitter PWA سوى 3٪ كحد أقصى من الحجم ، وهو جزء صغير من مساحة تخزين الجهاز. ومع ذلك فهي تعمل بشكل عميق وقوي. يمكن إنشاء المخططات الزمنية ، وهي واحدة من أكثر الميزات تعقيدًا ، من 30 سطرًا لتكوين رمز محدود أثناء إرفاق وحدة Redux بمكون React ، وهو محتوى مختلط.
يعمل PWA بشكل مشابه للتطبيق الأصلي ، مع ميزات قياسية مثل موجز منتظم ، وإشعارات دفع منبثقة ، ورسائل مباشرة ، وعلامات تبويب بحث. تستجيب عملية الانتقال عبر الصفحات والعناصر ، على الرغم من الإبلاغ بشكل ملحوظ عن أن الاستجابة اللمسية أبطأ من تطبيقاتها الأصلية. لا يزال المطورون يعملون على تعزيز قابلية الاستخدام والمسؤولية في الإصدارات المستقبلية.
كل شيء مناسب تمامًا مع إصدار سطح المكتب ، حيث يعمل بشكل جيد في النوافذ الضيقة ، مقارنةً بتطبيقات Twitter الرسمية المهملة في كل من Mac و Windows. تبدو التجربة بأكملها خفيفة الوزن نسبيًا ومريحة للاستخدام.
يدعم Twitter Lite حاليًا ما يصل إلى 42 لغة ، وتم إنشاء ميزة Globalize لإظهار الأرقام والتواريخ والرسائل التي تناسب السكان المحليين.
النتائج بالأرقام
- 65٪ زيادة في عدد الصفحات في الجلسة
- 75٪ زيادة في عدد التغريدات المرسلة
- 20٪ انخفاض في معدل الارتداد
كيف أصبح Twitter PWA أحد أسرع تطبيقات الويب التعليمية PWA؟
مع التعديل الوظيفي في المعرفة الحالية للعاملين في الخدمة ، جنبًا إلى جنب مع التحسين لتقليل استهلاك البيانات ، فإن PWA مُجسّد للتعامل مع سرعة التحميل الأسرع والظهور شبه الفوري في الزيارات اللاحقة ، سواء عند البدء أو أثناء الرحلة.
لن يتم تحسين السرعة في يوم أو يومين ، بل ستكون عملية متكررة للاختبار والتتبع والقياس ومحاولة فهم سبب حدوثها وتطبيق الحلول الممكنة. العمل على الأداء عبارة عن حلقة مفرغة من المشاهدة والقياس والتحسين هنا وهناك.
مع ذلك ، فإن Twitter Lite عبارة عن تراكم للتحسينات والتحديثات الصغيرة على تحميل الصفحة الأولى ، وتقديم مكونات React ، ومنع إعادة العرض ، وما إلى ذلك. كل منها يخدم تحسين الأداء ككل ، وكل الجهد القليل الذي نراه الآن ، أحد أكبر وأسرع تطبيقات PWA في العالم.
بالطبع ، للحفاظ على هذا العنوان ، يتعين على المطورين العمل باستمرار لضمان التحكم في كل شيء وتطوير العملية إلى شيء أفضل إذا كانت هناك فرصة.
الأسئلة المتداولة حول Twitter PWA و PWA
هل Twitter هو PWA؟
قطعاً. أصدر Twitter إصدارًا جديدًا من تطبيق الويب التقدمي بالتعاون مع مطوري Google في عام 2017. يُطلق على Twitter PWA اسم Twitter Lite ، ويركز بناؤه على خدمة المستخدمين الدوليين الذين قد يواجهون غالبًا اتصالات غير مستقرة مقارنة بالولايات المتحدة.
هل هو مكلف لبناء PWA مثل Twitter PWA؟
يُقال إن Twitter PWA هو أرخص إصدار لجميع مسؤولي Twitter ، ولكنه يعمل بشكل رائع عبر متصفحات مختلفة ويشبه بعضًا من أعظم ميزات التطبيق الأصلي.
Twitter PWA عبارة عن مزيج من تحسين الأداء الممتاز والتطبيق العالمي لتقنية PWA الحديثة. مع ذلك ، فإن بناء PWA استثنائي مثل Twitter Lite يعتمد بشكل كبير على فريق التطوير الذي تقوم بتعيينه أو الاستعانة بمصادر خارجية له.
PWA هو أفضل بديل ممكن للتطبيقات المحلية وتوقع بشكل عام مستقبل مواقع الويب. لذلك ، إذا كانت الشركات عبر الإنترنت تبحث عن طريقة للاستفادة من معدل التحويل الخاص بها عن طريق تحسين رحلة العميل في الموقع ، فتخلص من التطبيقات المحلية ذات الوزن الثقيل والثمن وابحث عن PWA بدلاً من ذلك.
من أين تبدأ بتطوير PWA لأعمالك؟
حسنًا ، يجب أن يبدأ كل شيء بمكان عملك ، وما يحتاجه ، وأين تريد أن يكون. منطقي؟ لأنك لا تريد أن تخسر المال والوقت الثمين في شيء غير ذي صلة ، أليس كذلك؟
الخطوة الحاسمة التالية هي تحديد ما إذا كانت PWA ستلائم إستراتيجية عملك. يبحث الجميع تقريبًا عن طرق لزيادة حركة المرور على الموقع ، أو تحسين معدلات التحويل ، أو الاستفادة من قيمة وحدتهم. ويمكن لوكالة تطوير PWA مساعدتك في كل ذلك.
يمكنهم مساعدتك في اكتشاف المشكلة في أي المناطق ذات الأداء المنخفض قد تكون على موقعك. إذا لم تتمكن من اكتشاف الحل الأفضل ، فتواصل مع خدمة الاستشارة أو الفحص.
وذلك عندما نصل إلى الخطوة التالية: اختيار مزود خدمة تطوير PWA موثوق. أنت بحاجة إلى اسم يتمتع بسنوات من الخبرة ، مما يجذب فريقًا ديناميكيًا من المطورين الذين يسعون جاهدين لتحقيق الأفضل لعملائهم ، وبالطبع ، المعرفة والمهارات الممتازة اللازمة لإنشاء PWA وظيفية للغاية وغنية بالميزات.
Tigren هي وكالة الاستعانة بمصادر خارجية رائدة على مستوى العالم والتي وثق بها الآلاف من الشركات الصغيرة والمتوسطة العالمية على مدار العقد الماضي. نحن فريق من الشباب ، والطموح ، والأفراد المتفانين ، تم اختيارهم من بين أفضل المتفوقين في مجالهم.
نحن متخصصون في تطوير التجارة الإلكترونية ، خاصة مع خدمات تطوير Magento و PWA. نريد أن نقدم لك أفضل صفقة لا يمكنك العثور عليها في أي مكان آخر ، ومساعدتك حتى النهاية وتحقيق الهدف الذي أتيت إلينا من أجله.
يمكنك الاعتماد علينا إذا كنت بحاجة إلى حل فعال وفعال من حيث التكلفة من أجل:
- تطوير التجارة الإلكترونية بالكامل PWA من البداية
- تطوير التجارة الإلكترونية PWA جزئيًا
- الحلول والتحسينات المضمنة في التجارة الإلكترونية الحالية PWA
- سمات / ملحقات / ملحقات ممتازة للتجارة الإلكترونية الجاهزة للاستخدام
الماخذ الرئيسية
يجلب تطبيق Twitter PWA الجديد نفسًا من الهواء النقي إلى عالم الويب المحمول الباهت وغير المستجيب. لقد دفعت الشراكة القوية بين Twitter و Google شهرتها من خلال تبني تحويلي ، حيث تجاوزت جميع المخاوف والشكوك حول إمكانات PWA. كن أحد المتبني الناجح لـ PWA مبكرًا ، وابدأ في تدليل مستخدمي الإنترنت لديك ، وحفز زيادة عائد الاستثمار مع Tigren اليوم قبل فوات الأوان.