【发布时间】：2019-12-07 09:24:50
【问题描述】：
我正在使用 ReactJs 开发 PWA，并且已经尝试了两天来解决这个问题，但没有！我在 package.json 中正确添加了指令块。这里的离子问题是我的应用程序的徽标在添加到主屏幕时会字面上显示在 android 上。但是，当我尝试使用 Safari 将应用程序添加到 iOS 上的主屏幕时，徽标不会出现！这变得令人沮丧。请帮忙！我已经使用应安装应用程序的 SSL 证书（随处建议）保护了域，但它不起作用。这是我的 package.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"
}
这是我的 index.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>
【问题讨论】：
-
不是 100% 确定，但我会首先尝试从路径中删除角 {{-brakets。 Header/Meta-Tags 通常不在 Angular 上下文中，因此不会被模板引擎评估。
-
另外——我认为你不需要 url() 语法——这通常是 css 语法。
-
另外 - 为了理解你的 pwa - 不是 package.json 而是 manifest.json 会很有用... pwa 的重要配置内容在哪里... 最有可能的图标配置在那里也是。
-
感谢您的回复@Florian，我测试也没有用。它适用于Android，这很奇怪。我相信 Safari 一定有一些令人讨厌的修复...
标签： reactjs progressive-web-apps