Question

我创建了带有angular 7，cli 7+和keycloak作为用户授权层的PWA应用程序。在Android设备上，一切正常，但是在安装该应用程序的IOS上，我看不到材质图标。我正在通过以下链接使用自托管的角度材质图标：（https://github.com/jossef/material-design-icons-iconfont），并且我将Service Worker配置为以惰性模式缓存图标。图标必须是自托管的，因为应用程序无法连接互联网（本地网络），我们将不胜感激。在这个问题上已经损失了超过16小时。

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

授权重定向是否有问题？如果不是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)"
        ]
      }
    }
  ]
}

`

Answer 1

使用密钥库初始化参数解决了问题。我将onLoad更改为需要登录。当页面开始加载然后重定向到登录时，在此过程中，当keycloak角客户端重定向到登录页面时，图标开始加载和停止。这可能给野生动物园造成了麻烦，并以某种方式破坏了野生动物园的图标

<body>
<h1>VIDEO TOOL</h1>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
       data-setup='{ "playbackRates": [0.5, 1, 1.5, 2, 4] }'>
    <source src="project.m4v" type='video/mp4'>
    <track src='br.srt' kind="subtitles" srclang="en" label="English" default>
</video>
<script>
    // Get the audio element with id="my_video_1"
    var aud = document.getElementById("my_video_1");
    // Assign an ontimeupdate event to the audio element, and execute a function if the current playback position has changed
    aud.ontimeupdate = function() {myFunction()};
</script>
<div class="container" style="max-width:800px;margin:0 auto;margin-top:50px;">
    <form name="contact-form" action="" method="post" id="contact-form">
        <label for="email">Comments about the frame</label>
        <textarea name="message" class="form-control" id="message"></textarea>

        <div class="error" id="error_message"></div>

        <label>Vehicle Type:</label>
        <input name="veh_type_1"  id="veh_type_1" type="checkbox" value="lmv">lmv
        <input  name="veh_type_2" id="veh_type_2" type="checkbox" value="2w">2w
        <p>TimeStamp: <span id="tstamp"></span></p>
</div>
<p class="submit">
    <button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
</p>

<div class="display-content">
    <div class="message-wrap dn">  </div>
</div>
</form>
</div>


<script>
    function myFunction() {
        document.getElementById("tstamp").innerHTML = aud.currentTime;
    }
</script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#contact-form").on("submit",function(e) {
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: "saveFile.php",
                data: $( this ).serialize(),
                success: function() {
                    alert("form was submitted");
                }
            });
            return false;
        });
    });
</script>
</body>

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

1 个答案: