Update March 2020
While the add-to-homescreen prompt support is still not available on iOS, the pwacompat package (developed by the Google Chrome team), will allow you to easily generate the required assets(splash images and touch icons) for PWA support on iOS devices.
Installation:
npm i pwacompat
This will ensure that your PWA will be supported even in non-compliant devices/browsers, without the need to manually specify the link tags on your document's <head>. More specifically, for the case of Safari, the pwacompat package will do the following:
- Sets apple-mobile-web-app-capable (opening without a browser chrome) for display modes standalone, fullscreen or minimal-ui
- Creates apple-touch-icon images, adding the manifest background to transparent icons: otherwise, iOS renders transparency as black
- Creates dynamic splash images, closely matching the splash images generated for Chromium-based browsers
You may read more about the package on their documentation.
On Android devices(or more specifically, Chrome mobile web browsers on Android devices), PWA-enable web apps will receive a prompt to encourage the user to add the PWA to the Home Screen. It may look something like this:
Image credits: Andy Osmani (Getting started with Progressive Web Apps)
On the other hand, iOS does not support that PWA installation prompt.
Users can only add it as a PWA by tapping it on the 'Add to Homescreen' button. For those who are wondering, the OP is referring to this:
Image credits: Expo
The following types of asset files (Touch icons, and Splash screens) are required for PWAs on iOS devices.
1) Touch Icons
On the header tag of your index.html, you will have to add <link rel="apple-touch-icon" sizes="192x192" href="/example.png">, like this:
<head>
<link rel="apple-touch-icon" sizes="192x192" href="/example.png">
</head>
Do take note that the icons size should be at least 180x180 pixels or 192x192 pixel. You may read up on the good practices on the documentation.
2) Splash Screens
You will use the rel attribute apple-touch-startup-image to enable splash screens on iOS devies.
<head>
<link
rel="apple-touch-startup-image"
media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
href="example2.png"
/>
</head>
Here is a working example by Evan Bacon of the full list of tags will need for the touch icons
You may also check out this blog for the list of PWA features supported on iOS.
Of course, there is that conspiracy theory whereby Apple is intentionally slowing down the adopting of PWAs due to the possiblity of competition with their native App Stores, which is a huge source of revenue for the company. I leave it for you to decide if that is really true
Answer from wentjun on Stack OverflowHey all, I'm considering going fully on React and use PWA for both iOS and Android.
It seems Android makes it a bit easier, do you happen to know by any chance the pitfalls of using PWA on iOS? Specifically in these areas:
- User installation.
- Notifications.
- Geolocation.
Any insight is appreciated
angular - Install To Home Screen on iOS for PWA enabled app - Stack Overflow
progressive web apps - Is "Add to home screen" feature of PWA supported in iOS? - Stack Overflow
Directly opening my PWA when I click a link to my webpage from other website
How do you 'market' a PWA without an app store?
Videos
Update March 2020
While the add-to-homescreen prompt support is still not available on iOS, the pwacompat package (developed by the Google Chrome team), will allow you to easily generate the required assets(splash images and touch icons) for PWA support on iOS devices.
Installation:
npm i pwacompat
This will ensure that your PWA will be supported even in non-compliant devices/browsers, without the need to manually specify the link tags on your document's <head>. More specifically, for the case of Safari, the pwacompat package will do the following:
- Sets apple-mobile-web-app-capable (opening without a browser chrome) for display modes standalone, fullscreen or minimal-ui
- Creates apple-touch-icon images, adding the manifest background to transparent icons: otherwise, iOS renders transparency as black
- Creates dynamic splash images, closely matching the splash images generated for Chromium-based browsers
You may read more about the package on their documentation.
On Android devices(or more specifically, Chrome mobile web browsers on Android devices), PWA-enable web apps will receive a prompt to encourage the user to add the PWA to the Home Screen. It may look something like this:
Image credits: Andy Osmani (Getting started with Progressive Web Apps)
On the other hand, iOS does not support that PWA installation prompt.
Users can only add it as a PWA by tapping it on the 'Add to Homescreen' button. For those who are wondering, the OP is referring to this:
Image credits: Expo
The following types of asset files (Touch icons, and Splash screens) are required for PWAs on iOS devices.
1) Touch Icons
On the header tag of your index.html, you will have to add <link rel="apple-touch-icon" sizes="192x192" href="/example.png">, like this:
<head>
<link rel="apple-touch-icon" sizes="192x192" href="/example.png">
</head>
Do take note that the icons size should be at least 180x180 pixels or 192x192 pixel. You may read up on the good practices on the documentation.
2) Splash Screens
You will use the rel attribute apple-touch-startup-image to enable splash screens on iOS devies.
<head>
<link
rel="apple-touch-startup-image"
media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
href="example2.png"
/>
</head>
Here is a working example by Evan Bacon of the full list of tags will need for the touch icons
You may also check out this blog for the list of PWA features supported on iOS.
Of course, there is that conspiracy theory whereby Apple is intentionally slowing down the adopting of PWAs due to the possiblity of competition with their native App Stores, which is a huge source of revenue for the company. I leave it for you to decide if that is really true
iOS
My PWA's index.html includes the following iOS specific meta tags:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Brew">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-ipad.png" type="image/png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-ipad-retina.png" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-iphone-retina.png" type="image/png">
<link rel="mask-icon" href="assets/images/icons/safari-pinned-tab.svg" color="#5bbad5">
The "apple-mobile-web-app-capable" and the "apple-mobile-web-app-title" meta tags are required by Safari to show the 'Add to Home' screen:
You can read my blog for some additional information: PWA Tips and Tricks
Please refer to the following articles listed below for the iOS PWA functionality
With iOS 11.3, Apple has silently added support for the basic set of new technologies behind the idea of “Progressive Web Apps” (PWAs). It’s time to see how they work, what are their abilities and challenges, and what do you need to know if you already have a published PWA.
https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7
PWA on iOS isn't automatically available like on Android, there are some additional settings you will have to change to allow for the popup to show on Safari iOS.
Additionally from the following stackoverflow Link, there is a link to making it available for iOS without the user having to change their settings.
This code helps me to show the install popup on iPhone.
if (window.matchMedia('(display-mode: standalone)').matches) {
console.log('display-mode is app installed');
}
else{
console.log('display-mode is browser');
}
we can show a custom popup to install.
Thank you