התבקשתי לכתוב את הפוסט הזה על עדכון קטן למדי לממשק ה-API של מטמון ה-service worker. לא חשבתי שזה מצדיק מאמר משלו, אבל אחרי דיון ארוך שהסתיים במשחק של אבן-נייר-מספריים, הפסדתי, אז הנה הוא.
מוכנים לשמוע על העדכונים בהטמעה של Chrome לממשק ה-API של מטמון ה-Service Worker?
לא שומעים אותך! רציתי לשאול, רוצה לשמוע על העדכונים בהטמעה של Chrome לממשק ה-API של מטמון ה-Service Worker?
(אפשר להמשיך לקרוא רק אם קפצתם על הכיסא וצעקתם "YEAHHH!". אפשר גם לדמיין שאתם מעיפים לולאה, אבל לא חובה).
cache.addAll נוסף ל-Chrome בגרסה 46
כן! זה נכון. מטמון! נקודה הוספת הכול! Chrome 46!
בסדר, בסדר, בלי ציניות, זה בעצם די משמעותי, כי cache.addAll הוא החלק האחרון שנותר מה-polyfill של 'הדברים הבסיסיים' של המטמון, כלומר הוא כבר לא נדרש.
כך פועלת cache.addAll:
// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
// wait until the following promise resolves
event.waitUntil(
// open/create a cache named 'mysite-static-v1'
caches.open('mysite-static-v1').then(function(cache) {
// fetch and add this stuff to it
return cache.addAll([
'/',
'/css/styles.css',
'/js/script.js',
'/imgs/cat-falls-over.gif'
]);
})
);
});
הפונקציה addAll מקבלת מערך של כתובות URL ובקשות, מאחזרת אותן ומוסיפה אותן למטמון. זוהי עסקה – אם אחת מהפעולות של אחזור או כתיבת תיכשל, כל הפעולה תיכשל והמטמון יחזור למצב הקודם. האפשרות הזו שימושית במיוחד לפעולות התקנה כמו זו שלמעלה, שבהן כשל יחיד צריך להיחשב ככישל כולל.
הדוגמה שלמעלה היא בתוך קובץ שירות (service worker), אבל אפשר לגשת ל-API של המטמון גם מדפים.
כבר יש תמיכה ב-API הזה ב-Firefox במהדורת הפיתוח, כך שהוא יושק עם שאר ההטמעה של שירות העבודה.
אבל רגע, זה לא הכל, יש עוד שיפורים במטמון בדרך…
הפונקציה cache.matchAll תגיע ל-Chrome 47
כך תוכלו לקבל כמה התאמות:
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
הפקודה הזו תציג את כל מה שתואם ל-/ ב-mysite-static-v1. המטמון מאפשר לכם לשמור כמה רשומות לכל כתובת URL אם אפשר לשמור אותן בנפרד במטמון, למשל אם הן כוללות כותרות Vary שונות.
כבר יש תמיכה ב-Firefox במהדורת המפתחים, כך שהיא תגיע עם שאר ההטמעה של שירות העבודה.
בקרוב תהיה אפשרות להשתמש באפשרויות של שאילתות מטמון ב-Chrome
לפניכם טיפול אחזור סטנדרטי למדי:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
אם / נשמר במטמון ונקבל בקשה ל-/, הוא יוצג מהמטמון. עם זאת, אם נקבל בקשה ל-/?utm_source=blahblahwhatever, היא לא תגיע מהמטמון. כדי לעקוף את הבעיה הזו, אפשר להתעלם ממחרושת החיפוש של כתובת ה-URL במהלך ההתאמה:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {
ignoreSearch: true
}).then(function(response) {
return response || fetch(event.request);
})
);
});
עכשיו /?utm_source=blahblahwhatever יתאים לרשומה של /! האפשרויות המלאות הן:
ignoreSearch– התעלמות מחלק החיפוש של כתובת ה-URL גם בארגומנטים של הבקשה וגם בבקשות שנשמרו במטמוןignoreMethod– התעלמות מהשיטה של ארגומנט הבקשה, כך שבקשת POST יכולה להתאים לרשומה של GET במטמוןignoreVary– התעלמות מכותרת ה-vary בתגובות שנשמרו במטמון
כבר יש תמיכה ב-Firefox ב… אוקיי, כבר הבנתם את העניין. כדאי לומר לבן קלעי כמה הוא מעולה על כך שהוסיף את כל התכונות האלה ל-Firefox.
כדי לעקוב אחרי ההטמעה של Chrome של אפשרויות השאילתה במטמון, אפשר להיכנס לכתובת crbug.com/426309.
בפרק הבא נמשיך לספר לכם על מה שהטמענו ב-Cache API.