February Tip: Sprucing up the meta

OK I’m a couple of days late but here goes my tip for the month. My original background has always been web based applications and on occasion I’ve found lately that there are quite a few things in that world that apply to my XS, XSA and other development in the SAP space.

In particular the idea of turning my web page into a web app, with a little sprucing up of the Meta tags in my index page. As well as a icon or two thrown in. You are already getting a responsive layout through the use of things like SAPUI5 but there are of course a few added touches on top that will make the app stand out a bit more.

These areas are documented quite well for both Apple and Android devices, for example with Apple you can supply an icon that will show up if you “save to the homescreen” instead of just saving it as a bookmark within your browser.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">

There are of course also numerous instructions and tutorials out there on how to do this for things other than your mobile device, such as Chrome. Regardless of what tutorial you follow or whether it’s something basic like a step by step or more advanced the idea is the same, how can take my web page which in essence is an application and give it a more permanent look and feel on the device or system it is being loaded on.

Areas and elements to consider and keep in mind for this are of course the Viewport, application icons, meta tags and manifest file.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Icons are of course that touch of personalization that every developer loves and every branding team hates.

I use several free online tools to generate the specific files but I tend to spend a lot of time inside of tools like Gimp to actually make the graphics myself. I usually do it when I’ve hit a bug or challenge in my app that I can’t seem to get past at the moment.

• http://www.favicon-generator.org/ 
• https://makeappicon.com/webclip#
• http://ios.hvims.com/

Then the of course the challenge of all the various different meta tags that go into my HTML header, now these range from one thing to the other based on what my target is: Apple. Android, MSFT, Chrome, etc. and frankly they are a pain and usually result in me using a snippet to insert a large grouping each time. If only there was a way….

		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta name="msapplication-TileColor" content="#ffffff">
		<meta name="msapplication-TileImage" content="/sap/devs/demo/mylocation/ui/img/ms-icon-144x144.png">
		<meta name="theme-color" content="#ffffff">
		<link rel="apple-touch-icon" href="/sap/devs/demo/mylocation/ui/img/apple-icon-60x60.png">
		<link rel="apple-touch-icon" sizes="57x57" href="/sap/devs/demo/mylocation/ui/img/apple-icon-57x57.png">
		<link rel="apple-touch-icon" sizes="60x60" href="/sap/devs/demo/mylocation/ui/img/apple-icon-60x60.png">
		<link rel="apple-touch-icon" sizes="72x72" href="/sap/devs/demo/mylocation/ui/img/apple-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="76x76" href="/sap/devs/demo/mylocation/ui/img/apple-icon-76x76.png">
		<link rel="apple-touch-icon" sizes="114x114" href="/sap/devs/demo/mylocation/ui/img/apple-icon-114x114.png">
		<link rel="apple-touch-icon" sizes="120x120" href="/sap/devs/demo/mylocation/ui/img/apple-icon-120x120.png">
		<link rel="apple-touch-icon" sizes="144x144" href="/sap/devs/demo/mylocation/ui/img/apple-icon-144x144.png">
		<link rel="apple-touch-icon" sizes="152x152" href="/sap/devs/demo/mylocation/ui/img/apple-icon-152x152.png">
		<link rel="apple-touch-icon" sizes="180x180" href="/sap/devs/demo/mylocation/ui/img/apple-icon-180x180.png">
	  	<link rel="apple-touch-startup-image" href="/sap/devs/demo/mylocation/ui/img/apple-icon-180x180.png" />
		<link rel="icon" type="image/png" sizes="192x192"  href="/sap/devs/demo/mylocation/ui/img/android-icon-192x192.png">
		<link rel="icon" type="image/png" sizes="32x32" href="/sap/devs/demo/mylocation/ui/img/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="96x96" href="/sap/devs/demo/mylocation/ui/img/favicon-96x96.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/sap/devs/demo/mylocation/ui/img/favicon-16x16.png">

Currently there is no one universal system in place, at least not one universally applied. The Manifest file is that idea and is currently in a working draft mode but the idea is simple. A universal way to make the life of a web developer easier.

<link rel="manifest" href="/sap/devs/demo/mylocation/ui/manifest.json">

Until then it’s more a hodge podge of things mixed together.

{
 "name": "SAP HANA Geo Location Demo",
 "short_name": "mylocation",
 "start_url": "/ui/index.html",
 "display": "fullscreen",
 "orientation": "landscape"
 "icons": [
  {
   "src": "\/img\/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "\/img\/android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "\/img\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/img\/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/img\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/img\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  }
 ]
}

So there it is, my little monthly tip. Spend a few minutes and make your web app a little more “appy”!