Skip to Content

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">

/wp-content/uploads/2013/07/apple_touch_icon_253989.png/wp-content/uploads/2013/07/apple_touch_icon_72x72_253990.png/wp-content/uploads/2013/07/apple_touch_icon_114x114_254006.png/wp-content/uploads/2013/07/apple_touch_icon_144x144_254007.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:

addtohome.JPG

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 :

eclipseProject.JPG

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!

Foto 30-07-13 11 51 56.jpgFoto 30-07-13 12 00 43.jpg

Photo 30-07-13 14 32 11.jpgFoto 30-07-13 12 01 50.jpg

Foto 30-07-13 12 02 43.jpg

To report this post you need to login first.

10 Comments

You must be Logged on to comment or reply to a post.

  1. Kristaps Romans

    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:

    /wp-content/uploads/2015/01/structure_621327.png

    In index.html file I added line like this:

    <link rel=”apple-touch-icon” sizes=”57×57″ 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=”57×57″ 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

    (0) 
  2. Vijay Vegesana

    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

    (0) 
      1. Vijay Vegesana

        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

        (0) 

Leave a Reply