解决PWA子文件夹部署后manifest.json无法获取的Lighthouse审计失败问题

核心问题：路径不匹配+配置语法错误 #

你把PWA部署在网站子文件夹，但资源引用都用了根目录绝对路径，导致浏览器无法正确获取manifest；同时manifest里存在语法错误，这两个问题直接导致Lighthouse审核失败、安卓Chrome无安装选项。下面是具体修复步骤：

1. 修正index.html中的manifest引用路径 #

原代码用了绝对路径/manifest.json，会直接请求网站根目录文件，而非你的子文件夹。改成相对路径：

<link rel="manifest" href="manifest.json">

（如果index.html和manifest在同一层级，直接写文件名即可，无需前缀）

2. 修复manifest.json的配置与语法 #

• prefer_related_applications是布尔类型，必须去掉引号：

  "prefer_related_applications": false
  

• start_url适配子文件夹，改成相对路径（确保打开PWA时指向子文件夹内的首页）：

  "start_url": "./index.html"
  

• 检查icons路径：如果manifest在主文件夹、图标在images/子目录，路径要写成"./images/xxx.png"，确保浏览器能正确加载图标。

修正后的manifest示例：

{
  "name": "Web app name",
  "short_name": "app name",
  "icons": [{
    "src": "./images/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "lang": "en-US",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "white",
  "theme_color": "white",
  "prefer_related_applications": false
}

3. 调整Service Worker的缓存路径 #

原service worker用了绝对路径缓存资源，部署在子文件夹时会请求根目录的错误资源。改成相对路径：

var cacheName = 'hello-pwa';
var filesToCache = [
  './',
  './index.html',
  './css/style.css',
  './js/main.js',
  './manifest.json',
  './images/icon-192x192.png' // 按需添加图标到缓存
];

/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

/* Serve cached content when offline */
self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

4. 验证修复效果 #

• 打开Chrome开发者工具→Application标签，检查Manifest面板是否正常加载内容、无报错；
• 检查Service Workers面板，确认service worker已注册且状态激活；
• 清空浏览器缓存后重新运行Lighthouse审计，避免旧缓存干扰结果。

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