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