ExtendableEvent
åºçº¿
广æ³å¯ç¨
èª 2018å¹´4æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
ä½ä¸º service worker çå½å¨æçä¸é¨åï¼ExtendableEvent æ¥å£å»¶é¿äºå¨å
¨å±èå´ä¸ install å activate äºä»¶ççå½å¨æãè¿æ ·å¯ä»¥ç¡®ä¿å¨åçº§æ°æ®åºæ¶æå¹¶å é¤è¿æ¶ç caches ä¹åï¼ä¸ä¼è°åº¦ä»»ä½å½æ°äºä»¶ï¼å¦FetchEventï¼ã妿å¨ExtendableEventå¤çç¨åºä¹å¤è°ç¨waitUntil()ï¼æµè§å¨åºè¯¥æåºä¸ä¸ªInvalidStateErrorï¼è¿è¦æ³¨æï¼å¤ä¸ªè°ç¨å°å 积起æ¥ï¼ç»æ promises å°æ·»å å°extend lifetime promises.
夿³¨ï¼ä¸è¿°æ®µè½ä¸æè¿°çè¡ä¸ºå¨ firefox 43 ä¸å¾å°äºä¿®å¤ï¼åè§ Firefox bug 1180274ï¼ã
æ¤æ¥å£ç»§æ¿èªEventæ¥å£ã
夿³¨ï¼åªæå½å
¨å±èå´æ¯ ServiceWorkerGlobalScope æ¶ï¼æ¤æ¥å£æå¯ç¨ãå½å®æ¯ä¸ä¸ª Window æå
¶ä»ç±»å worker çä½ç¨åæ¶ï¼å®ä¸å¯ç¨ã
æé 彿°
ExtendableEvent()-
å建æ°ç
ExtendableEvent对象ã
ç¹æ§
ä¸å®ç°ä»»ä½ç¹å®å±æ§ï¼ä½ä»å
¶ç¶çº§äºä»¶ç»§æ¿å±ï¼Eventã
æ¹æ³
ä»ä»çç¶è¾ç»§æ¿ï¼Eventã
ExtendableEvent.waitUntil()-
å»¶é¿äºä»¶ççåæãå®å°å¨ service worker ç
installåactivateäºä»¶ä¸è¢«è°ç¨ã
å®ä¾
代ç çæ®µæ¥èªservice worker prefetch sample (æ¥ç prefetch example live.)ã代ç å¨ServiceWorkerGlobalScope.oninstallä¸è°ç¨ExtendableEvent.waitUntil()ï¼å»¶è¿å°ServiceWorkerRegistration.installing Worker è§ä¸ºå·²å®è£
ï¼ç´å°ä¼ éç promise resolve(卿æèµæºé½å·²è¢«æååç¼åçæ
åµï¼æè
åçä»»ä½å¼å¸¸æ¶çé®é¢.)
ä»£ç æ®µè¿æ¾ç¤ºäºå¯¹ service worker 使ç¨çç¼åè¿è¡çæ¬æ§å¶çæä½³å®è·µãè½ç¶å¨è¿ä¸ªä¾åä¸åªæä¸ä¸ªç¼åï¼ä½æ¯ç¸åçæ¹æ³å¯ä»¥ç¨äºå¤ä¸ªç¼åãå®å°ç¼åçéè®°æ è¯ç¬¦æ å°å°ç¹å®çãçæ¬åçç¼ååç§°ã
夿³¨ï¼å¨ chrome ä¸ï¼æ¥å¿è®°å½è¯å¥éè¿ chrome://service worker internals 访é®çç¸å ³æå¡å·¥ä½è çâinspectâæ¥å£å¯è§ã
var CACHE_VERSION = 1;
var CURRENT_CACHES = {
prefetch: "prefetch-cache-v" + CACHE_VERSION,
};
self.addEventListener("install", function (event) {
var urlsToPrefetch = [
"./static/pre_fetched.txt",
"./static/pre_fetched.html",
"https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif",
];
console.log(
"Handling install event. Resources to pre-fetch:",
urlsToPrefetch,
);
event.waitUntil(
caches
.open(CURRENT_CACHES["prefetch"])
.then(function (cache) {
cache
.addAll(
urlsToPrefetch.map(function (urlToPrefetch) {
return new Request(urlToPrefetch, { mode: "no-cors" });
}),
)
.then(function () {
console.log("All resources have been fetched and cached.");
});
})
.catch(function (error) {
console.error("Pre-fetching failed:", error);
}),
);
});
夿³¨ï¼å¨è·åèµæºæ¶ï¼å¦ææå¯è½èµæºæ¯ç±ä¸æ¯æ CORS çæå¡å¨æä¾çï¼é£ä¹ä½¿ç¨ {mode: 'no-cors'} é常éè¦ã卿¬ä¾ä¸ï¼ www.chromium.org 䏿¯æ CORSã
è§è
| è§è |
|---|
| Service Workers Nightly> # extendableevent-interface> |