⚠️ This lesson is retired and might contain outdated information.

Add Meta Tags for Other Browsers on a PWA

Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 2 months ago

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.

egghead
egghead
~ 47 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today