Progressive web apps part 2 : Support for Safari and Internet Explorer

Hello Geeks, In this article we will learn that how we can make progressive web apps to compatible with Safari and Internet Explorer. In last article, Getting Started with Progressive web apps we have learnt that you can make your web apps installable on your mobile using manifest.json file. But this file has some limitation to browser support. Only Google chrome and Mozilla firefox support amnifest.json. But as product owner or business owner, you can’t rely only on these browser. There are very good number of users who use safari and Internet explorer on their mobile.  So make your web apps ready for Safari and Internet Explorer browser we will learn step by step that how we can add PWA support for Safari and Internet Explorer.

Progressive web apps (PWA)

You can related PWA as per its name. PWA progressive means new features and support for PWA is increasing day by day. As per various report, Now users has started using PWA hence its building trust among user. Because its lightweight, installable and reliable and increasing the user engagement.

PWA support for Safari

To  make your PWA ready for Safari, you need to add the following meta to your application head part.

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="grey">
  <meta name="apple-mobile-web-app-title" content="w3classes">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-48x48.png" sizes="48x48">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-60x60.png" sizes="60x60">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-72x72.png" sizes="72x72">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-114x114.png" sizes="114x114">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-120x120.png" sizes="120x120">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-144x144.png" sizes="144x144">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-180x180.png" sizes="180x180">

PWA support for Internet Explorer

To  make your PWA ready for Internet Explorer, you need to add the following meta to your application head part.

  <meta name="msapplication-TileImage" content="/src/images/icons/app-icon-144x144.png">
  <meta name="msapplication-TileColor" content="#fafafa">
  <meta name="theme-color" content="#336699">

Hope this article helps you in understanding Progressive web apps and Support for Safari and Internet Explorer.

Thanks for reading. Happy Coding 🙂