我正在使用 ReactJs 开发一个 PWA，并且已经尝试解决这个问题两天了，但什么都没有！我已经在package.json中正确添加了大量指令。这里的离子问题是我的应用程序的徽标在添加到主屏幕时确实显示在 android 上。但是，当我尝试使用 safari 将应用程序添加到 iOS 上的主屏幕时，徽标没有出现！这正变得令人沮丧。请帮忙！我已经使用 SSL 证书(如处建议的那样(保护了应该从哪里安装应用程序的域，但它不起作用。这是我的包.json：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"homepage": "https://app.mydomain.com"
}
这是我的索引.html头：
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#f8f9fa"/>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-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="myappname">
<link href="https://cdn.rawgit.com/rastikerdar/vazir-font/v20.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="{{ url('/images/icons/icon-120×120.png') }}">
<link rel="apple-touch-icon" sizes="72×72" href="{{ url('/images/icons/icon-72×72.png') }}">
<link rel="apple-touch-icon" sizes="96×96" href="{{ url('/images/icons/icon-96×96.png') }}">
<link rel="apple-touch-icon" sizes="120×120" href="{{ url('/images/icons/icon-120×120.png') }}">
<link rel="apple-touch-icon" sizes="128×128" href="{{ url('/images/icons/icon-128×128.png') }}">
<link rel="apple-touch-icon" sizes="144×144" href="{{ url('/images/icons/icon-144×144.png') }}">
<link rel="apple-touch-icon" sizes="152×152" href="{{ url('/images/icons/icon-152×152.png') }}">
<link rel="apple-touch-icon" sizes="167×167" href="{{ url('/images/icons/icon-167×167.png') }}">
<link rel="apple-touch-icon" sizes="180×180" href="{{ url('/images/icons/icon-180×180.png') }}">
<link rel="apple-touch-icon" sizes="192×192" href="{{ url('/images/icons/icon-192×192.png') }}">
<link rel="apple-touch-icon" sizes="384×384" href="{{ url('/images/icons/icon-384×384.png') }}">
<link rel="apple-touch-icon" sizes="512×512" href="{{ url('/images/icons/icon-512×512.png') }}">
<link rel="icon" sizes="72×72" href="{{ url('/images/icons/icon-72×72.png') }}">
<link rel="icon" sizes="96×96" href="{{ url('/images/icons/icon-96×96.png') }}">
<link rel="icon" sizes="128×128" href="{{ url('/images/icons/icon-128×128.png') }}">
<link rel="icon" sizes="144×144" href="{{ url('/images/icons/icon-144×144.png') }}">
<link rel="icon" sizes="152×152" href="{{ url('/images/icons/icon-152×152.png') }}">
<link rel="icon" sizes="192×192" href="{{ url('/images/icons/icon-192×192.png') }}">
<link rel="icon" sizes="384×384" href="{{ url('/images/icons/icon-384×384.png') }}">
<link rel="icon" sizes="512×512" href="{{ url('/images/icons/icon-512×512.png') }}">
<link rel="manifest" href="./manifest.json"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<title>React App</title>
</head>
嗯...我唯一能想到的可能是你的前导"/"，如果它是一个相对路径，它应该是"./"。或者您没有适合您设备的正确尺寸......这是我在iPhone 7和10以及一些iPad上测试的PWA头部配置。您可以在 https://forgetech.github.io/fg-vlv-pwa/#/anmeldung 上试用
<head>
<meta charset="utf-8">
<title>MeinVLV</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=5.0">
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="assets/images/application/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="assets/images/application/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/application/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/images/application/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/application/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="assets/images/application/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="assets/images/application/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="assets/images/application/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/application/apple-icon-180x180.png" />
<!-- https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native -->
<!-- https://appsco.pe/developer/splash-screens -->
<!-- https://stackoverflow.com/questions/12643817/ios-iphone-web-app-splash-screen-not-showing-up -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="assets/images/application/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/images/application/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/images/application/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/images/application/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/images/application/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/images/application/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/images/application/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/images/application/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/images/application/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/images/application/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/application/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/application/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="96x96" href="assets/images/application/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="192x192" href="assets/images/application/android-icon-192x192.png" />
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1976d2">
</head>
这是我的清单文件：
{
"name": "MeinVLV - Github Dev Deployment",
"short_name": "MeinVlv",
"theme_color": "#0093c4",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "https://forgetech.github.io/fg-vlv-pwa/",
"icons": [
{
"src": "assets/images/application/pwa-icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/images/application/pwa-icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/images/application/pwa-icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/images/application/pwa-icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/images/application/pwa-icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/images/application/pwa-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/images/application/pwa-icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/images/application/pwa-icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}