有没有一种方法可以在不下载资源的情况下检查浏览器是否缓存了资源?大部分问题和答案都比较老旧,我相信现在情况已经有所改变了,可能存在更好的方式。
有没有一种方法可以在不下载资源的情况下检查浏览器是否缓存了资源?大部分问题和答案都比较老旧,我相信现在情况已经有所改变了,可能存在更好的方式。
fetch
API 及其对应的 AbortController
来实现这个功能并保留一定的误差(预期错误负数)。fetch
获取该资源,并设置一个短暂的超时时间,例如4ms。如果在规定的时间内获取到了资源,则说明它被完全缓存了。如果获取被中止,则可能未被缓存。以下是一些示例代码: async checkImageCached(url, waitTimeMs = 4) {
const ac = new AbortController()
const cachePromise = fetch(url, {signal: ac.signal})
.then(() => true)
.catch(() => false)
setTimeout(() => ac.abort(), waitTimeMs)
return cachePromise
}
目前只支持Firefox浏览器,不过另一个选项是使用only-if-cached,虽然它只适用于同源请求(因为它需要mode:'same-origin'
):
fetch(urlOnSameOrigin, { mode: 'same-origin', cache: 'only-if-cached'})
.then((response) => {
if (response.ok) {
console.log('Cached');
} else if (response.status === 504) {
console.log('Not cached');
}
})
.catch(() => {
console.log('Network error');
});
only-if-cached — 浏览器在其HTTP缓存中查找匹配的请求。
如果有匹配(新鲜或陈旧),则它将从缓存中返回。
如果没有匹配,则浏览器将响应504网关超时状态。