PWA Tutorial for Beginners #5 - iOS Support

Key Takeaways

alright then gang so we've made this web app manifest file so that when we view this web page in a browser we're actually telling the browser information about the app so that it can be added to the device home screen in the correct way use all the correct icons colors display types and names etc and we saw in the last lesson that on Android and chrome this is fully supported it used the correct icons and colors however if you're using an iOS device then some of the web app manifest properties are not currently supported namely the icons and also the theme color which colorize is the status bar at the top so if we try to add this app to the home screen using Safari on an iOS device it would not use the icons that we specify or right here it doesn't support that instead what it would do is just take a screenshot of our app and use that as the icon instead which is no good so to correct this all we need to do is add in a link tag to our HTML head so let's go to index dot HTML and underneath this link tag I'm going to do a little comment that says iOS support and then underneath that we need another link tag the rel at this time is gonna be Apple - touch - icon and then this href is going to be the source of the icon that we want to use so forward slash icons to go into that folder then icon - 96 times 96 dot PNG that's the size that I'm going to use now if we wanted to we could copy and paste this down here a few times over and over so then the device that we're on can choose which icon size to use I'm just going to leave it as this one for now anyway now we have our icon sorted for iOS devices the next thing I want to do is a meta tag and inside this meta tag we're going to have a name property and that is going to say Apple - mobile - web - app - status - bahu long name and this is going to colorize the status bar at the top now the content is going to be that color and I'm going to say hash a 7700 okay so now if we viewed on an iOS then this would colorize the status bar at the top instead with the theme color and this would be the icon for the homepage so this should now work as expected on iOS devices and Safari so all I'm going to do for now is copy this and paste it into the other two pages like so so that now we're ready to go on into the next lesson and start to talk about service workers