地铁断网应用秒崩如何用HTML5离线缓存解决附缓存不生效和更新失效常见问题排查

你有没有过这样的经历？早上挤地铁的时候，刷着某个APP，突然信号格变成了空白的样子，然后页面直接白屏或者报错了。那种感觉就像走进了一间没开灯的屋子，伸手不见五指，心里那种慌乱真的不好受。

我理解那种体验。但你知道吗？其实有一个叫 HTML5 离线缓存 的技术，能帮你把应用”装进口袋”，就算地铁钻进地底下彻底没信号，也能照样用。今天我就把这个技术掰开揉碎了讲清楚，让你和身边的朋友都能听懂。

先搞清楚：为什么一断网就崩

在讲解决方案之前，我们得先搞清楚问题出在哪里。很多Web应用之所以在断网时秒崩，是因为它们的设计哲学有一个隐形的前提——“我默认你随时有网”。

想象一下，你开了一家外卖店。如果外卖员（也就是网络请求）突然不来了，你的店还能做生意吗？大多数应用的答案是”不能”，因为它们的菜单、数据、甚至基础页面，全都在服务器上。没有网络，就等于没有菜单，店等于没开。

具体来说，断网时应用崩溃通常有这几个”杀手”：

核心HTML文件加载失败：应用的主入口页面根本下不来
CSS/JS依赖全部失效：样式和脚本都没了，页面结构撑不起来
API数据请求中断：动态内容是靠接口拉的，接口断了就全是空白
资源路径硬编码：所有文件都指向外部CDN或服务器，没有本地副本

好消息是，HTML5早就为这个问题准备了一套解决方案——AppCache（Application Cache），以及更新的Service Worker。我们今天就把这两个方案都讲透。

HTML5离线缓存的核心原理

AppCache的核心理念其实很简单：提前把东西存起来，用完了再拿，不需要每次都去服务器。

你可以把它想象成一个”随身小书包”。你每天早上上学前，把今天会用到的课本、作业、水壶都装进书包里。这样就算到了学校发现学校关门了（没网了），你照样能用书包里的东西把学习完成。

在技术上，AppCache通过一个manifest文件（Manifest File）来管理这个”书包”里的东西。这个文件就像一个清单，告诉浏览器：”这些文件，请帮我存起来。”

下面是一个最简单的manifest文件示例：

CACHE MANIFEST
# version 1.0 - 2024-01-15

# 需要缓存的核心文件
CACHE:
index.html
css/app.css
js/app.js
images/logo.png

# 需要在线访问的文件（不缓存）
NETWORK:
*

# 网络不可用时的备用页面
FALLBACK:
/ /offline.html

解释一下这个清单：

CACHE MANIFEST 是声明，告诉浏览器这是一个离线缓存清单
CACHE: 下面列的文件，会被浏览器主动下载并缓存
NETWORK: 下面列的，是要求必须在线才能访问的资源（* 表示所有其他资源都要求在线）
FALLBACK: 是备用方案——当某个路径下的文件无法访问时，用后面的文件替代

当浏览器遇到这个manifest文件时，它会按照清单把文件全部下载并存到本地。之后用户再访问，即使完全没网，浏览器也会优先用本地缓存。

Service Worker：更强大的现代方案

虽然AppCache是HTML5的标准，但它有一些历史缺陷（后面会讲），所以现在业界更推荐用 Service Worker 来实现离线能力。Service Worker是一个运行在浏览器后台的脚本，它可以拦截网络请求，自己决定”这个请求我去本地找还是去网络找”。

它的工作原理有点像快递站的智能分拣员。你买东西（发起请求），分拣员（Service Worker）先检查一下：”哦，这个包裹以前存过了，直接给你，不用联系了。”或者”这个没存过，那我帮你去仓库拿一下。”

下面是一个完整的Service Worker离线缓存示例：

// sw.js - Service Worker脚本

const CACHE_NAME = 'my-app-v1';
const URLsToCache = [
  '/',
  '/index.html',
  '/css/app.css',
  '/js/app.js',
  '/images/logo.png',
  '/api/initial-data.json'
];

// 安装阶段：预缓存核心资源
self.addEventListener('install', event => {
  console.log('[Service Worker] 安装开始，开始预缓存资源...');
  
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('[Service Worker] 正在缓存文件:', URLsToCache);
        return cache.addAll(URLsToCache);
      })
      .then(() => {
        console.log('[Service Worker] 预缓存完成');
        return self.skipWaiting();
      })
  );
});

// 激活阶段：清理旧缓存
self.addEventListener('activate', event => {
  console.log('[Service Worker] 激活开始');
  
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames
          .filter(name => name !== CACHE_NAME)
          .map(name => {
            console.log('[Service Worker] 删除旧缓存:', name);
            return caches.delete(name);
          })
      );
    }).then(() => {
      console.log('[Service Worker] 清理完成，激活成功');
      return self.clients.claim();
    })
  );
});

// 拦截请求：优先用缓存，缓存没有再去网络
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        // 命中缓存，直接返回
        if (cachedResponse) {
          console.log('[Service Worker] 命中缓存:', event.request.url);
          return cachedResponse;
        }
        
        // 没有命中缓存，去网络获取
        console.log('[Service Worker] 缓存未命中，从网络获取:', event.request.url);
        return fetch(event.request)
          .then(networkResponse => {
            // 检查是否是合法响应
            if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
              return networkResponse;
            }
            
            // 克隆响应（因为流只能用一次）
            const responseClone = networkResponse.clone();
            
            // 打开缓存，存入新资源
            caches.open(CACHE_NAME)
              .then(cache => {
                cache.put(event.request, responseClone);
              });
            
            return networkResponse;
          })
          .catch(() => {
            // 网络也获取失败，返回离线备用页
            console.log('[Service Worker] 网络请求失败，返回离线页面');
            return caches.match('/offline.html');
          });
      })
  );
});

然后在你的HTML页面中注册这个Service Worker：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的离线应用</title>
</head>
<body>
  <h1>即使没网也能用！</h1>
  <p>试着关掉网络再刷新，看看还能不能访问。</p>
  
  <script>
    // 注册Service Worker
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js')
        .then(registration => {
          console.log('Service Worker 注册成功:', registration.scope);
        })
        .catch(error => {
          console.log('Service Worker 注册失败:', error);
        });
    }
  </script>
</body>
</html>

离线备用页面的设计

光有缓存还不够，你得给用户一个”体面的”离线体验。想象一下，如果你的APP断网后给用户展示一个白屏或者报错页面，用户体验有多差？就像你走进一家店，店员直接对你说”没网了，你走吧”，这谁能接受？

所以我们要准备一个 offline.html，一个专门在断网时展示的友好页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网络好像断了</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    
    .offline-container {
      background: white;
      border-radius: 20px;
      padding: 40px;
      max-width: 400px;
      width: 100%;
      text-align: center;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }
    
    .icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 20px;
      background: #f0f0f0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
    }
    
    h1 {
      color: #333;
      font-size: 24px;
      margin-bottom: 12px;
    }
    
    p {
      color: #666;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 24px;
    }
    
    .btn {
      display: inline-block;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 12px 32px;
      border-radius: 25px;
      text-decoration: none;
      font-weight: 600;
      transition: transform 0.2s, box-shadow 0.2s;
      border: none;
      cursor: pointer;
      font-size: 14px;
    }
    
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }
    
    .hint {
      margin-top: 20px;
      font-size: 12px;
      color: #999;
    }
  </style>
</head>
<body>
  <div class="offline-container">
    <div class="icon">📶</div>
    <h1>网络好像断了</h1>
    <p>看起来你现在不在网络覆盖范围内，就像在地铁里一样。不过别担心，你已经缓存的内容应该还能继续使用。</p>
    <button class="btn" onclick="location.reload()">重试连接</button>
    <div class="hint">网络恢复后，点击按钮重新加载页面</div>
  </div>
</body>
</html>

这个页面有几个精心设计的地方：

颜色温暖不刺眼，给用户安抚感
明确告诉用户发生了什么，而不是让他困惑
提供”重试”按钮，给用户主动操作的感觉
不抱怨、不推卸责任，语气友好

缓存不生效？排查手册

这是最关键的部分。很多开发者按照文档配置了离线缓存，结果发现根本没生效。别急，这太正常了。我把常见的原因和排查方法整理如下：

1. Manifest文件没有正确配置HTTP头

AppCache有一个很多人不知道的限制：manifest文件必须以.appcache为扩展名，或者服务器必须配置正确的MIME类型。

检查方法：在浏览器开发者工具的Network面板，查看manifest文件的响应头：

Content-Type: text/cache-manifest

如果你的服务器没有正确配置，Apache可以这样改：

AddType text/cache-manifest .appcache

Nginx配置：

location ~* \.appcache$ {
    add_header Content-Type text/cache-manifest;
}

2. 缓存文件被浏览器禁止缓存

浏览器有一些硬性规则，不遵守就不缓存：

HTTPS必须是首页面（本地开发http://localhost也行）
manifest文件本身必须在24小时内过期（不能被设置很长的Cache-Control）
manifest文件不能被代理缓存

检查你的HTTP头：

Cache-Control: no-store, max-age=0

这样写的话，浏览器会认为manifest文件不能缓存，整个AppCache机制就不会启动。正确做法是让manifest文件短暂缓存（比如一小时），但其他内容文件可以长期缓存。

3. 缓存内容过大

每个应用的AppCache空间有5MB的限制（不同浏览器可能略有差异）。如果你的应用包含大量图片、视频或大文件，很容易超出限制。

检查方法：打开Chrome开发者工具，进入 Application → Application Cache 查看当前缓存状态和大小。

如果发现超了，需要精简缓存内容：

CACHE MANIFEST
# version 1.1 - 2024-01-15 - 优化后体积

CACHE:
index.html
css/app.css
js/app.js
images/icon-192.png
images/icon-512.png

# 移除不必要的资源，或者改为用Service Worker按需缓存
NETWORK:
*

FALLBACK:
/ /offline.html

4. Manifest文件内容发生变化但浏览器没有更新

AppCache有一个诡异的行为：只要manifest文件本身有任何变化（哪怕是注释行），浏览器就会重新下载所有缓存文件。但如果manifest文件没变化，内容改了也不会更新。

这是一个经典的坑。正确做法是在manifest文件顶部加版本号注释：

CACHE MANIFEST
# v1.2.3 - 2024-01-15

CACHE:
index.html
css/app.css
js/app.js

每次更新内容时，改版本号注释。这样浏览器就会重新拉取所有文件。

5. Service Worker没有正确注册

如果用Service Worker方案，先检查注册是否成功：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('✅ Service Worker 注册成功，scope:', registration.scope);
    })
    .catch(error => {
      console.log('❌ Service Worker 注册失败:', error);
    });
} else {
  console.log('⚠️ 当前浏览器不支持 Service Worker');
}

如果注册失败，常见原因：

sw.js文件路径错误（检查404）
sw.js返回了非200状态码
文件内容语法错误
不在HTTPS环境下（localhost除外）

6. 缓存策略导致旧资源一直不更新

Service Worker缓存的问题在于：一旦缓存了，就一直是旧的，除非你主动更新。

解决方法是用”缓存版本化”策略：

const CACHE_NAME = 'my-app-v2'; // 每次更新版本号

// 激活时清理旧缓存
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames
          .filter(name => name !== CACHE_NAME)
          .map(name => caches.delete(name))
      );
    })
  );
});

每次发布新版本时，改CACHE_NAME的值，这样旧缓存就会被自动清理。

更新失效？排查手册

缓存做得好，更新是个大问题。很多开发者抱怨”明明更新了代码，用户那边还是旧的”。这通常是因为更新机制没配好。

问题一：Service Worker注册了但没生效

Service Worker有一个特点：新注册的Service Worker不会立即接管页面，它需要先”激活”。

时间线是这样的：

第一次访问：注册SW → 安装 → 等待激活
第二次访问：旧的SW还在接管，新的SW进入”等待”状态
所有旧标签页关闭后：新的SW激活

这意味着，更新Service Worker后，需要关掉所有标签页再重新打开才会生效。

检查步骤：

打开开发者工具 → Application → Service Workers
看看当前是否有SW在运行
点击”Update”按钮强制检查更新
点击”Unregister”然后重新注册

问题二：缓存了动态内容导致数据不更新

这是最常见的问题。很多开发者把API请求也缓存了：

// ❌ 错误做法：缓存了API响应
caches.open(CACHE_NAME).then(cache => {
  cache.addAll(['/api/user', '/api/feed', '/api/settings']);
});

这样用户缓存的是第一次访问时的数据，之后数据更新了，用户看到的还是旧的。

正确做法是：API数据不要缓存，或者用”缓存加网络”的混合策略：

self.addEventListener('fetch', event => {
  // 静态资源：Cache First（优先缓存）
  if (event.request.url.match(/\.(css|js|png|jpg|svg)$/)) {
    event.respondWith(
      caches.match(event.request)
        .then(cached => cached || fetch(event.request))
    );
  }
  
  // API请求：Network First（优先网络，失败用缓存）
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      fetch(event.request)
        .then(networkResponse => {
          const responseClone = networkResponse.clone();
          caches.open(CACHE_NAME).then(cache => {
            cache.put(event.request, responseClone);
          });
          return networkResponse;
        })
        .catch(() => caches.match(event.request))
    );
  }
});

问题三：HTML文件被缓存导致JS/CSS路径变化不生效

即使你更新了JS文件，如果index.html被缓存了，浏览器还是用旧的HTML去引用旧的JS路径。

解决方法：在HTML中引用资源时加上版本号参数：

<!-- ❌ 旧做法 -->
<link rel="stylesheet" href="/css/app.css">
<script src="/js/app.js"></script>

<!-- ✅ 新做法：带版本号 -->
<link rel="stylesheet" href="/css/app.css?v=1.2.3">
<script src="/js/app.js?v=1.2.3"></script>

Service Worker拦截时根据带hash的版本号判断是否需要更新缓存：

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  const cacheKey = url.href; // 包含版本号作为key的一部分
  
  event.respondWith(
    caches.match(cacheKey)
      .then(cached => {
        if (cached) return cached;
        return fetch(event.request)
          .then(response => {
            caches.open(CACHE_NAME).then(cache => cache.put(cacheKey, response));
            return response;
          });
      })
  );
});

一个完整的实战案例

为了让你有更直观的理解，我把上面的所有内容整合成一个可以实际运行的项目结构：

my-offline-app/
├── index.html              # 主页面
├── offline.html            # 离线备用页
├── sw.js                   # Service Worker
├── cache-manifest.appcache # AppCache清单（兼容旧浏览器）
├── css/
│   └── app.css
├── js/
│   └── app.js
└── images/
    ├── logo.png
    └── icon-192.png

index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地铁也能用的应用</title>
  <link rel="stylesheet" href="/css/app.css?v=1.2.3">
  <link rel="manifest" href="/manifest.json">
  <link rel="apple-touch-icon" href="/images/icon-192.png">
  <meta name="theme-color" content="#667eea">
</head>
<body>
  <header>
    <img src="/images/logo.png" alt="Logo" id="logo">
    <h1>我的离线应用</h1>
    <p id="status">网络连接中 ✓</p>
  </header>
  
  <main>
    <div class="card">
      <h2>试着断开网络</h2>
      <p>打开开发者工具 → Network → 选择 Offline，然后刷新页面。</p>
      <p>你会发现应用照样能跑，因为资源都缓存在本地了。</p>
    </div>
    
    <div class="card">
      <h2>缓存状态</h2>
      <p id="cache-status">正在检测...</p>
    </div>
    
    <div class="card">
      <h2>缓存了哪些文件？</h2>
      <ul id="cache-list">
        <li>加载中...</li>
      </ul>
    </div>
  </main>
  
  <footer>
    <p>即使地铁没信号，也能继续用 🚇</p>
  </footer>
  
  <script src="/js/app.js?v=1.2.3"></script>
  <script>
    // 检测网络状态
    function updateNetworkStatus() {
      const statusEl = document.getElementById('status');
      if (navigator.onLine) {
        statusEl.textContent = '网络连接中 ✓';
        statusEl.style.color = '#4caf50';
      } else {
        statusEl.textContent = '已离线，使用缓存模式 ⚡';
        statusEl.style.color = '#ff9800';
      }
    }
    
    window.addEventListener('online', updateNetworkStatus);
    window.addEventListener('offline', updateNetworkStatus);
    updateNetworkStatus();
    
    // 检查Service Worker状态
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.ready.then(registration => {
        const cacheStatus = document.getElementById('cache-status');
        cacheStatus.textContent = 'Service Worker已激活，离线模式就绪 ✓';
        cacheStatus.style.color = '#4caf50';
      });
    }
  </script>
</body>
</html>

sw.js（完整生产级版本）：

const CACHE_NAME = 'my-app-v1.2.3';
const STATIC_CACHE = 'static-v1.2.3';
const DYNAMIC_CACHE = 'dynamic-v1.2.3';

// 需要预缓存的静态资源
const PRECACHE_URLS = [
  '/',
  '/index.html',
  '/css/app.css?v=1.2.3',
  '/js/app.js?v=1.2.3',
  '/images/logo.png',
  '/images/icon-192.png',
  '/offline.html'
];

// 安装：预缓存核心资源
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(STATIC_CACHE)
      .then(cache => {
        console.log('[SW] 预缓存开始...');
        return cache.addAll(PRECACHE_URLS);
      })
      .then(() => self.skipWaiting())
  );
});

// 激活：清理旧缓存
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys
        .filter(key => key !== STATIC_CACHE && key !== DYNAMIC_CACHE)
        .map(key => caches.delete(key))
    )).then(() => self.clients.claim())
  );
});

// 请求拦截策略
self.addEventListener('fetch', event => {
  const { request } = event;
  const url = new URL(request.url);
  
  // HTML文档：Network First
  if (request.mode === 'navigate' || 
      (request.headers.get('accept')?.includes('text/html'))) {
    event.respondWith(
      fetch(request)
        .then(networkResponse => {
          const responseClone = networkResponse.clone();
          caches.open(DYNAMIC_CACHE).then(cache => cache.put(request, responseClone));
          return networkResponse;
        })
        .catch(() => caches.match('/offline.html'))
    );
    return;
  }
  
  // 静态资源：Cache First
  if (url.pathname.match(/\.(css|js|png|jpg|jpeg|gif|svg|woff2?)$/)) {
    event.respondWith(
      caches.match(request)
        .then(cached => {
          if (cached) return cached;
          return fetch(request)
            .then(networkResponse => {
              if (networkResponse.ok) {
                const responseClone = networkResponse.clone();
                caches.open(STATIC_CACHE).then(cache => cache.put(request, responseClone));
              }
              return networkResponse;
            });
        })
    );
    return;
  }
  
  // API请求：Network First，失败用缓存
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(
      fetch(request)
        .then(networkResponse => {
          const responseClone = networkResponse.clone();
          caches.open(DYNAMIC_CACHE).then(cache => cache.put(request, responseClone));
          return networkResponse;
        })
        .catch(() => caches.match(request))
    );
    return;
  }
  
  // 其他资源：Cache First
  event.respondWith(
    caches.match(request)
      .then(cached => cached || fetch(request))
  );
});

// 消息处理：强制更新缓存
self.addEventListener('message', event => {
  if (event.data === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

app.js（前端部分）：

// 页面加载完成后检查缓存状态
document.addEventListener('DOMContentLoaded', () => {
  if ('serviceWorker' in navigator) {
    // 监听Service Worker更新
    navigator.serviceWorker.addEventListener('updatefound', () => {
      const newWorker = navigator.serviceWorker.registration.installing;
      console.log('发现新的Service Worker，正在安装...');
      
      newWorker.addEventListener('statechange', () => {
        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
          console.log('新Service Worker已就绪，需要刷新页面才能生效');
          showUpdatePrompt();
        }
      });
    });
    
    // 列出缓存中的文件
    listCachedFiles();
  }
});

function showUpdatePrompt() {
  const btn = document.createElement('button');
  btn.textContent = '🔄 有新版本，点击更新';
  btn.style.cssText = 'position:fixed;bottom:20px;right:20px;padding:12px 24px;';
  btn.onclick = () => {
    navigator.serviceWorker.controller.postMessage('SKIP_WAITING');
    window.location.reload();
  };
  document.body.appendChild(btn);
}

async function listCachedFiles() {
  const cacheList = document.getElementById('cache-list');
  if (!cacheList) return;
  
  try {
    const cacheNames = await caches.keys();
    const allEntries = await Promise.all(
      cacheNames.map(async cacheName => {
        const cache = await caches.open(cacheName);
        return await cache.keys();
      })
    );
    
    const allUrls = allEntries.flat().map(r => r.url);
    cacheList.innerHTML = allUrls.map(url => `<li>${url}</li>`).join('');
  } catch (e) {
    cacheList.innerHTML = '<li>无法读取缓存列表</li>';
  }
}

给小朋友也能听懂的总结

好了，说了这么多，我用一个简单的方式总结一下：

想象你每天早上去学校。正常情况下，你的课本、作业、铅笔盒都在家里，需要每天早上从家里带到学校。但如果某天你家离学校特别远，或者路上堵车了（就像地铁没信号一样），你就没办法去上学了。

离线缓存就是你在书包里放了一本”迷你版”的课本。这样就算你路上遇到了堵车，你也可以在车上把该看的内容都看完了。

但这里有个小陷阱：如果老师改了课本内容，你书包里的旧课本不会自己变新。你需要主动换一版新书包（更新缓存版本号），或者重新去老师那里拿新的课本（刷新页面触发更新）。

所以记住三件事：

先缓存再使用：把要用到的东西提前存好
版本号要跟上：改了东西就要换版本号，不然浏览器不知道要更新
静态和动态分开：图片、CSS、JS可以长期缓存；API数据要优先用新的

最后提醒：这些坑千万别踩

坑	后果	解法
manifest文件设置了`Cache-Control: no-store`	整个离线缓存不生效	允许manifest短暂缓存
HTTPS下才生效（除localhost外）	本地调试没问题，上线就废	确保线上是HTTPS
缓存了动态API数据	用户看到旧数据	API请求用Network First策略
不改版本号就更新代码	用户一直用旧版本	每次发布改版本号
HTML文件被缓存，引用的JS路径变了	JS加载失败	HTML中资源加版本号参数
Service Worker没清理旧缓存	占用空间，可能冲突	激活时清理旧版本缓存

希望这篇文章能帮你彻底搞清楚HTML5离线缓存。地铁断网不再可怕，你的应用可以像瑞士军刀一样，随时随地都能用。

如果你在实际项目中遇到了问题，记得先看开发者工具的Network和Application面板，那里能看到缓存和Service Worker的真实状态。大多数问题，都能在那两个面板里找到答案。

正文

地铁断网应用秒崩如何用HTML5离线缓存解决附缓存不生效和更新失效常见问题排查

地铁断网应用秒崩如何用HTML5离线缓存解决附缓存不生效和更新失效常见问题排查

先搞清楚：为什么一断网就崩

HTML5离线缓存的核心原理

Service Worker：更强大的现代方案

离线备用页面的设计

缓存不生效？排查手册

1. Manifest文件没有正确配置HTTP头

2. 缓存文件被浏览器禁止缓存

3. 缓存内容过大

4. Manifest文件内容发生变化但浏览器没有更新

5. Service Worker没有正确注册

6. 缓存策略导致旧资源一直不更新

更新失效？排查手册

问题一：Service Worker注册了但没生效

问题二：缓存了动态内容导致数据不更新

问题三：HTML文件被缓存导致JS/CSS路径变化不生效

一个完整的实战案例

给小朋友也能听懂的总结

最后提醒：这些坑千万别踩

相关阅读

揭秘职场生存术：离线到岗，轻松实现远程高效工作秘籍

学会离线创建灯组，轻松打造个性化灯光效果

告别线缆束缚，轻松搞定视频离线分割合并，手机也能轻松剪辑！

手机离线也能轻松关注，揭秘微信、微博等APP离线关注技巧！

手机离线下载全本小说，随时随地畅读无阻

HTML5离线缓存技术解析：让移动应用随时随地可用

手机离线下载失败，36032错误码怎么办？教你排查解决攻略

手机离线下载，流量控制全攻略，教你轻松省流量！

高考英语听力离线下载技巧：轻松应对考试，告别在线烦恼

探寻离线地图使用攻略：手机无网也能轻松导航旅行

地铁断网应用秒崩如何用HTML5离线缓存解决 附缓存不生效和更新失效常见问题排查

先搞清楚：为什么一断网就崩

HTML5离线缓存的核心原理

Service Worker：更强大的现代方案

离线备用页面的设计

缓存不生效？排查手册

1. Manifest文件没有正确配置HTTP头

2. 缓存文件被浏览器禁止缓存

3. 缓存内容过大

4. Manifest文件内容发生变化但浏览器没有更新

5. Service Worker没有正确注册

6. 缓存策略导致旧资源一直不更新

更新失效？排查手册

问题一：Service Worker注册了但没生效

问题二：缓存了动态内容导致数据不更新

问题三：HTML文件被缓存导致JS/CSS路径变化不生效

一个完整的实战案例

给小朋友也能听懂的总结

最后提醒：这些坑千万别踩

相关阅读

揭秘职场生存术：离线到岗，轻松实现远程高效工作秘籍

学会离线创建灯组，轻松打造个性化灯光效果

告别线缆束缚，轻松搞定视频离线分割合并，手机也能轻松剪辑！

手机离线也能轻松关注，揭秘微信、微博等APP离线关注技巧！

手机离线下载全本小说，随时随地畅读无阻

HTML5离线缓存技术解析：让移动应用随时随地可用

手机离线下载失败，36032错误码怎么办？教你排查解决攻略

手机离线下载，流量控制全攻略，教你轻松省流量！

高考英语听力离线下载技巧：轻松应对考试，告别在线烦恼

探寻离线地图使用攻略：手机无网也能轻松导航旅行

地铁断网应用秒崩如何用HTML5离线缓存解决附缓存不生效和更新失效常见问题排查