פקודות 'עשה' ו'עשה' מראש

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

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

מה לעשות: מומלץ לשמור מראש נכסים סטטיים קריטיים

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

• גיליונות סגנונות גלובליים.
• קובצי JavaScript שמספקים פונקציונליות גלובלית.
• HTML של מעטפת האפליקציה, אם זה רלוונטי לארכיטקטורה שלכם.

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

מה לעשות: שמירה מראש של חלופה אופליין לאתרים עם כמה דפים

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

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

import {PrecacheFallbackPlugin, precacheAndRoute} from 'workbox-precaching';
import {registerRoute, Route} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
import * as navigationPreload from 'workbox-navigation-preload';

navigationPreload.enable();

// Ensure that /offline.html is part of your precache manifest!
precacheAndRoute(self.__WB_MANIFEST);

// The network-only callback should match navigation requests, and
// the handler for the route should use the network-only strategy, but
// fall back to a precached offline page in case the user is offline.
const networkOnlyNavigationRoute = new Route(({request}) => {
  return request.mode === 'navigate';
}, new NetworkOnly({
  plugins: [
    new PrecacheFallbackPlugin({
      fallbackURL: '/offline.html'
    })
  ]
}));

registerRoute(networkOnlyNavigationRoute);

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

אולי כן: כדאי להפעיל מראש ספקולטיביות

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

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

אולי לא מומלץ: לשמור מראש את ה-HTML הסטטי

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

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

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

מה לא לעשות: מומלץ לשמור מראש תמונות רספונסיביות או סמלי אתרים

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

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

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

לא מומלץ: לשמור מראש מילויי פוליגונים

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

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

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

סיכום

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

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