Angular 5添加ServiceWorkerModule后PWA无法以standalone/fullscreen启动

我之前也碰到过类似的Angular PWA搭配Service Worker时，manifest的display配置不生效的问题，结合你的场景，咱们一步步来排查解决：

1. 优先检查Service Worker缓存是否包含Manifest.json #

这是最常见的问题：你的ngsw-config.json里没有把manifest.json加入缓存组，导致Service Worker激活后，系统无法获取到正确的manifest配置，自然不会应用standalone或fullscreen模式。

修改你的ngsw-config.json，在app资源组的files里添加/manifest.json：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/index.html",
          "/manifest.json"  // 新增这一行，确保manifest被SW缓存
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}

2. 验证Start URL的正确性与缓存覆盖 #

你的manifest里start_url设置为/search，需要确保：

• 执行ng build --prod后，dist目录下的manifest.json里的start_url没有被意外修改（比如base-href配置导致路径不匹配）；
• Service Worker的缓存规则能覆盖/search路径，你可以在Chrome DevTools的Application -> Cache Storage里查看是否缓存了该页面的资源。

3. 清除旧缓存并重新部署 #

Chrome安卓版有时候会缓存旧的Service Worker或manifest配置，导致新配置不生效。你可以：

1. 在Chrome DevTools的Application -> Service Workers里点击Unregister移除旧的SW；
2. 在Application -> Storage里点击Clear site data清除所有缓存；
3. 重新构建部署应用，再次触发PWA安装。

4. 检查Service Worker注册路径 #

你的AppModule注册代码里用了相对路径./ngsw-worker.js，如果你的应用部署在根路径下，改用绝对路径/ngsw-worker.js会更稳妥，避免相对路径导致的SW注册失败或资源加载问题：

ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })

5. 确认PWA安装条件都满足 #

在Chrome DevTools的Application -> Manifest里查看是否有警告：

• 所有图标尺寸是否符合要求（比如512x512的图标必须存在）；
• start_url是否能正常访问；
• Service Worker是否已成功激活（Application -> Service Workers里显示"Activated"状态）。

最后对比参考项目的配置差异 #

你提到的参考项目能正常工作，建议对比它的：

• ngsw-config.json缓存规则（大概率它包含了manifest.json）；
• Angular CLI和@angular/service-worker的版本，确保你的依赖版本和它一致，版本差异也可能导致这类兼容性问题。

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