服务器改文件,服务人员:如何更新服务器上的文件更改缓存?

本文探讨了Service Worker的缓存策略,重点在于如何缓存静态内容以减少API调用,并处理服务器文件更新后的缓存更新问题。代码示例展示了安装和激活事件的处理,以及如何在fetch事件中结合缓存和网络请求。当服务器文件更改时,需要通过检查版本号或ETag来更新缓存,确保客户端获取最新内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

你使用什么样的缓存策略?我阅读了离线手册,最简单的策略是缓存静态内容,并省略API调用。服务人员:如何更新服务器上的文件更改缓存?

这一战略似乎是这样的:

检查请求是否已在缓存中

如果不加要求,响应对缓存

返回响应

如果在服务器端文件已更改,如何更新缓存?目前客户端总是获得缓存的结果。

这里是我的缓存策略代码:

// You will need this polyfill, at least on Chrome 41 and older.

importScripts("serviceworker-cache-polyfill.js");

var VERSION = 1;

var CACHES = {

common: "common-cache" + VERSION

};

// an array of file locations we want to cache

var filesToCache = [

"font-cache.html",

"script.js",

];

var neededFiles = [

"index.html"

];

var errorResponse = function() {

return new Response([

"

Failed to get file

",

"

Could not retrive response from cache

"

].join("\n"),

500

);

};

var networkFetch = function(request) {

return fetch(request).then(function(response) {

caches.open(CACHES["common"]).then(function(cache) {

return cache.put(request, response);

});

}).catch(function() {

console.error("Network fetch failed");

return errorResponse();

});

}

this.addEventListener("install", function(evt) {

evt.waitUntil(

caches.open(CACHES["common"]).then(function(cache) {

// Cache before

cache.addAll(filesToCache);

return cache.addAll(neededFiles);

})

);

});

this.addEventListener("activate", function(event) {

var expectedCacheNames = Object.keys(CACHES).map(function(key) {

return CACHES[key];

});

console.log("Activate the worker");

// Active worker won"t be treated as activated until promise resolves successfully.

event.waitUntil(

caches.keys().then(function(cacheNames) {

return Promise.all(

cacheNames.map(function(cacheName) {

if (expectedCacheNames.indexOf() ===

-1) {

console.log(

"Deleting out of date cache:",

cacheName);

return caches.delete(cacheName);

}

})

);

})

);

});

self.addEventListener("fetch", function(event) {

console.log("Handling fetch event for", event.request.url);

event.respondWith(

// Opens Cache objects

caches.open(CACHES["common"]).then(function(cache) {

return cache.match(event.request).then(function(

response) {

if (response) {

console.log("Found response in cache", response);

return response;

} else {

return networkFetch(event.request);

}

}).catch(function(error) {

// Handles exceptions that arise from match() or fetch().

console.error(

" Error in fetch handler:",

error);

return errorResponse();

});

})

);

});

+0

服务器发送的事件是什么意思?当页面或资源得到更新时发送事件并更新缓存? –

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值