清单文件可防止iOS上的全屏

发布于 2025-02-11 03:33:17 字数 2799 浏览 3 评论 0 原文

我以Vuejs为前端和Scala作为后端开发Web应用程序。

当我为生产模式准备应用程序时,我运行:

npm Run Build& SBT编译阶段

,然后从SBT开始生产模式。我有以下问题。

在iOS中,全屏(PWA)不再可能。但是在开发模式下已经有可能。

我的索引。 HTML看起来像这样:

    <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>

我的清单。 JSON,

{
"name":"EXAMPLE",
"short_name":"EX",
"start_url":"http://myUrl/",
"display":"standalone",
"scope":"http://myUrl/"
}

如果我删除了Maniffest。来自索引的JSON。 html我可以在将其添加到主屏幕中后启动全屏和独立的应用程序。

不幸的是,我需要清单文件,因为我必须将其授予start_url和范围。

有人知道这个问题并可以帮助我吗?

++ update ++

我现在发现,他无法阅读示例费,如您在屏幕截图上所见。控制台,应用程序窗口(Firefox)和我的文件夹结构有错误。

我导入清单时是错误的吗? PlayFramework可能是一个问题,还是绝对是前端问题?还是Vue Webpack的问题?

多谢!

I develop a web app with VueJs as frontend and playframework with SCALA as backend.

When I prepare the app for production mode, I run:

npm run build & sbt compile stage

and then start it with sbt start the production mode. I have the following problem.

In iOS, FullScreen (PWA) is no longer possible. But it was already possible in development mode.

My index. html looks like this:

    <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>

and my manifest. json so

{
"name":"EXAMPLE",
"short_name":"EX",
"start_url":"http://myUrl/",
"display":"standalone",
"scope":"http://myUrl/"
}

If I remove the maniffest. json from index. html I can start the app Fullscreen and Standalone once I have added it to the main screen.

Unfortunately I need the manifest file because I have to give it the start_url and scope.

Does anyone know the problem and can help me?

++UPDATE++

I found out now, he can not read the manifestfile, as you can see at the screenshot. There is the error in console, Application window (firefox) and my folder structure.

enter image description here

Is the way wrong as i import the manifest? Could it be a problem with the playframework, or is it definitely a frontend problem? Or maybe a problem from vue webpack?

Thanks a lot!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

终难愈 2025-02-18 03:33:17

使用/ start_url &amp; 范围;另外:清单。后者在规格之内,但iOS似乎更喜欢 .webmanifest。

Use / for your Start_URL & Scope; also: manifest.webmanifest not manifest.json. The latter is within spec, but iOS seems to prefer .webmanifest.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文