Работник службы Angular не может кэшировать образ в Firebase Storage, вызывает 504 (время ожидания шлюза) - PullRequest
0 голосов
/ 12 февраля 2019

Я не могу заставить работника службы Angular кэшировать изображения, хранящиеся в Firebase Storage, чтобы они были доступны в автономном режиме.

Я использую Angular 7.2.0, работающий на localhost на машине с Windows..

Чтобы воспроизвести, выполните следующие действия.

  1. Загрузите изображение в Firebase Storage и запишите URL-адрес загрузки.
  2. Запустите следующее в PowerShell
ng new my-project --service-worker
cd .\my-project\
ng add @angular/pwa --project my-project
Редактировать src/app/app.component.html в
<img src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg">
<img src="https://firebasestorage.googleapis.com/v0/b/{firebase project}.appspot.com/o/{image}.jpg?alt=media&token={token}">
Добавьте следующее к src/ngsw-config.json после
    "dataGroups": [
      {
        "name": "photos",
        "urls": [
          "https://firebasestorage.googleapis.com/**/*.jpg*",
          "https://upload.wikimedia.org/**/*.jpg"
        ],
        "version": 1,
        "cacheConfig": {
          "maxSize": 1000,
          "maxAge": "10d",
          "timeout": "3s",
          "strategy": "performance"
        }
      }
    ]
Вернувшись в PowerShell, запустите:
ng build --prod
http-server -p 8080 -c-1 dist/my-project
Откройте http://localhost:8080/ в Chrome и увидите два изображения, показанные ОК. Отключите доступ к Интернету или в DevTools, перейдите в автономный режим. Откройте http://localhost:8080/ в Chrome.Изображение Викимедиа обслуживается работником сервиса, но изображение Firebase не отображается.

Я ожидаю, что и изображение Викимедиа, и размещенное изображение Firebase были кэшированы работником сервиса и показаны,но только изображение Викимедиа было кэшировано.Firebase one не загружается, выдавая ошибку 504 Gateway Timeout.Посмотрите на это изображение, чтобы увидеть то, что я вижу в Chrome Dev Tools.

DevTool showing the error I get

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...