Проблема значков материала PWA Angular 7 в IOS - PullRequest
Новая
       30

Проблема значков материала PWA Angular 7 в IOS

0 голосов
/ 26 июня 2019

Я создал приложение PWA с angular 7, angular cli 7+ и keycloak в качестве слоя авторизации пользователя. Все отлично работает на устройствах Android, но на IOS, когда приложение установлено, я не вижу значков материалов. Я использую самоустанавливающиеся значки угловых материалов по этой ссылке: (https://github.com/jossef/material-design-icons-iconfont), и я настроил работника службы для кэширования значков в режиме отложенного доступа. Значки должны размещаться самостоятельно, поскольку приложение не имеет подключения к Интернету (локальная сеть). Любой приветствуется помощь. Уже потерял более 16 часов по этой проблеме.

Что я заметил, так это то, что IOS Safari имеет проблему с иконками только при первом запросе страницы на этом устройстве. Во второй раз значки видны в браузере, но в других случаях, если добавлен значок контекстного меню, а приложение, запущенное из главного меню, не отображается.

Возможно ли, что перенаправление авторизации является проблемой? Если нет, то в чем причина проблемы с загрузкой шрифтов для иконок Safari? Почему в сафари не отображаются значки?

Когда я смотрю на файлы приложения / службы в инструментах разработчика Google, я вижу, что шрифт значка загружен.

Сервисный работник: `

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

`

enter image description here

1 Ответ

0 голосов
/ 27 июня 2019

Проблема решена с параметром инициализации keycloak. Я изменил onLoad на обязательный вход. Когда страница начинает загружаться, а затем перенаправляется для входа в систему, во время этого процесса значки начинают загружаться и останавливаться, когда угловой клиент перенаправляет на страницу входа. Это, вероятно, создало проблему для сафари, и почему-то значки прерываний сафари 

       await keycloak.init({
          config: environment.keycloak,
          initOptions: {
            onLoad: 'login-required',
            checkLoginIframe: false
          },
          bearerExcludedUrls: []
        });
...