חוויות ניווט מיידי

שילוב של שיטות טעינה מראש מסורתיות עם שירותי עובדים.

Demián Renzulli

Gilberto Cocchi

Jeff Posnick

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

מבחינה טכנית, מעבר בין דפים שונים כרוך בשליחת בקשת ניווט. באופן כללי, לא כדאי להשתמש בכותרות Cache-Control לטווח ארוך כדי לשמור במטמון את תגובת ה-HTML לבקשת ניווט. לרוב, הם אמורים להיות מרוצים דרך הרשת, עם Cache-Control: no-cache, כדי להבטיח שה-HTML, יחד עם שרשרת בקשות הרשת הבאות, עדכניות (באופן סביר). לצערנו, אם המשתמש עובר לדף חדש בכל פעם שהוא עובר לדף חדש, הוא עלול לפעול באיטיות, לכל הפחות, המשמעות היא שהוא לא יהיה מהיר מהימן.

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

במדריך הזה נבחן דרכים שונות שבהן אפשר להשתמש בקובצי שירות (service worker) כהשלמה לשיטות מסורתיות לשליפה מראש.

בקשות תמיכה בסביבת ייצור

MercadoLibre הוא אתר המסחר האלקטרוני הגדול ביותר באמריקה הלטינית. כדי לזרז את הניווט, הן מחדירות תגי <link rel="prefetch"> באופן דינמי בחלקים מסוימים של התהליך. לדוגמה, בדפי רשימה, הם מאחזרים את דף התוצאות הבא ברגע שהמשתמש גולל לתחתית הרישום:

קבצים שנשלפו מראש מבקשים בעדיפות 'הנמוכה ביותר' ומאוחסנים במטמון HTTP או במטמון הזיכרון (בהתאם לסוג המשאב: אפשר לשמור אותו במטמון או לא), למשך פרק זמן שמשתנה בין דפדפנים. לדוגמה, החל מגרסה 85 של Chrome, הערך הזה הוא 5 דקות. המשאבים נשמרים למשך חמש דקות, ולאחר מכן חלים עליהם כללי Cache-Control הרגילים של המשאב.

שימוש במטמון של שירות עובד (service worker) יכול לעזור לכם להאריך את משך החיים של משאבי טעינה מראש מעבר לחלון של חמש הדקות.

לדוגמה, פורטל הספורט האיטלקי Virgilio Sport משתמש בשירותי עובדים כדי לבצע אחסון מראש של הפוסטים הפופולריים ביותר בדף הבית שלו. הם גם משתמשים ב-Network Information API כדי להימנע מאיסוף נתונים מראש למשתמשים שמחוברים לרשת 2G.

כתוצאה מכך, במהלך 3 שבועות של מעקב, ב-Virgilio Sport ראו שיפור של 78% בזמני הטעינה של הניווט למאמרים, ומספר החשיפות של המאמרים עלה ב-45%.

הטמעת שמירה מראש במטמון באמצעות Workbox

בקטע הבא נשתמש ב-Workbox כדי להראות איך ליישם שיטות שונות של שמירת נתונים במטמון ב-service worker, שאפשר להשתמש בהן כתוספת ל-<link rel="prefetch"> או אפילו כתחליף לו, על ידי הענקת הגישה למשימה הזו לחלוטין ל-service worker.

1. שמירת דפים סטטיים ומשאבי משנה של דפים במטמון מראש

אחסון במטמון מראש הוא היכולת של ה-service worker לשמור קבצים במטמון בזמן ההתקנה.

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

אחסון דפים סטטיים במטמון מראש

בדפים שנוצרים בזמן build (למשל, about.html, contact.html), או באתרים סטטיים לחלוטין, אפשר פשוט להוסיף את מסמכי האתר לרשימה השמורה מראש, כך שהם כבר יהיו זמינים במטמון בכל פעם שהמשתמש ניגש אליהם:

workbox.precaching.precacheAndRoute([
  {url: '/about.html', revision: 'abcd1234'},
  // ... other entries ...
]);

אחסון במטמון מראש של משאבי משנה של דפים

אחסון מראש של נכסים סטטיים שעשויים לשמש את הקטעים השונים באתר (למשל, JavaScript,‏ CSS וכו') הוא שיטה מומלצת באופן כללי, והוא יכול לשפר את התוצאות בתרחישים של אחסון מראש.

כדי לזרז את הניווט באתר מסחר אלקטרוני, אפשר להשתמש בתגים <link rel="prefetch"> בדפי כרטיסי מוצר כדי לבצע אחסון מראש של דפי פרטי המוצר של המוצרים הראשונים בדף כרטיסי המוצר. אם כבר שמרתם במטמון מראש את משאבי המשנה של דף המוצר, הניווט יכול להיות מהיר עוד יותר.

כדי להטמיע את זה:

• מוסיפים לדף תג <link rel="prefetch">:

 <link rel="prefetch" href="/phones/smartphone-5x.html" as="document">

• מוסיפים את משאבי המשנה של הדף לרשימת האחסון המוקדם ב-service worker:

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  // ... other entries ...
]);

2. הארכת משך החיים של משאבי prefetch

כפי שצוין קודם, <link rel="prefetch"> מאחזר ושומר משאבים במטמון ה-HTTP למשך פרק זמן מוגבל. בסיום התקופה הזו יחולו כללי Cache-Control למשאב מסוים. החל מגרסה 85 של Chrome, הערך הזה הוא 5 דקות.

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

בדוגמה הקודמת, אפשר להשלים את <link rel="prefetch"> שמשמש לאחזור מראש של דף מוצר באמצעות אסטרטגיית אחסון במטמון בסביבת זמן הריצה של Workbox.

כדי ליישם את זה:

• מוסיפים תג <link rel="prefetch"> לדף:

 <link rel="prefetch" href="/phones/smartphone-5x.html" as="document">

• כדאי להטמיע אסטרטגיית שמירת מטמון בסביבת זמן הריצה ב-service worker עבור סוגי הבקשות הבאים:

new workbox.strategies.StaleWhileRevalidate({
  cacheName: 'document-cache',
  plugins: [
    new workbox.expiration.Plugin({
      maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
    }),
  ],
});

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

3. הענקת גישה לטעינה מראש ל-service worker

ברוב המקרים, הגישה הטובה ביותר היא להשתמש ב-<link rel="prefetch">. התג הוא הצעה למשאב שנועדה לשפר את היעילות של האחזור מראש.

עם זאת, במקרים מסוימים עדיף להעביר את המשימה הזו לטיפול מלא של ה-service worker. לדוגמה: כדי לבצע אחסון מראש של המוצרים הראשונים בדף של כרטיסי המוצרים שעבר עיבוד בצד הלקוח, יכול להיות שיהיה צורך להחדיר כמה תגי <link rel="prefetch"> באופן דינמי בדף, על סמך תגובה מ-API. הפעולה הזו עלולה לצרוך זמן באופן זמני בשרשור הראשי של הדף ולהקשות על ההטמעה.

במקרים כאלה, כדאי להשתמש ב'אסטרטגיית תקשורת מדף ל-Service Worker' כדי להאציל את המשימה של שליפה מראש (prefetch) באופן מלא ל-Service Worker. אפשר לבצע את סוג התקשורת הזה באמצעות worker.postMessage()‎:

חבילת Workbox Window מפשטת את סוג התקשורת הזה, ומציגה בצורה מופשטת פרטים רבים של הקריאה הבסיסית שמתבצעת.

אפשר להטמיע אחסון נתונים לפני האחזור באמצעות Workbox Window באופן הבא:

• בדף: קוראים לקובץ השירות ומעבירים לו את סוג ההודעה ואת רשימת כתובות ה-URL שרוצים לאחזר מראש:

const wb = new Workbox('/sw.js');
wb.register();

const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});

• בקובץ ה-service worker: מטמיעים בורר הודעות כדי להנפיק בקשה מסוג fetch() לכל כתובת URL שרוצים לבצע לה אחסון מקדים:

addEventListener('message', (event) => {
  if (event.data.type === 'PREFETCH_URLS') {
    // Fetch URLs and store them in the cache
  }
});