متتبع سانتا باعتباره تطبيق ويب تقدّمي (PWA)

الاطّلاع على الموقع الإلكتروني

ملخّص

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

النتائج

  • سانتا هو تطبيق ويب تقدّمي (PWA) يتيح الإضافة إلى الشاشة الرئيسية (ATHS) وبلا اتصال بالإنترنت.
  • بدأت 10% من الجلسات المؤهَّلة باستخدام رمز ATHS.
  • 75% من المستخدمين يعتمدون بشكل أساسي العناصر المخصّصة وshadow DOM، وهما جزءان أساسيان من مكوّنات الويب
  • نتيجة Lighthouse 81
  • في وضع عدم الاتصال، من خلال واجهة برمجة تطبيقات Service Worker، يرتبط التحميل الكسول للتخزين المؤقت للمشاهد التي تمت زيارتها فقط وترقيتها بدون تنبيه في الإصدارات الجديدة

الخلفية

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

على الويب، يعد سانتا تعقب موقع كبير وتفاعلي به العديد من "المشاهد" الفريدة - التي تمت كتابتها باستخدام البوليمر - ويدعم معظم المتصفحات الحديثة. يتم تحديد تقييم ما إذا كان متصفّح المستخدم "حديثًا" من خلال رصد الميزات: تتطلب "سانتا" استخدام Set وWeb Performance API، وغير ذلك.

في عام 2016، أجرينا ترقية للمحرك خلف تطبيق سانتا Tracker من أجل توفير تجربة غير متصلة بالإنترنت لمعظم المشاهد. ولا يشمل ذلك المشاهد التي تستند إليها مقاطع فيديو YouTube أو تلك التي تتعلق بموقع بابا نويل المباشر، والتي لا تتوفر بالطبع إلا إذا كان لها صلة مباشرة بالقطب الشمالي! 📶☃️

تتبّع بابا نويل على جهاز Android
تتبّع بابا نويل على جهاز Android

التحديات

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

  • يتوفر بابا نويل بأكثر من 35 لغة، لذا يجب تكرار العديد من مواد العرض.
  • تختلف الوسائط حسب المنصّات المختلفة (مثلاً، mp3 وogg).
  • يتم أحيانًا توفير ملفات الوسائط المتعددة بأحجام ودرجات دقة مختلفة.

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

في ما يلي التحديات:

  • موارد وسائط متعددة كبيرة لـ "مشاهد" مختلفة
  • التغييرات التي يتم إصدارها على مدار الشهر

...تؤدي إلى عدم ملاءمة إستراتيجية ساذجة للإنترنت.

بابا نويل مبني باستخدام البوليمر

ننصحك بالتراجع والحديث عن التصميم العام لبابا نويل قبل التعمق في الطريقة التي أجرينا بها ترقيته إلى تطبيق ويب تقدّمي (PWA) بلا اتصال بالإنترنت.

سانتا هو تطبيق من صفحة واحدة، تمت كتابته في الأصل باللغة البوليمرية 0.5، وتمت ترقيته الآن إلى الإصدار البوليمر الإصدار 1.7. يتكون بابا نويل من مجموعة مشتركة من الرموز - جهاز التوجيه، وأصول التنقل المشتركة، وما إلى ذلك. ويحتوي أيضًا على العديد من "المشاهد" الفريدة.

أداة التحميل المسبق

يمكن الوصول إلى كل مشهد من خلال عناوين URL مختلفة، مثل /village.html و/codelab.html و/boatload.html، وهو عبارة عن مكوّن ويب خاص به. عندما يفتح المستخدم مشهدًا، يتم مسبقًا تحميل جميع عناصر HTML والأصول المطلوبة (الصور، الصوت، css، js)، الموجودة ضمن /scenes/[[sceneName]] في مستودع سانتا تراك. وأثناء حدوث ذلك، يرى المستخدمون أداة تحميل مُسبق سهلة الاستخدام تُظهر مستوى التقدُّم.

ويعني هذا النهج أنّنا لا نضطر إلى تحميل مواد العرض غير الضرورية للمشهد الذي لا يراه المستخدم (وهي بيانات كثيرة). يعني ذلك أيضًا أننا بحاجة إلى الاحتفاظ بـ "بيان ذاكرة التخزين المؤقت" الداخلي لجميع الأصول المطلوبة لكل مشهد. بيان ذاكرة التخزين المؤقت هو ملف JSON يخزِّن تعيين من اسم الملف إلى تجزئة MD5 من محتواه.

تحميل البيانات التي تستخدمها

يوفّر هذا النموذج معدّل نقل البيانات، فهو يعرض فقط الموارد المطلوبة للمشاهد التي يزورها المستخدم، بدلاً من التحميل المُسبق للموقع الإلكتروني بأكمله في آنٍ واحد. يستفيد تطبيق "Santa Tracker" من قدرة البوليمر على ترقية العناصر المخصصة في وقت التشغيل بدلاً من وقت التحميل. ضع في الاعتبار المقتطف التالي:

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

تتبع سانتا الخطوات التالية لتحميل مشهد، على سبيل المثال، boatload-scene:

  1. كل عناصر المشهد (بما في ذلك <boatload-scene>) غير معروفة في البداية ويتم التعامل معها جميعًا على أنّها HTMLUnknownElement مع بعض السمات الإضافية.
  2. عند تغيير المشهد الذي تم اختياره، يتم إشعار العنصر <lazy-pages>.
  3. يحل العنصر <lazy-pages> عنصر المشهد وسمة path، ما يؤدي إلى تحميل استيراد HTML scenes/boatload/boatload-scene_en.html. يحتوي هذا على عنصر البوليمر والعناصر التابعة له.
  4. يتم عرض أداة التحميل المُسبق المألوفة.
  5. بعد تحميل عملية استيراد HTML وتنفيذها، تتم ترقية <boatload-scene> بشفافية إلى عنصر بوليمر حقيقي مليء بالبهجة بمناسبة الأعياد. 🎄🎉

لهذا النهج تحدياته. على سبيل المثال، لا نريد تضمين مكوّنات ويب مكرّرة. إذا كان هناك مشهدان يستخدمان عنصرًا مشتركًا، على سبيل المثال paper-button، فإننا نزيله كجزء من عملية الإنشاء لدينا وندرجه بدلاً من ذلك في الرمز المشترك لبابا نويل.

تصميم بلا اتصال بالإنترنت

تم تقسيم شاشة سانتا عن كثب إلى مَشاهد بفضل البوليمر وlazy-pages، بالإضافة إلى أنّ كل مشهد له دليل خاص به. لقد صممنا عامل الخدمات في سانتا تراك، وهو القطعة الأساسية التي تتيح وضع عدم الاتصال الذي يعمل على متصفح المستخدم أن يكون على دراية بالرمز المشترك مقابل تمييز "المشهد".

ما النظرية الكامنة وراء عامل الخدمة؟ عندما يُحمِّل مستخدم موقعك الإلكتروني على متصفح متوافق، يمكن أن تطلب لغة HTML للواجهة الأمامية تثبيت مشغّل الخدمات. بالنسبة إلى سانتا تراك، عامل الخدمات يسكن في /sw.js. يؤدي هذا إلى تنشيط حدث install الذي سيخزن مسبقًا كل الرموز البرمجية المشتركة لبابا نويل، لذا لا يلزم جلب أي شيء في وقت التشغيل.

مخطط تدفق جنوب غرب آسيا

عند تثبيت مشغّل الخدمات، يكون قادرًا على اعتراض جميع طلبات HTTP. بالنسبة إلى تتبع سانتا، يبدو تدفق القرار المبسط كما يلي:

  1. هل سبق أن تم تخزين الطلب مؤقتًا؟
    • رائع! عرض الاستجابة المخزنة مؤقتًا
  2. هل يتطابق الطلب مع دليل مشهد، مثل "viewer/boatload/boatload-scene_en.html"؟
    • نفِّذ طلب الشبكة وخزّن النتيجة في ذاكرة التخزين المؤقت قبل إعادتها إلى المستخدم.
  3. وبخلاف ذلك، يمكنك تنفيذ طلب شبكة عادي.

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

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

سنجري العملية مباشرةً

كما ذكرنا، يعمل قزم بابا نويل بجد طوال شهر ديسمبر، وغالبًا ما يتعين عليهم إصدار تحديثات جديدة على مدار الشهر. عند إنشاء إصدار من لعبة سانتا Tracker، يتم منحه تصنيفًا فريدًا، مثل v20161204112055، الطابع الزمني للإصدار (11:20:55 في 4 كانون الأول (ديسمبر) 2016).

بالنسبة إلى هذا الإصدار المصنف، ننشئ تجزئة MD5 لكل ملف ونخزّن ذلك في "بيان ذاكرة التخزين المؤقت". وعلى قرص حديث ذي حالة صلبة، لا يضيف هذا سوى بضع ثوانٍ إلى عملية الإصدار.

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

وننشر أيضًا إصدارًا جديدًا ممّا نطلق عليه موارد "الإنتاج" (وهو رمز HTML لفهرس "سانتا" وعامل التشغيل في خدمة "سانتا"")، ويتواجدان على https://santatracker.google.com/. يؤدي هذا إلى استبدال الإصدار القديم.

مخطط ثابت

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

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

مخطط ذاكرة التخزين المؤقت

في تطبيق سانتا Tracker، تؤدي ترقية مشغّل الخدمات إلى إعادة تحميل متصفّح المستخدم على الفور.

تجربة التصفّح بلا إنترنت

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

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

بلا إنترنت

يرسل تطبيق سانتا Tracker طلبات منتظمة إلى واجهة برمجة التطبيقات الخاصة ببابا نويل. إذا فشلت هذه الطلبات أو انتهت المهلة، نفترض أن المستخدم غير متصل بالإنترنت. نستخدم واجهة برمجة التطبيقات هذه بدلاً من سمة navigator.onLine المضمَّنة في المتصفّح، ما يساعدنا في معرفة ما إذا كان المستخدم متصلاً بالإنترنت أم لا. (يُعرف هذا أيضًا باسم Lie-Fi).

الاتصال الدولي

في حين أن غالبية مستخدمينا بالإنجليزية (تليها اليابانية والبرتغالية والإسبانية والفرنسية)، تم تصميم سانتا وإصداره بأكثر من 35 لغة مختلفة.

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

Language

بعبارة أخرى، الإصدار الحالي من تطبيق سانتا ترافيك لإجراء مشغّل الخدمات هو في الواقع صف من (build,language).

إضافة إلى الشاشة الرئيسية

نظرًا لأن "بابا نويل" يعمل بلا اتصال بالإنترنت ويوفّر مشغّل الخدمات، يُطلب من المستخدمين المؤهَّلين تثبيته على الشاشة الرئيسية لديهم. في عام 2016، تم تحميل حوالي 10% من عمليات التحميل المؤهلة من رمز الشاشة الرئيسية.

الخاتمة

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

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