使用Chrome 80 DevTools时Lighthouse的PWA分数空白问题咨询

Hey there, sorry to hear you're stuck on this—grayed-out PWA score circles are super confusing because they mean Lighthouse didn't even attempt the audit, not that your code failed it. Let's walk through the most likely fixes based on your scenario (Google PWA codelab, extensions disabled, incognito tried):

• Double-check your serving protocol: Lighthouse only runs PWA audits on pages served over HTTPS (localhost is the only exception). If you're using a custom local domain (like http://my-pwa.dev) instead of http://localhost:port, that's probably the issue. Switch back to using localhost for your local server, or set up HTTPS for your custom domain if you need it.

• Ensure you're auditing a top-level document: Lighthouse can't run PWA audits on iframes or embedded content. Make sure you're running the audit on the main tab, not an embedded frame within another page.

• Verify JavaScript is enabled: If you accidentally have "Disable JavaScript" turned on in DevTools, Lighthouse won't be able to detect service workers or manifests. To check:

  1. Open DevTools and click the cog icon in the top-right corner.
  2. Go to the Debugger section.
  3. Make sure the "Disable JavaScript" checkbox is unchecked.

• Update Chrome (if possible): Chrome 80 is quite old (released back in 2020), and there were known bugs with Lighthouse's PWA auditing in older versions. Updating to the latest stable Chrome version might resolve the issue entirely—plus, the Google PWA codelabs are tested against newer browser versions, so this aligns with the project's requirements.

• Re-confirm your manifest and service worker setup: Even though you think your code is correct, it's worth double-checking that Lighthouse can see these core PWA files:

  • Open DevTools > Application > Manifest: Confirm your manifest loads without errors, and all required fields (like name, start_url, display) are present.
  • Open DevTools > Application > Service Workers: Confirm your service worker is registered, active, and shows no errors in the console.

• Check Lighthouse's runtime settings: Make sure "PWA" is selected in the Lighthouse panel's category list (you mentioned you can see the audit description, so this is probably okay, but it's worth a quick check). Also, ensure throttling is set to Simulated or Off—sometimes aggressive throttling can interfere with audit initialization.

If none of these work, try creating a minimal test page with just a basic manifest and service worker to see if the audit runs. That can help isolate whether the issue is specific to your codelab code or a browser environment problem.

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