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

כניסה לאתר

סיכום

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

תוצאות

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

רקע

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

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

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

אתגרים

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

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

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

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

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

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

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

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

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

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

כך אנחנו לא צריכים לטעון נכסים מיותרים עבור סצנות שהמשתמש לא רואה (שמדובר בכמות גדולה של נתונים). זה גם אומר שאנחנו צריכים לשמור 'מניפסט מטמון' פנימי מכל הנכסים הנדרשים מכל סצנה. המניפסט של המטמון הוא קובץ 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>

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

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

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

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

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

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

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

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

נפרסם את זה בשידור חי

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סיכום

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

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