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

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

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

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

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

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

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

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

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

מוכן לצפייה אופליין

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

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

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

שימוש ב-API

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

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

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

כדי לבקש מהדפדפן להוריד ולאחסן את הנכסים, צריך להשתמש בשיטות add או addAll. ה-method 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.
• לאחר טעינת הדף הראשון.
• כשהמשתמש מנווט לקטע או למסלול.
• כשהרשת לא פעילה.

אפשר לבקש לשמור קבצים חדשים במטמון ב-thread הראשי או בהקשר של Service Worker.

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

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

מכיוון שאפשר להפסיק את ה-thread של קובץ השירות (service worker) בכל שלב, אפשר לבקש מהדפדפן להמתין להבטחה של addAll כדי להגדיל את ההזדמנות לאחסון כל הנכסים ולשמירה על עקביות באפליקציה. הדוגמה הבאה ממחישה איך לעשות זאת באמצעות השיטה waitUntil של הארגומנט האירוע שהתקבל ב-event listener של 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() כדי שתוצאה אחת תגיע לשיטה waitUntil().

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

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

ניפוי באגים באחסון המטמון

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

משאבים

• אחסון מטמון ב-MDN
• The Cache API: מדריך מהיר
• המתכונים שלי אופליין