什么是离线缓存
离线缓存是指在没有网络连接的情况下，依然可以访问之前加载过的网页或应用内容。比如你在地铁上打开一个新闻网站，虽然进站后信号断了，但页面还能正常浏览，这就是离线缓存的功劳。
对于普通用户来说，开启离线缓存能提升浏览体验，减少重复加载，节省流量。
浏览器中开启离线缓存的常见方式
主流浏览器如Chrome、Edge都默认支持离线缓存功能，但具体行为由网站本身决定。不过我们可以通过设置，让浏览器更积极地保存数据。
Chrome 浏览器设置示例
进入地址栏输入：chrome://settings/siteSettings，回车后找到“内容”部分的“Cookie及其他网站数据”。点击进入后，可以允许特定网站存储数据，确保其缓存不被自动清除。
如果你想让某个网页应用离线可用，比如记事本工具或在线表格，可以将其“添加到桌面”。操作路径是：点击浏览器右上角三个点 → 更多工具 → 创建快捷方式 → 勾选“作为窗口打开”。这样下次没网时也能打开使用。
开发者角度实现离线缓存
如果你自己建网站，想让用户开启离线缓存，需要用 Service Worker 技术。下面是一个简单的注册脚本：
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('ServiceWorker 注册成功，作用域为: ', registration.scope);
}).catch(function(error) {
console.log('ServiceWorker 注册失败: ', error);
});
});
}接着创建 sw.js 文件，定义缓存策略：
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/app.js',
'/images/logo.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
);
});这段代码会在用户首次访问时预存指定资源，之后即使断网也能加载首页等核心内容。
手机端也能用离线缓存
安卓和iOS上的浏览器同样支持PWA（渐进式网页应用）。比如你常看的天气预报网页，如果它支持PWA，可以直接添加到主屏幕。以后打开时就像原生App一样，有网没网都能看最近的数据。
判断一个网站是否支持离线缓存，可以在Chrome里按F12打开开发者工具，切换到“Application”标签页，查看是否有“Service Workers”注册信息。
注意清理策略
缓存不是无限存的，系统会根据磁盘空间自动清理旧数据。如果你发现某个网站突然不能离线用了，可能是缓存被清掉了。可以重新访问一次，让它重新下载资源。
另外，隐私模式下不会保存任何缓存，所以别指望无痕浏览能记住内容。”}