Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Add Meta Tags for Other Browsers on a PWA

    Alex Jover MoralesAlex Jover Morales

    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.

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss