Why this sucks and what can we do about it
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- [...] -->
<link rel="apple-touch-icon" href="app-icon@120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="app-icon@152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="app-icon@180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="app-icon@167x167.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- ... -->
<link
href="%PUBLIC_URL%/ss-iPhone6-4.7.png"
sizes="750x1334"
rel="apple-touch-startup-image"
media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test(userAgent);
}
const isInBrowser = () =>
!(('standalone' in window.navigator) && (window.navigator.standalone));
if (isIos() && isInBrowser()) {
this.setState({ showInstallMessage: true });
}
$ yarn add react-add-to-homescreen
AliExpress increased its iOS conversions by 82%, despite iOS not supporting the full feature set of Progressive Web Apps
And they don't even have icon for iOS homescreen
Uber’s PWA core app is only 50k gzipped and takes less than 3s to load on 2G networks.
And it's fully usable in Poland.