Add Meta Tags for Other Browsers on a PWA
The Web App Manifest by itself is not enough to define the required app information. Some browsers required additional information in order to the app to be installable, defined in meta tags.
In this lesson I’ll show you how to add the required meta tags.
Instructor: [00:01] Currently, iOS Microsoft Edge and still need some metadata to make the app installable. First, for iOS, it needs three meta tags. Let's say meta name. They all start with Apple mobile web app and have a content property.
[00:25] Let's duplicate this three times, and then let's start by the first one, which is capable. This meta tag tells iOS that this web app is installable. Then we can configure the status bar style, which it can be default, which is just the user's status bar.
[00:48] It can be black, or it can be black translucent. We're going to keep it as default. If you like, just try them out. The third one is the title, where we can write just the chatty images that we had in the manifest. We still need to add the icon that will be displayed in the iOS home screen.
[01:20] In the run property, let's say apple.icon, and let's add the path to the smaller icon here. In the same line, we also have to add a couple of meta tags for Microsoft Edge. They both are also similar, MS application, and have a content property.
[01:54] The first one is tile image. Again, we'll write here the path to the smaller icon. The other property is tile color, which is the tile color that Windows uses to place the tile icon in the home screen. We'll just set it to black. Just with this, the app is ready to be understood by all modern browsers.