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

השלמת השיטות המסורתיות לשליפה מראש (prefetch) עם קובצי שירות (service worker).

דמיאן רנזולי

גילברטו קוקי

ג'ף פוזניק

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

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

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

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

מקרי ייצור

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

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

השימוש בשמירה במטמון של Service Worker יכול לעזור לכם להאריך את משך החיים של משאבים לשליפה מראש (prefetch) מעבר לחלון של חמש דקות.

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

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

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

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

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

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

שמירה מראש במטמון היא היכולת של ה-Service Worker לשמור קבצים במטמון בזמן ההתקנה.

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

במקרים הבאים נעשה שימוש בשמירה מראש במטמון כדי להשיג יעד דומה כמו שליפה מראש (prefetch) – קיצור הניווט צריך להיות מהיר יותר.

טעינה מראש של דפים סטטיים

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

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

שמירת משאבי משנה בדף במטמון

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

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

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

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

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

• הוסף תג <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. הענקת גישה לשליפה מראש (prefetch) ל-Service Worker

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

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

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

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

ניתן ליישם את השליפה מראש (prefetch) עם חלון של תיבת העבודה באופן הבא:

• בדף: קוראים ל-Service Worker ומעביר אותו לסוג ההודעה ולרשימת כתובות ה-URL לשליפה מראש (prefetch):

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

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

• ב-Service Worker: מטמיעים handler של הודעות כדי לשלוח בקשת fetch() לכל כתובת URL לשליפה מראש (prefetch):

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