הופך לקובץ שמור

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

תמיכה בדפדפנים

  • Chrome: 43.
  • Edge:‏ 16.
  • Firefox: 41.
  • Safari: 11.1.

מקור

ממשק ה-API של Cache Storage זמין מהקשרים שונים:

  • הקשר החלון (השרשור הראשי של ה-PWA).
  • קובץ השירות (service worker).
  • כל עובדים אחרים שבהם אתם משתמשים.

אחד היתרונות של ניהול המטמון באמצעות שירותי עובדים הוא שמחזור החיים שלו לא קשור לחלון, כלומר אתם לא חוסמים את ה-thread הראשי. חשוב לזכור: כדי להשתמש ב-Cache Storage API, רוב ההקשרים האלה צריכים להיות מחוברים באמצעות TLS.

מה כדאי לשמור במטמון

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

המשאבים האלה צריכים לכלול:

  • קוד ה-HTML של הדף הראשי (start_url של האפליקציה).
  • גיליונות סגנונות CSS שנדרשים לממשק המשתמש הראשי.
  • תמונות שנעשה בהן שימוש בממשק המשתמש.
  • קובצי JavaScript שנדרשים לעיבוד (רנדור) של ממשק המשתמש.
  • נתונים, כמו קובץ JSON, הנדרשים לעיבוד חוויה בסיסית.
  • גופנים לאינטרנט.
  • באפליקציה עם כמה דפים, מסמכי HTML אחרים שרוצים להציג במהירות או במצב אופליין.

מוכן לשימוש במצב אופליין

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

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

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

שימוש ב-API

משתמשים ב-Cache Storage API כדי להגדיר קבוצה של מטמון במקור המקור, כשלכל מחרוזת יש שם שניתן להגדיר במחרוזת. גישה ל-API דרך האובייקט caches, והשיטה open מאפשרת ליצור או לפתוח מטמון שכבר נוצר. השיטה open מחזירה הבטחה לאובייקט המטמון.

caches.open("pwa-assets")
.then(cache => {
  // you can download and store, delete or update resources with cache arguments
});

הורדה ואחסון של נכסים

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

caches.open("pwa-assets")
.then(cache => {
  cache.add("styles.css"); // it stores only one resource
  cache.addAll(["styles.css", "app.js"]); // it stores two resources
});

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

מתי כדאי לשמור במטמון

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

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

  • בהתקנה של ה-service worker.
  • לאחר טעינת הדף הראשון.
  • כשהמשתמש מנווט לקטע או למסלול.
  • כשהרשת לא פעילה.

אפשר לבקש שמטמון יאוחסן קבצים חדשים בשרשור הראשי או בהקשר של ה-service worker.

שמירת נכסים במטמון ב-Service Worker

אחד מהתרחישים הנפוצים ביותר הוא לשמור במטמון קבוצה מינימלית של נכסים כש-Service Worker מותקן. כדי לעשות זאת, אפשר להשתמש בממשק האחסון של המטמון באירוע install ב-service worker.

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

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
   event.waitUntil(
      caches.open("pwa-assets")
      .then(cache => {
         return cache.addAll(urlsToCache);
      });
   );
});

השיטה waitUntil() מקבלת הבטחה ומבקשת מהדפדפן להמתין למשימה שהובטחה כדי לפתור (מילוי או נכשל) לפני סיום התהליך של קובץ השירות (service worker). יכול להיות שתצטרכו לשרשר הבטחות ולהחזיר את הקריאות ל-add() או ל-addAll() כדי שתוצאה אחת תגיע ל-method‏ waitUntil().

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

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
   let cacheUrls = async () => {
      const cache = await caches.open("pwa-assets");
      return cache.addAll(urlsToCache);
   };
   event.waitUntil(cacheUrls());
});

בקשות חוצות-דומיינים ותגובות לא שקופות

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

הנכס יישמר כתגובה אטומה, כלומר הקוד לא יוכל לראות או לשנות את התוכן או הכותרות של התגובה הזו. בנוסף, התשובות האטומות לא חושפות את הגודל בפועל שלהן ב-storage API, וכך משפיעות על המכסות. דפדפנים מסוימים חושפים גדלים גדולים, כמו 7MB, גם אם הקובץ הוא רק 1KB.

עדכון ומחיקה של נכסים

אפשר לעדכן נכסים באמצעות cache.put(request, response) ולמחוק נכסים באמצעות delete(request).

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

ניפוי באגים של אחסון קובצי מטמון

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

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

משאבים