IOS上的PWA Angular 7材质图标问题答案

【问题标题】：PWA Angular 7 material icons problem on IOSIOS上的PWA Angular 7材质图标问题
【发布时间】：2019-11-08 11:35:55
【问题描述】：

我使用 angular 7、angular cli 7+ 和 keycloak 作为用户授权层创建了 PWA 应用程序。在 Android 设备上一切正常，但在 IOS 上安装应用程序后我看不到材料图标。我正在使用来自此链接的自托管角度材质图标：(https://github.com/jossef/material-design-icons-iconfont)，并且我将服务工作者配置为在惰性模式下缓存图标。图标必须是自托管的，因为应用程序没有互联网连接（本地网络）任何帮助将不胜感激。在这个问题上已经输了超过 16 小时。

我注意到，IOS Safari 仅在第一次在该设备上请求页面时才会出现图标问题。第二次图标在浏览器中可见，但如果添加了快捷菜单图标并且我从主菜单图标启动的应用程序不可见，则在其他情况下。

授权重定向是否有问题？如果不是 Safari 图标字体加载问题的原因是什么？为什么 safari 不显示图标？

当我在谷歌开发者工具中查看应用程序/服务工作者文件时，我可以看到图标字体已加载。

服务人员： `

{
  "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)"
        ]
      }
    }
  ]
}

【问题讨论】：

标签： angular angular-material progressive-web-apps

【解决方案1】：

问题已通过 keycloak 初始化参数解决。我将 onLoad 更改为 login-required。当页面开始加载然后重定向到登录时，在该过程中，图标开始加载并在 keycloak Angular 客户端重定向到登录页面时停止。这可能会给 safari 带来问题，并且 safari 会以某种方式破坏图标

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

【讨论】：