PWA缓存index.html显示纯文本而非渲染HTML的问题求助

这个问题的核心原因几乎都是缓存的index.html响应缺少正确的Content-Type: text/html; charset=utf-8头，导致浏览器无法识别这是HTML文件，只能当成纯文本渲染。下面是一步步的排查和解决方法：

第一步：确认问题根源 #

先打开浏览器开发者工具的「Application」面板，找到「Cache Storage」下的backfuel-cache-v1缓存，查看index.html的响应头：

• 如果Content-Type不是text/html，那就是缓存的响应头出了问题；
• 如果是正确的，再检查请求的URL是否匹配缓存的/backfuel/src/index.html（比如你访问的是/backfuel/src/，而缓存的是带文件名的路径，可能存在匹配问题）。

第二步：修复缓存的响应头 #

方案1：在Fetch事件中修正返回的响应 #

当从缓存中获取到index.html的响应时，手动创建一个带有正确Content-Type的新响应返回给浏览器：

self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)
      .then(function (response) {
        if (response) {
          // 针对index.html请求，强制设置正确的Content-Type
          if (event.request.url.endsWith('/backfuel/src/index.html')) {
            return response.text().then(body => {
              return new Response(body, {
                headers: {
                  ...response.headers,
                  'Content-Type': 'text/html; charset=utf-8'
                },
                status: response.status,
                statusText: response.statusText
              });
            });
          }
          return response;
        }

        // 原有fetch逻辑保持不变
        return fetch(event.request).then(
          function (response) {
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }
            const responseToCache = response.clone();
            caches.open(CACHE_NAME)
              .then(function (cache) {
                cache.put(event.request, responseToCache);
              });
            return response;
          }
        );
      })
  );
});

方案2：在Install阶段缓存时就修正响应头 #

如果服务器返回的index.html本身就没有正确设置Content-Type，可以在缓存前手动修正：

const CACHE_NAME = 'backfuel-cache-v1';
const otherUrlsToCache = [
  '/backfuel/src/manifest.json',
  '/backfuel/src/css/Main.css',
  '/backfuel/src/app/Main.js'
];

self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function (cache) {
        // 先单独处理index.html的缓存，修正响应头
        return fetch('/backfuel/src/index.html')
          .then(res => {
            const fixedResponse = new Response(res.body, {
              headers: new Headers(res.headers),
              status: res.status,
              statusText: res.statusText
            });
            fixedResponse.headers.set('Content-Type', 'text/html; charset=utf-8');
            return cache.put('/backfuel/src/index.html', fixedResponse);
          })
          // 再缓存其他资源
          .then(() => cache.addAll(otherUrlsToCache))
          .then(() => console.log('缓存完成'));
      })
  );
});

第三步：测试验证 #

修改Service Worker代码后，记得在开发者工具的「Application」面板中：

1. 点击「Service Workers」下的「Update」按钮更新Service Worker；
2. 勾选「Update on reload」确保新的Service Worker生效；
3. 清空旧的缓存（在「Cache Storage」中删除backfuel-cache-v1），然后刷新页面测试。

这样应该就能解决缓存的index.html以纯文本显示的问题了。

内容的提问来源于stack exchange，提问作者dscham