“Add to Home screen” bubble for SAPUI5 mobile apps
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!
Nice blog,
The extra notification for the user to add the application to the home screen was a cool feature.
Thank you Njal!
hope to write other blogs about SAPUI5
Really interesting blog, Alessandro.
Just tried it out, and it is nicely performing. Thank you for sharing! 🙂
Thank you Flavio
did you try on Sap Hana Cloud? 😀
Ciao Alessandro,
Yes, I tried with SAP HANA Cloud trial (hanatrial.ondemand.com), down to the iPhone.
Nice! 🙂
Hello,
I am working with SAP Hana Cloud trial version (SAP WEB IDE). I tried to add Home Screen feature to my application.
My project structure is:
In index.html file I added line like this:
<link rel="apple-touch-icon" sizes="57x57" href="images/apple-touch-icon-iphone.png"/>
Then I deploy my application, and when I try to add Home Screen on my iPhone 5s device (iOS version: 8), my image is not added. 🙁
Interesting is that, when I use image from internet (link to the image), then all works great - image is added to home screen:
<link rel="apple-touch-icon" sizes="57x57" href="http://www.platinumpay.net/images/EP_employees.png">
Can you please help, what could be wrong? Image path or something in deffinition?
BR, Kristaps
Hi,
Maybe the problem is caused by SAP HANA CLOUD Security conditions?
Any ideas?
BR, Kristaps
Hi Alessandro,
Thanks for the information.
Had a quick question: This is occurring only for first time. If I re-execute the UI5 application it is not occurring. Every time if I want to see this pop up, do I need to clear my cache?
Thanks,
VIjay
Hi Vijay,
at this link Add to home screen you can explore the options provided by the plugin,
probably the skipFirstVisit option could be for you
Hi Alessandro,
Thanks for your quick turn around.
Now are clearing the session ID's and now its working.
In your link, icons are loading perfect when we develop SAPUI5 applications. But when we cal it from Launchpad.html these icons are not loading ( addtohomescreen.css is not getting called ).
Any pointers on this?
Thanks,
Vijay