התבקשתי לכתוב את הפוסט הזה על עדכון קל יחסית לממשק ה-API של המטמון של קובץ השירות (service worker). לא חשבתי שיש צורך במאמר משלו, אבל לאחר דיון ממושך שהתברר בסופו של דבר במשחק של מספרי נייר, הפסדתי, אז הנה זה.
מוכנים לשמוע על העדכונים בהטמעה של ממשק ה-API של המטמון של קובץ השירות (service worker) ב-Chrome?
אי אפשר לשמוע אותך! שאלתי: האם אתם מוכנים לשמוע על העדכונים בהטמעה של ממשק ה-API של המטמון של קובץ השירות (service worker) ב-Chrome?
(אתם יכולים להמשיך לקרוא רק אם קפצתם מהכיסא וצעקתם "YEAHHH!". בזמן הזה לא חובה להעמיד פנים שאתם מניפים לסו, אבל אנחנו מעודדים אותם.
cache.addAll הגיע ל-Chrome 46
כן. זה נכון. מטמון! אין להוסיף את כל הנקודות! Chrome 46!
בסדר, מלבד הסרקז, זה למעשה עניין גדול למדי, מכיוון ש-cache.addAll הוא החלק האחרון שנותר מהמאגר של 'היסודות הבסיסיים' של המטמון, כלומר אין בו יותר צורך.
כך 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 של המטמון נגיש לחלוטין גם דרך דפים.
Firefox כבר תומך ב-API הזה במהדורה למפתחים, כך שהוא יגיע עם שאר ההטמעה של Service Worker.
אבל רגע, זה לא הכל, בהמשך ייתכנו שיפורים נוספים במטמון...
cache.matchAll מגיע ל-Chrome 47
כך יתקבלו מספר התאמות:
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
ההגדרות שלמעלה יקבלו את כל התוכן ב-mysite-static-v1 שתואם ל-/. המטמון מאפשר לכלול מספר רשומות לכל כתובת URL אם הן ניתנות לשמירה במטמון בנפרד. למשל, אם יש להן כותרות Vary שונות.
Firefox כבר תומך באפשרות הזו במהדורה למפתחים, כך שהיא תגיע עם שאר ההטמעה של Service Worker.
אפשרויות שאילתה במטמון יהיו זמינות ב-Chrome... בקרוב
הנה handler די סטנדרטי לאחזור:
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- התעלמות מהכותרת המשתנה בתגובות שבמטמון
Firefox כבר תומך בזה... בסדר, אתה כבר מכיר את המקדחה. לך לספר לבן קלי כמה הוא טוב בהבאת כל זה ל-Firefox.
אם רוצים לעקוב אחרי ההטמעה של אפשרויות השאילתה במטמון ב-Chrome, אפשר לעבור לכתובת crbug.com/426309.
להתראות בפעם הבאה בפרק מרתק נוסף של "מה שיישמנו בממשק ה-API של המטמון"!