Understanding App Manifest
- App Manifest
- Adding Manifest file to project
- Manifest file properties
- Testing on Android Studio
- Working with Safari Devices
- Web App Install Banner
-
App Manifest is one single file we add to our web application and which we specify on our web pages to be loaded via the browser which makes our web app installable, which means we can add it to the home screen of our mobile device and there, it will feel and look like a native app, so we can open it like we open any native app.
-
And why would we want to do that? Well if users just visit our web page like traditional approach i.e. by typing page URL, they might enjoy it but they constantly have to type the URL or manage the bookmark.
-
Now with a home screen icon which we can get via the app manifest, we increase user interaction with our application. Because if you think about your own behavior, how do you use your smartphone? - You probably visit the same apps a lot and you typically visit them by simply tapping on these icons on the home screen. Hence if we get on the home screen with our application, if we could get our web app on that home screen, we would probably drive user engagement and that can only be good for us.
-
Manifest file should be a json file i.e. manifest.json and should be added to the same folder where index.html resides.
-
NOTE: You should add your web app manifest to every index HTML page you have in your application. So if you have a single page application, you only need to add it to one file but if you have a multi-page application, you need to add that file to every view, every page you send back from your server. Why do you need to do that? Because you want to ensure that the browser is able to load that manifest with your additional configuration, no matter which URL you visit.
Install Android Studio to get easy access to the Android Virtual Device (AVD) Manager though. You can access that Manager under "Tools" => "Device Manager" => "Select Device". (If it's your first time, you'd have to create a device before using that)
Need to add additional meta tags so that safari based devices are able to recognize configurations for our PWA. Some of those are:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="PWAGram">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-57x57.png" sizes="57x57">
<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-76x76.png" sizes="76x76">
<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-152x152.png" sizes="152x152">
<link rel="apple-touch-icon" href="/src/images/icons/apple-icon-180x180.png" sizes="180x180">