כלי המעקב אחר סנטה בתור PWA

הצגת האתר

סיכום

Santa Monitor שודרג במהירות ל-Progressive Web App אופליין לקראת עונת החגים של 2016, בין היתר בזכות עיצוב הסצנה הקיים שלנו.

תוצאות

• סנטה הוא אפליקציית אינטרנט מתקדמת (PWA) שתומכת בהוספה למסך הבית (ATHS) ובמצב אופליין
• 10% מהביקורים הכשירים התחילו דרך הסמל של ATHS
• 75% מהמשתמשים תמכו במקור ברכיבים מותאמים אישית וב-DOM של צל, שני חלקים עיקריים ברכיבי אינטרנט
• ציון 81 ב-Lighthouse
• באמצעות Service Worker API במצב אופליין יש טעינה מדורגת.

רקע

Santa Monitor הוא מסורת חג כאן ב-Google. בכל שנה אפשר לחגוג את העונה עם משחקים וחוויות חינוכיות במהלך חודש דצמבר. סנטה יצא להפסקה קצרה, אבל הדגולים משקיעים מאמצים כדי להשיק את סנטה מעקב כקוד פתוח, גם באינטרנט וגם ב-Android.

באינטרנט, סנטה tracker הוא אתר אינטראקטיבי גדול עם 'סצנות' ייחודיות רבות - שנכתבו באמצעות פולימר - התומך ברוב הדפדפנים המודרניים. ההערכה אם הדפדפן של משתמש הוא 'מודרני' נקבעת על ידי זיהוי תכונות: בין היתר, נדרש ל-Santa שימוש ב-Set וב-Web Performance API.

ב-2016, שדרגנו את המנוע שמאחורי סנטה tracker כדי לתמוך בחוויה אופליין ברוב הסצנות. לא כולל סצנות המגובות בסרטוני YouTube או סצנות הנוגעות למיקום החי של סנטה, שכמובן זמין רק כשיש קשר ישיר לקוטב הצפוני! 📶☃️

אתגרים

סנטה משלב עיצוב רספונסיבי שעובד היטב בטלפונים, בטאבלטים ובמחשבים. האתר מלא במולטימדיה מעולה, כולל רכיבים חזותיים מסוגננים ואודיו שמתאים לחגים. אבל, גרסה רגילה של סנטה מעקב היא כמה מאות מגה-בייט! יכולות להיות לכך כמה סיבות:

• סנטה נתמך ביותר מ-35 שפות, לכן נכסים רבים צריכים להיות משוכפלים.
• לפלטפורמות שונות יש תמיכה שונה במדיה (למשל, mp3 לעומת ogg).
• לפעמים יש קובצי מולטימדיה בגדלים וברזולוציות שונים.

השדונים של סנטה עובדים קשה גם במהלך דצמבר, ולרוב מפרסמים עדכונים קריטיים חדשים במהלך החודש. כלומר, יכול להיות שיהיה צורך לרענן נכסים שכבר נשמרו במטמון על ידי הדפדפן של המשתמש בביקורים חוזרים.

האתגרים האלה:

• משאבי מולטימדיה גדולים לסצנות שונות
• שינויים שפורסמו במהלך החודש

...וגורמות לאי-התאמה של אסטרטגיית אופליין נאיבית.

סנטה קלאוס, בנוי מפולימר

כדאי לחזור אחורה ולדבר על העיצוב הכולל של סנטה לפני שמתחילים בגרסה שבה שדרגנו אותו ל-PWA אופליין.

סנטה הוא אפליקציה בעלת דף יחיד, שנכתבה במקור ב-Polymer 0.5 ועכשיו שודרגה ל-Polymer 1.7. סנטה מורכב מקבוצת קוד משותפת – הנתב, נכסי ניווט משותפים וכו'. יש בו גם הרבה 'סצנות' ייחודיות.

אפשר לגשת לכל סצינה דרך כתובת URL שונה – /village.html, /codelab.html ו-/boatload.html – והיא רכיב אינטרנט משלה. כשמשתמש פותח סצנה, אנחנו טוענים מראש את כל ה-HTML והנכסים (תמונות, אודיו, css, js) ו-js, שקיימים ב-/scenes/[[sceneName]] במאגר של Sant Monitor. תוך כדי התהליך, המשתמשים יראו טוען מראש ידידותי שמראה את ההתקדמות.

המשמעות של גישה זו היא שאנחנו לא צריכים לטעון נכסים מיותרים עבור סצנות שהמשתמש לא רואה (מיותרות נתונים). המשמעות היא גם שאנחנו צריכים לשמור 'מניפסט מטמון' פנימי של כל הנכסים שנדרשים לכל סצינה. מניפסט המטמון הוא קובץ JSON שמאחסן מיפוי משם הקובץ אל גיבוב MD5 של התוכן שלו.

טעינת הפריטים שמשתמשים

המודל הזה חוסך ברוחב הפס ומשרת רק את המשאבים הנדרשים לסצנות שבהם משתמש מבקר, במקום לטעון מראש את כל האתר בבת אחת. ב-Santa tracker מנצלים את היכולת של Polymer לשדרג רכיבים מותאמים אישית בזמן הריצה, במקום בזמן הטעינה. כדאי להביא בחשבון את קטע הקוד הבא:

<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, אנחנו מסירים אותו כחלק מתהליך ה-build ובמקום זאת כוללים אותו בקוד המשותף של סנטה.

עיצוב במצב אופליין

סנטה מעקב כבר מפולח לסצנות בצורה מסודרת הודות ל-Polymer ול-lazy-pages, וגם לכל סצינה יש ספרייה משלה. תכננו את קובץ השירות (service worker) של סנטה מעקב, החלק העיקרי שמאפשר הפעלה במצב אופליין בדפדפן של משתמש, כך שתהיה מודע לקוד המשותף להבחנה 'סצנה'.

מהי התיאוריה שמאחורי קובץ השירות (Service Worker)? כשמשתמש בדפדפן נתמך טוען את האתר שלכם, קוד ה-HTML של הקצה יכול לבקש התקנה של Service Worker. ב-Santa tracker, ה-service worker נמצא בכתובת /sw.js. הפעולה הזו מפעילה אירוע install שישמור מראש את כל הקוד המשותף של סנטה, כך שלא צריך לאחזר שום דבר בזמן הריצה.

לאחר התקנתו, Service Worker יכול ליירט את כל בקשות ה-HTTP. ב-Santa Monitor, תהליך ההחלטות הפשוט נראה כך:

1. האם הבקשה כבר שמורה במטמון?
   • נהדר! החזרת התגובה שנשמרה במטמון.
2. האם הבקשה תואמת לספריית סצינות, כמו "scene/boatload/boatload-scene_en.html"?
   • לבצע בקשת רשת ולאחסן את התוצאה במטמון לפני החזרתה למשתמש.
3. אם לא, יש לשלוח בקשת רשת רגילה.

התהליך שלנו ואירוע install מאפשרים ל-Santa tracker להיטען, גם כאשר המשתמש במצב אופליין. עם זאת, רק הסצנות שמשתמש טען בעבר יהיו זמינות. משחק מעולה אם אתם רוצים לשחק שוב ולשבור את השיא.

צופים נלהבים עשויים לשים לב שאסטרטגיית השמירה במטמון שלנו לא מאפשרת שינויים בתוכן. לאחר שקובץ שמור בדפדפן של משתמש, הוא לעולם לא ישתנה. נרחיב בנושא מאוחר יותר.

נעשה את זה בזמן אמת

כפי שהזכרנו, השדונים של סנטה עובדים במרץ לאורך דצמבר, ולרוב הם צריכים לפרסם עדכונים חדשים במהלך החודש. כאשר נוצרת גרסה של סנטה מעקב, היא מקבלת תווית ייחודית, למשל, v20161204112055, חותמת הזמן של הגרסה (11:20:55 ב-4 בדצמבר 2016).

בגרסה הזו, אנחנו יוצרים גיבוב MD5 לכל קובץ ומאחסנים אותו ב 'מניפסט המטמון'. בדיסק SSD מודרני, הפעולה הזו מוסיפה רק כמה שניות לתהליך ה-build.

כל גרסה נפרסת בנתיב ייחודי בשרת המטמון הסטטי של Google. כלומר, גרסאות ישנות יותר לעולם לא יוסרו. המשמעות היא שאחרי מהדורה חדשה, לכל הנכסים תהיה כתובת URL שונה — גם אם הם לא השתנו — וכל קובץ ששמור במטמון של הדפדפן או של ה-Service Worker לא יהיה שימושי, אלא אם נבצע עבודה נוספת.

אנחנו פורסים גם גרסה חדשה של מה שאנחנו מכנים משאבי "prod" - ה-HTML של האינדקס ו-Service Worker של סנטה, שזמינים בכתובת https://santatracker.google.com/. הגרסה הזו תחליף את הגרסה הישנה.

בכל פעם ש-Santa Monitor נטען, הדפדפן יבדוק אם יש קובץ שירות (service worker) מעודכן ויאחזר אותו, אם הוא זמין. במקרה שלנו, כל גרסה יוצרת קוד ששונה מבייטים. הדפדפן רואה את זה כשדרוג ומבצע אירוע install חדש.

בשלב הזה, הדפדפנים של משתמש יבדקו את 'מניפסט המטמון' החדש. המערכת תשווה בין הנתונים האלה לבין המטמון הקיים של המשתמש. אם לנכסים יש גיבוב MD5 שונה, אנחנו נמחק אותם מהמטמון ונבקש מהדפדפן לאחזר אותו מחדש. עם זאת, ברוב המקרים התוכן שנשמר במטמון זהה במידה רבה או שיש בו הבדלים קלים בלבד.

ב-Santa tracker, שדרוג ה-Service Worker גורם לדפדפן של המשתמש להיטען מחדש באופן מיידי.

חוויית הגלישה במצב אופליין

כמובן שנאלצנו גם לבצע כמה שינויים בממשק המשתמש כדי לספק חוויה אופליין, וכדי לספק למשתמשים שלא היו מצפים שאתר יוכל לעבוד במצב אופליין, יהיה להם קל יותר להבין את זה.

מודעת באנר קטנה מציינת כשגולשים במצב אופליין. כל הסצנות שלא נשמרות במטמון "קפואות" ולא ניתן ללחוץ עליהן. כך, המשתמשים לא יכולים לגשת לתוכן שלא זמין.

סנטה tracker שולח בקשות רגילות ל-API של סנטה. אם הבקשות האלה נכשלות או שפג הזמן הקצוב לתפוגה, אנחנו מניחים שהמשתמש לא מחובר לאינטרנט. אנחנו משתמשים ב-API הזה במקום במאפיין navigator.onLine המובנה של הדפדפן: זה רק מאפשר לנו לדעת אם המשתמש אולי מחובר לאינטרנט. (מוכר גם בשם Lie-Fi).

הקשר הבינלאומי

למרות שרוב המשתמשים שלנו הם באנגלית (ואחרונה מופיעות יפנית, פורטוגזית, ספרדית וצרפתית), סנטה קלאוס בבנייה והשקה של יותר מ-35 שפות שונות.

כשמשתמש טוען את סנטה מעקב, אנחנו משתמשים בשפת הדפדפן וברמזים אחרים כדי לבחור את השפה שתוצג. רוב המשתמשים אף פעם לא מחליפים את השפה הזו. עם זאת, אם משתמש בוחר שפה חדשה דרך הבורר, אנחנו מתייחסים לכך כאילו יש שדרוג זמין – בדיוק כמו במקרה שלמעלה, כאשר יש גרסה חדשה של סנטה מעקב.

במילים אחרות, הגרסה הנוכחית של סנטה מעקב למטרות של קובץ השירות (service worker) היא למעשה שילוב של (build,language).

הוספה למסך הבית

סנטה עובד במצב אופליין ומספק קובץ שירות (service worker), כך שמשתמשים שעומדים בדרישות מתבקשים להתקין אותו במסך הבית שלהם. בשנת 2016, כ-10% מהטעינות הכשירות הגיעו מסמל מסך הבית.

סיכום

הודות לעיצוב הסצנה הקיים, שמקל על השימוש הנוכחי בפולימר וברכיבי אינטרנט, הצלחנו להמיר במהירות את סנטה מעקב ל-PWA אופליין, שמאפשרת חוויה אמינה ומרתקת. הוא גם ממנף את מערכת ה-build שלנו כדי לבצע שדרוגים יעילים, תוך ביטול התוקף של נכסים שהשתנו בלבד.

למרות שסנטה הוא ברובו פתרון שנוצר בהתאמה אישית, תוכלו למצוא את רבים מהעקרונות שלו בארגז הכלים לאפליקציות של פרויקט Polymer. מומלץ לבדוק אם אתם מפתחים PWA חדשה מאפס. אם אתם רוצים גישה שלא תלוית ב-framework, כדאי לנסות את ספריית ארגזי העבודה.