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

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

אפשר להשתמש ב-Cache Storage API בהקשרים שונים:

• הקשר החלון (השרשור הראשי של ה-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);
      });
   );
});

ה-method 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. שם תוכלו לראות את התוכן של כל מטמון במקור הנוכחי. נעסוק בכלים האלה בהרחבה בפרק 'כלים וניפוי באגים'.

משאבים

• אחסון קובצי מטמון ב-MDN
• Cache API: מדריך מהיר
• The Offline Cookbook
• הסבר על מטמון: בדיקה, ניקוי והשבתה של מטמון