Angular 5 构建PWA：生产环境无法从Firestore获取数据求助

我来帮你一步步排查这个问题，这种本地开发和部署环境表现不一致的情况，通常和几个核心配置或缓存问题有关，咱们逐个分析：

1. 优先检查Firestore安全规则 #

这是部署后最常见的坑之一：开发阶段你可能用的是Firestore的测试规则，但部署后规则可能被修改或未正确更新，导致线上环境无法读取数据。

你可以登录Firebase控制台，进入Firestore -> 规则页面，确认当前规则是否允许未认证的读取（如果你的应用不需要用户登录就能获取数据）。测试阶段可以暂时改成宽松规则验证：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true; // 注意：仅用于测试，上线前必须替换为符合业务的安全规则
    }
  }
}

点击“发布”更新规则后，再刷新Firebase Hosting上的应用，如果能加载数据了，说明就是规则的问题，后续再根据需求配置严格的权限规则。

2. 排查PWA Service Worker的缓存干扰 #

因为你构建的是PWA，Angular的Service Worker可能缓存了旧的请求或资源，导致部署后没有真正去Firestore拉取最新数据。

• 打开浏览器开发者工具的Application标签，找到Service Workers选项，点击Unregister注销当前Service Worker，然后强制刷新页面（Ctrl+Shift+R）试试。
• 另外检查ngsw-config.json的配置，确保Firestore的API请求没有被错误缓存。可以给Firestore请求单独配置缓存策略，优先拉取最新数据：

  "dataGroups": [
    {
      "name": "firestore-api",
      "urls": [
        "https://firestore.googleapis.com/**"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "1h",
        "timeout": "10s"
      }
    }
  ]
  

  修改后重新执行ng build --prod再部署。

3. 确认生产环境的Firebase配置 #

检查Angular生产环境的配置文件src/environments/environment.prod.ts，里面的Firebase参数（apiKey、authDomain、projectId等）必须和Firebase控制台里的项目信息完全一致。很多时候开发环境用的是测试配置，生产环境忘记更新，导致部署后连错了Firestore实例。

你可以构建后打开dist目录下的main.js，搜索你的Firebase项目ID，确认配置已经正确注入。

4. 检查Firebase Hosting的重写规则 #

Angular单页应用需要配置重写规则，确保所有路由都指向index.html，否则可能出现路由跳转或资源加载异常。检查firebase.json的hosting部分：

"hosting": {
  "public": "dist/你的应用名称",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}

如果没有这段重写配置，添加后重新执行firebase deploy。

5. 关于http-server的127.0.0.1异常问题 #

这个大概率和Service Worker的作用域（scope）有关：当用127.0.0.1访问时，Service Worker的注册作用域可能和请求来源不匹配，导致无法正确处理Firestore请求；而局域网IP（10.49.92.71）的作用域是正常的。

你可以尝试启动http-server时加上--cors参数，或者在Service Worker注册代码中指定明确的作用域：

http-server dist/你的应用名称 --cors

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