אחסון המטמון הוא כלי עוצמתי. כך האפליקציות פחות תלויות בתנאי הרשת. שימוש טוב במטמון מאפשר לכם להפוך את אפליקציית האינטרנט לזמינה במצב אופליין ולהציג את הנכסים שלכם במהירות האפשרית בכל תנאי רשת. כפי שצוין בקטע נכסים ונתונים, אתם יכולים להחליט מהי האסטרטגיה המתאימה ביותר לשמירה במטמון של הנכסים הנדרשים. כדי לנהל את המטמון, ה-Service Worker מקיים אינטראקציה עם Cache Storage API.
ממשק ה-API של אחסון המטמון זמין בהקשרים שונים:
- ההקשר של החלון (ה-thread הראשי של ה-PWA).
- קובץ השירות (service worker).
- כל פועל אחר שאתם משתמשים בו.
אחד היתרונות של ניהול המטמון באמצעות Service Workers הוא שמחזור החיים שלו לא קשור לחלון, כך שאתם לא חוסמים את ה-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, וה-method 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.
- לאחר טעינת הדף הראשון.
- כשהמשתמש מנווט לקטע או למסלול.
- כשהרשת לא פעילה.
אתם יכולים לבקש לשמור קבצים חדשים במטמון ב-thread הראשי או בהקשר של ה-Service Worker.
שמירת נכסים במטמון ב-Service Worker
אחד מהתרחישים הנפוצים ביותר הוא לשמור קבוצת נכסים מינימלית כשמתקינים את ה-Service Worker. לשם כך אפשר להשתמש בממשק האחסון של המטמון בתוך האירוע install ב-Service Worker.
אפשר להפסיק את ה-thread של קובץ השירות בכל שלב, ולכן אפשר לבקש מהדפדפן להמתין לסיום ההבטחה של 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() כדי שתוצאה אחת תגיע לשיטה 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).
לפרטים נוספים, עיינו במסמכי התיעוד של אובייקט מטמון.
ניפוי באגים באחסון המטמון
דפדפנים רבים מציעים דרך לנפות באגים בתוכן האחסון של המטמון בתוך כרטיסיית האפליקציה של כלי הפיתוח. שם אפשר לראות את התוכן של כל מטמון במקור הנוכחי. נעסוק בהרחבה על הכלים האלה בפרק 'כלים וניפוי באגים'.
