Every iOS user should know he can add every mobile optimized website from Safari to the Home screen : the website can be launched from the homescreen like all other native apps without opening Safari.
Moreover we can specify an icon for the web application used to represent it when added to the Home screen :
<link rel="apple-touch-icon" href="/custom_icon.png"/>
In my example I want to specify several icons depeding on the device and the screen resolution (iPhone , iPad , iPhone with retina ,iPad with retina, ...)
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="144x144" href="images/apple-touch-icon-144x144.png">
the official Apple documentation about Specifying a Webpage Icon can be checked here
How we can help SAPUI5 mobile users to discover this cool iOS feature?
they will be able to tap our SAPUI5 mobile apps directly from the Home Screen device with a native feeling and the Safari url bar hidden by default.
There's nothing too much complicated:using javascript and css we can prompt the user with a custom bubble with the help of an external js library.
The best I found is Add To Home Screen by Qubiq http://cubiq.org/add-to-home-screen
Exploring the javascript code and reading the documentation , many options are available for a custom optimization such as returningVisitor,custom text message,animationIn,animationOut,etc:
in my example I changed default text message with a custom text "This is a SAPUI5 mobile App ..."
<link rel="stylesheet" href="css/add2home.css"> <script> var addToHomeConfig = { message: 'This is a SAPUI5 mobile App on your %device: tap %icon and then <strong>Add to Home Screen</strong>' }; </script> <script type="text/javascript" src="js/add2home.js" charset="utf-8"></script>
For all available options and complete documentation check the LINK or github project
Just for my test purpose I'm going to deploy the sapui5 mobile 'hello world' application (from the offical documentation https://sapui5.hana.ondemand.com/sdk/docs/guide/HelloWorld.1.html ) to my Sap Hana Cloud trial account : in this way I'll get a public url to open from my iPhone Safari.
My SAPUI5AddToHomeScreen Project looks like this :
The only changes in my index.html are the "cool Sap Fiori" blue crystal theme, custom icons and, of course, the "add to home screen" plugin ( javascript and css )
<!DOCTYPE HTML><html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>Add to Home Screen Example</title> <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"> </script> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="144x144" href="images/apple-touch-icon-144x144.png"> <link rel="stylesheet" href="css/add2home.css"> <script> var addToHomeConfig = { message: 'This is a SAPUI5 mobile App on your %device: tap %icon and then <strong>Add to Home Screen</strong>' }; </script> <script type="text/javascript" src="js/add2home.js" charset="utf-8"></script> <script> // create a mobile App // it initializes the HTML page for mobile use and provides animated page handling var app = new sap.m.App("myApp", {initialPage:"page1"}); // page1 should be displayed first // create the first page of your application var page1 = new sap.m.Page("page1", { title: "Initial Page", content : new sap.m.Button({ // content is just one Button text : "Go to Page 2", tap : function() { app.to("page2"); // when tapped, it triggers drilldown to page 2 } }) }); // create the second page of your application var page2 = new sap.m.Page("page2", { title: "Page 2", showNavButton: true, // page 2 should display a back button navButtonTap: function(){ app.back(); // when tapped, the back button should navigate back up to page 1 }, icon: "http://www.sap.com/global/ui/images/global/sap-logo.png", content : new sap.m.Text({text:"Hello Mobile World!"}) }); app.addPage(page1).addPage(page2); // add both pages to the App app.placeAt("content"); // place the App into the HTML document </script> </head> <body class="sapUiBody"> <div id="content"></div> </body></html>
OFF TOPIC: if you are interest how to get your free trial license and deploy your first Hello World to Sap Hana Cloud trial check the link http://scn.sap.com/docs/DOC-28197
The deployment was Ok...now I have my public url ,open Safari and...let's try it!
