NGSW缓存Firebase存储

问题：

无法在Angular6 service worker中处理Firebase存储URL（可能是由于CORS）

firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [ {
      "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
      "headers" : [ {
        "key" : "Access-Control-Allow-Origin",
        "value" : "*"
      } ]
      }, {
      "source" : "**/*.@(jpg|jpeg|gif|png)",
      "headers" : [ {
        "key" : "Cache-Control",
        "value" : "max-age=7200"
      } ]
      }, {
      "source" : "404.html",
      "headers" : [ {
        "key" : "Cache-Control",
        "value" : "max-age=300"
      } ]
    } ]
  }
}

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/apple-touch-icon-precomposed.png",
        "/apple-touch-icon.png",
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ],
    "urls": [
      "https://fonts.googleapis.com/**",
      "https://firebasestorage.googleapis.com/**"
    ]
    }
  }],
  "dataGroups": [{
      "name": "api-performance",
      "urls": [
        "/some_route"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]
}

ngsw-conf.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [ {
      "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
      "headers" : [ {
        "key" : "Access-Control-Allow-Origin",
        "value" : "*"
      } ]
      }, {
      "source" : "**/*.@(jpg|jpeg|gif|png)",
      "headers" : [ {
        "key" : "Cache-Control",
        "value" : "max-age=7200"
      } ]
      }, {
      "source" : "404.html",
      "headers" : [ {
        "key" : "Cache-Control",
        "value" : "max-age=300"
      } ]
    } ]
  }
}

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/apple-touch-icon-precomposed.png",
        "/apple-touch-icon.png",
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ],
    "urls": [
      "https://fonts.googleapis.com/**",
      "https://firebasestorage.googleapis.com/**"
    ]
    }
  }],
  "dataGroups": [{
      "name": "api-performance",
      "urls": [
        "/some_route"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]
}

所有文件都已上载到Firebase存储，其中包含以下元数据：

{
  cacheControl: 'public,max-age=36000',
  contentType: 'image/jpeg'
}

当我在Chrome或Opera中加载应用程序时，应用程序呈现OK，但我收到错误消息“加载某些\u firebase\u存储\u下载\u链接失败：请求的资源上不存在“Access Control Allow Origin”标题。因此，不允许访问源my_app_域。如果不透明响应满足您的需要，请将请求的模式设置为“无cors”，以获取禁用cors的资源。当我重新加载应用程序时，不会加载Firebase存储资源

当我在Safari或Edge中加载应用程序时，应用程序根本不会呈现，并且我收到多个控制台错误“加载资源失败”

该应用程序正在Firefox中呈现和缓存，没有任何问题

当我省略Firebase存储并仅使用Firebase主机中的资源时，应用程序在所有浏览器中都被无错误地缓存

我已搜索将请求的模式设置为“无cors”，但未能就我的问题达成任何解决方案

更新

---

这可能是由于NGSW和Firebase Firestore持久性处理程序（即：Firebase.Firestore（）.enablePersistence（）；）的干扰造成的。我不确定Firebase Firestore持久性到底是如何工作的，但当我在没有Firestore持久性的情况下初始化应用程序时，我就能够缓存Firebase存储的动态链接。这对我没有用，因为我需要同时提供数据库和存储。

您可以尝试

gsutil cors set etc/cors.json gs://.appspot.com

，其中

etc/cors.json

包括

{“origin”：“*”，“method”：“GET”，“maxagesonds”：3600}

。我无法想象与Firestore或persistence有任何联系。这对我很有帮助