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

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

ملخّص

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

النتائج

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

الخلفية

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

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

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

تقفّي أثر بابا نويل على جهاز Android
تقفّي أثر بابا نويل على جهاز Android

التحديات

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

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

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

هذه التحديات:

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

...نتائج غير مناسبة لاستراتيجية ساخرة غير مناسبة بلا اتّصال بالإنترنت.

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

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

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

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

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

يعني هذا الأسلوب أنّنا لسنا بحاجة إلى تحميل مواد العرض غير الضرورية للمَشاهد التي لا يراها المستخدم. (وهو الكثير من البيانات). وهذا يعني أيضًا أننا بحاجة إلى الاحتفاظ بـ "بيان ذاكرة التخزين المؤقت" الداخلي لجميع الأصول المطلوبة كل مشهد. بيان ذاكرة التخزين المؤقت هو ملف 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>

يتخذ Santa Tracker الخطوات التالية لتحميل مشهد، على سبيل المثال، 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". بالإضافة إلى كل المشهد له دليله الخاص. لقد صممنا مشغّل الخدمات في Santa Tracker، وهو القطعة الأساسية التي تتيح عدم الاتصال بالإنترنت والتي تعمل على في متصفّح المستخدم، لإدراك الرمز المشترك مقابل "المشهد" التميز.

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

مخطط تدفُّق جنوب غرب

يستطيع "عامل الخدمة"، فور تثبيته، اعتراض جميع طلبات HTTP. بالنسبة لـ Santa Tracker، يبدو تدفق القرار المبسط كما يلي:

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

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

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

سنضيفه مباشرةً

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

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

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

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

مخطّط ثابت

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

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

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

في Santa Tracker، تؤدي ترقية عامل الخدمة إلى إعادة تحميل متصفح المستخدم على الفور.

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

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

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

بلا إنترنت

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

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

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

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

Language

بعبارة أخرى، الإصدار الحالي من Santa Tracker لأغراض تتعلّق بمشغّل الخدمات هي في الواقع صف من (build,language).

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

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

الخاتمة

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

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