引入manifest.json后iOS端PWA无法全屏运行问题求助
问题背景
开发了一款Web应用,前端采用Vue.js,后端采用基于Scala的Play Framework。
生产版本打包执行命令为npm run build & sbt compile stage,随后通过sbt start启动生产环境服务时,出现iOS端PWA全屏(standalone独立运行)功能失效的问题,该功能在开发模式下可正常使用。
相关代码配置
index.html head段代码
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta content="minimum-scale=1,width=device-width,maximum-scale=1,user-scalable=no" name="viewport"> <!--[if IE]><link rel="icon" href="./logo_klein.jpg"><![endif]--> <title>EXAMPLE</title> <link href="./static/css/app.f87699ad.css" rel="preload" as="style"> <link href="./static/css/chunk-vendors.5c682f89.css" rel="preload" as="style"> <link href="./static/js/app.7150a234.js" rel="preload" as="script"> <link href="./static/js/chunk-vendors.be075eb5.js" rel="preload" as="script"> <link href="./static/css/chunk-vendors.5c682f89.css" rel="stylesheet"> <link href="./static/css/app.f87699ad.css" rel="stylesheet"> <link rel="icon" type="image/png" sizes="32x32" href="./img/icons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="./img/icons/favicon-16x16.png"> <!--<link rel="manifest" href="./manifest.json">--> <meta name="theme-color" content="#4DBA87"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-title" content="hoScom"> <link rel="apple-touch-icon" href="./img/icons/apple-touch-icon-152x152.png"> <link rel="mask-icon" href="./img/icons/safari-pinned-tab.svg" color="#4DBA87"> <meta name="msapplication-TileImage" content="./img/icons/msapplication-icon-144x144.png"> <meta name="msapplication-TileColor" content="#000000"> <link rel="manifest" href="./manifest.json"> </head>
manifest.json配置
{ "name":"EXAMPLE", "short_name":"EX", "start_url":"http://myUrl/", "display":"standalone", "scope":"http://myUrl/" }
已验证现象与排查进展
- 基础测试结论:如果从index.html中移除manifest.json的引入,将应用添加到iOS主屏幕后即可正常全屏独立运行;但业务需要通过manifest文件配置
start_url和scope参数,无法直接移除该引用。 - 最新排查结果:目前已确认浏览器无法正常读取manifest文件,控制台、Firefox应用面板均存在相关报错,已留存报错截图与项目目录结构截图。
待咨询问题
- 当前引入manifest的路径写法是否存在错误?
- 该问题属于Play Framework后端配置问题、纯前端资源路径问题,还是Vue webpack打包配置导致的问题?
内容的提问来源于stack exchange,提问作者muepsi
相关产品推荐
相关产品推荐

