I have an Ionic 3 PWA.
The index.html:
<!doctype html>
<html lang="en" dir="ltr">
<head>
...
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Home Screen Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-iphone.png" type="image/png">
...
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<!-- iOS Startup Images -->
<link rel="apple-touch-startup-image" href="iphone5_splash.png"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="iphone6_splash.png"
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="iphoneplus_splash.png"
media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" />
<link rel="apple-touch-startup-image" href="iphonex_splash.png"
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" />
<link rel="apple-touch-startup-image" href="ipad_splash.png"
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="ipadpro1_splash.png"
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="ipadpro2_splash.png"
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" />
...
</head>
iOS - Add to Home Screen (step 1):
iOS - Add to Home Screen (step 2):
Ref:
- https://realfavicongenerator.net
- https://css-tricks.com/the-notch-and-css/
- https://jonassebastianohlsson.com/criticalpathcssgenerator/
- https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
- https://medium.com/appscope/designing-native-like-progressive-web-apps-for-ios-1b3cdda1d0e8
- https://appsco.pe/developer/splash-screens
- https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210