It's obviously nice that we can run our application on Chrome for Android but our users are typically
coming from other operating systems and browsers too, both on the desktop as well as on mobile devices.
So we can't rely on them using Chrome
and we also can't rely on them using Android.
Now I mentioned the browser support and I showed you that only Chrome and Opera are supporting the
manifest at the point of time I'm recording this, though support is coming to Microsoft Edge and Firefox,
so we will see a lot of browsers supporting this very soon.
Safari however doesn't support it
and that of course is a disadvantage because whilst Android and Chrome have a huge market share, Safari
on iOS also is quite important.
Now the good thing is whilst this browser doesn't support the manifest.json file, it also won't fail,
it will simply ignore it and we can add some other properties to the index.html file to get at
least a comparable feeling there.
We can add a couple of meta tags here to make sure that our application also looks nice on iOS and
Safari and this is what I want to show you now.
So besides the manifest, in this index.html file I will add a couple of other entries in this head section
here to make sure our application looks and feels nice on Safari and iOS too.
So the first one is a meta tag here and it has a name attribute where the value will be
apple-mobile-web-app-capable and I'll set content to yes.
So this looks cryptic but in the end, this will be understood by webkit,
so by the Safari browser, it will see this meta tag and it'll recognize this key,
so make sure to not mistype it,
apple-mobile-web-app-capable is the correct key and then it will read the value here
and if the value is yes, it knows that we want to treat this as a mobile web app which also allows us
to add it the home screen, get our icon there and launch it from the home screen.
So we basically have this manifest replacement here,
so for Chrome, it detects the manifest and knows what we want to do, here
we explicitly tell Safari by adding this meta tag.
Of course we need to add more information though,
for example we also want to add another meta tag with the name of apple-mobile-web-app,
so you see the pattern, this is basically for all identifiers related to this web app like feature
here set status-bar-style, all separated with dash to a certain content,
for example, we could set the style here to black and this controls how the status bar will display on
these devices.
This is also great if we use another nice meta tag here, name is apple-mobile-web-app-title which allows
to set a title, by default it would infer it from the title tags here which would actually be nice for
this application already
but if you have a deviating title, you can specify it here under content. I'll set pwagram
and therefore I could just use the default title
but again you could specify any deviating title here and Apple or iOS would use that below your
icon and so on.
We also want to let Apple know or iOS know which icon to use,
we do this with a link. Here
we have a link of type Apple touch icon and Apple or iOS will again understand this and then load this
icon here for the app and this is /src/images/icons/app-icons-144x144.png,
so
basically this icon here. Now as you can see, we got loads of icons here though and also, we get some special
Apple icons. So whilst I could point to this icon to have some basic support,
I can also load the Apple optimized icon here by simply changing name to Apple
icon, now I'm referring to this and I can also add a sizes property and be clear about the size of this
icon,
so that just as with the manifest
where we also add multiple icons,
the iOS browser is also able to load
the best icon for a given device and screen resolution,
so now we can simply add a lot of icons here for the different sizes I have. Now I don't want to bore
you so I will skip ahead,
of course feel free to copy and paste this from the final source code you can find at the end of this
module.
So with that, I added all these special Apple icons which are just normal pngs optimized for Apple
and I made Apple aware of it as well as with these three meta tags here which allow Safari to load this, at least
a bit close to a progressive web app like supported in Chrome.
You won't have the same amount of support, obviously since a couple of properties we have in the manifest.json
file are missing here
but at least we are close to it or have some basic support.
Now this is how we can get a better experience on iOS and with Safari.