PWA在Lighthouse中总是拿不到满分，哪里出问题了？

UI东耀提问于 2026-03-16 10:30:22 阅读 56

移动

我最近在优化一个PWA项目，其他项都差不多90+，但“安装性”和“PWA优化”这两项老是丢分。明明我已经加了manifest.json和service worker，也通过了Chrome DevTools的PWA检测，可Lighthouse一跑还是说“无法安装”。

下面是我index.html里引用manifest的方式，是不是哪里写错了？

<link rel="manifest" href="/manifest.json" rel="external nofollow" >
<meta name="theme-color" content="#000000">
<link rel="apple-touch-icon" href="/icons/icon-192.png" rel="external nofollow" >

PWA移动

我来解答赞 9 收藏

反馈

1 条解答

Good“一诺 Lv1

先说最可能的问题：你的manifest.json内容大概率不完整，或者service worker没写对。

1. 检查manifest.json有没有这些必填字段：

{

  "name": "你的应用全名",

  "short_name": "简称",

  "start_url": "/",

  "display": "standalone",

  "background_color": "#ffffff",

  "theme_color": "#000000",

  "icons": [

    {

      "src": "/icons/icon-192.png",

      "sizes": "192x192",

      "type": "image/png"

    },

    {

      "src": "/icons/icon-512.png",

      "sizes": "512x512",

      "type": "image/png"

    }

  ]

}

Lighthouse要求至少有一组192x192和512x512的图标，少一个都不行。

2. 检查service worker有没有正确监听install和fetch事件：

// sw.js

const CACHE_NAME = 'v1';

const urlsToCache = [

  '/',

  '/index.html',

  '/styles/main.css',

  '/scripts/main.js'

];



self.addEventListener('install', event => {

  event.waitUntil(

    caches.open(CACHE_NAME)

      .then(cache => cache.addAll(urlsToCache))

  );

});



self.addEventListener('fetch', event => {

  event.respondWith(

    caches.match(event.request)

      .then(response => response || fetch(event.request))

  );

});

3. 检查service worker注册代码放在index.html里没有：

<script>

  if ('serviceWorker' in navigator) {

    navigator.serviceWorker.register('/sw.js')

      .then(reg => console.log('SW registered'))

      .catch(err => console.error('SW registration failed', err));

  }

</script>

4. 确认是HTTPS环境（localhost除外），service worker强制要求HTTPS。

你可以先去Lighthouse报告里点开"无法安装"的具体原因，它会告诉你缺了什么。一般就是上面这几个问题，一个一个对着改就行。

2026-03-17 23:03