PDA

View Full Version : Prompt to 'install' (add to homescreen) on first Safari visit



pstinnett
15 Oct 2010, 7:29 PM
Sorry if this has been asked previously:
Is there an easy way to have a SenchaTouch app ask the user to 'install' to their homescreen if they visit via Safari?

Basically, I want to have the browser chrome removed when any user is using my app. If they visit my site using their iPhone, I want them to be alerted and asked to 'install' (add the page to their homescreen). When they open the app from their homescreen they'll have the chromeless window and the app will function as usual.

Basically, I'm not sure how to test whether or not the user is visiting by tapping an icon from their homescreen or just browsing to the site.

Any help will be much appreciated!

sandor
16 Oct 2010, 5:28 AM
Hey,

you can do something like this in your header file (make you wabapp mobileweb capable before!):


<script type="text/javascript">function getID(x){return document.getElementById(x);}function loadIt(){setTimeout(function(){window.scrollTo(0,1);},1);if(window.navigator.standalone==true){window.location='myCoolMobilesite.html';getID('preparing').style.display='block';}else if(window.navigator.standalone==false){window.location='MyInstructions.html'}</script>

Cheers,

Sandor

jacstofberg
16 Oct 2010, 8:31 AM
Here is my implementation for what it's worth. Just uses an overlay popup to alert user that full screen mode is available. Really simple solution.



//Detect: If the application is not run in full screen mode on an apple device,
// notify user how to add app to home screen for full screen mode.
if (("standalone" in window.navigator) && !window.navigator.standalone){
if (!this.popup) {
this.popup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 300,
styleHtmlContent: true,
html: '<div>Use the <strong>"Add to Home Screen"</strong> function and place an icon on your home screen to run this ' +
'application in full screen mode like a native app. Just tap <strong>"+"</strong> and then <strong>"Add to Home Screen."</strong></div>' +
'<br><center><u>Click anywhere outside this window to make it disappear.</u></center>',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Go Full Screen!'
}],
scroll: 'vertical'
});
}
this.popup.show('pop');
}


Just add this to any extended panel class etc.

sandor
16 Oct 2010, 10:07 AM
simple and cool jac,

actually i am calling with the script above a little animated DIV that has an arrow on the top-middle. Using this CSS will position the DIV with the arrow exactly under the the "+" sign in the safari menu. This i looking quite nice:


<html>
<head>
<title>REPUBLIC-TEASER</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="tablet_startup.png">
<link rel="apple-touch-icon" href="icon.png">
<script type="text/javascript">function getID(x){return document.getElementById(x);}function loadIt(){setTimeout(function(){window.scrollTo(0,1);},1);if(window.navigator.standalone==true){window.location='start.html';getID('preparing').style.display='block';}else if(window.navigator.standalone==false){setTimeout("getID('installAni').style.opacity='1'",500);setTimeout("getID('installAni').style.webkitTransform='translate3d(107px,0,0)'",500);}}</script>
<style type="text/css">
body {
-webkit-user-select:none;
background-color:#333;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
background-repeat:no-repeat;
margin:0
}
body, td, th {
font-family:Helvetica;
font-size:14px;
line-height:140%;
color:#CCC
}
#installPopup {
z-index:3;
width:230px;
height:120px;
position:absolute;
top:23px;
left:92px;
background-color:#e36d51;
background-image:-webkit-gradient(linear, left top, left bottom,
from(#e36d51), color-stop(0.0227, #e36d51),
color-stop(0.0227, #bd1c08), color-stop(0.7500, #990700),
color-stop(0.9545, #990700), color-stop(0.9545, #7c110f),
color-stop(0.9772, #7c110f), color-stop(0.9772, #37080a),
to(#37080a)
);
border:8px rgba(140, 140, 140, 0.2);
-webkit-border-radius:8px;
-webkit-box-shadow:0 0 20px #000;
text-align:center;
font-weight:700;
color:#FFF;
line-height:160%;
padding:6px
}
.installPop-arrowBorder {
z-index:2;
position:absolute;
top:-9px;
left:191px;
border:16px solid transparent;
border-bottom:16px solid #282828
}
.installPop-arrowShadow {
z-index:1;
position:absolute;
top:-13px;
left:189px;
border:18px solid transparent;
border-bottom:18px solid #000;
opacity:0.5
}
.installPop-arrow {
z-index:4;
position:absolute;
top:-8px;
left:191px;
border:16px solid transparent;
border-bottom:16px solid #990700
}
</style>
</head>
<body onLoad="loadIt();">
<script type="text/javascript">if(window.navigator.standalone==true){window.location='start.html';}</script>
<div id="install" style="display:none;width:80%;height:80%;position:absolute;top:50%;left:50%;margin-top:-10%;margin-left:-40%;">
<div style="float:left;width:40%;text-align:right;">
<div align="right">
<div style="background:url(icon.png);-webkit-background-size: 75px;width:75px;height:75px;-webkit-border-radius:10px;margin:0 10px 0 10px;-webkit-box-reflect:below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.6, transparent), to(white));"></div>
</div>
</div>
<div style="float:right;width:60%;text-align:left;"><strong style="font-size:16px;color: #fff;text-shadow: 2px 2px 4px #000;">Welcome to the Republic</strong>
<p style="width:390px;">Follow the install instructions above to discover a ne dimension of WebApps. Installing the WebApp on your Home Screen will enhance your user experience. You will be asked later to allow Navigations services. Please do so if you would like to see the location based demos. The app itself will download some data to your iPad - and that is cool. This way you can ejoy this web based application without any connection to the internet - i.e. in flight mode. Pretty cool, heh?</p>
</div>
</div>
<div id="preparing" style="display:none;width:100%;height:100%;padding-top:250px;" align="center"><br>
getting new<br>
REPUBLIC READY</div>
<div id="installAni" style="position:absolute;left:-107px;opacity:0;-webkit-transition:all 500ms ease;">
<div id="installPopup">
<div style="font-size:18px;margin:1px 0 5px 0;text-shadow: 2px 2px 4px #000;">INSTALL REPUBLIC:</div>
&bull; Tap + Above.<br>
&bull; Then Select:<br>
<img src="png/install_2.jpg" width="226" style="-webkit-border-radius:7px;"></div>
<div class="installPop-arrowBorder"></div>
<div class="installPop-arrowShadow"></div>
<div class="installPop-arrow"></div>
</div>
<script type="text/javascript">if(window.navigator.standalone==false){getID('install').style.display='block';}</script>
</body>
</html>

Now that i am looking at your solution, hmmmmm.... i am asking myself if this could be done with a "show-by" overlay...

Cheers,

Sandor

sandor
17 Oct 2010, 3:50 AM
Hey Guys,

i have been playing around with the snippet posted by jacstofberg. I have modifyed a little bit the script (nothing special, just some CSS and styling stuff) and have optimized the code for iPad usage. Unfortunately i did not found a way to activate this part of the panel in the JS (<div class="x-anchor x-anchor-top" id="ext-gen1072" style="left: 25px; top: -10px; "></div>) - this is shown, when you are calling the panel with "showBy()". Maybe one of you guys have a clue on how to do this... Note: the script will NOT make sense on the iPhone, since the "+" signe is located in the bottom bar of Safari. So for what it is worth:


// Detect: If the application is not run in full screen mode on an apple device,
// notify user how to add app to home screen for full screen mode.
if (("standalone" in window.navigator) && !window.navigator.standalone){
if (!this.popup) {
this.popup = new Ext.Panel({
cls: 'gofull',
floating: true,
modal: true,
style: 'background-image: -webkit-gradient(' +
'linear,' +
'left bottom,' +
'left top,' +
'color-stop(0.7, #070f23),' +
'color-stop(0.74, #1c2335),' +
'color-stop(1, #8e9199));',
centered: false,
width: 284,
height: 145,
margin : '20 0 0 65',
padding: 8,

bodyStyle: 'background-image:-webkit-gradient(linear, left top, left bottom,'+
'from(#e36d51), color-stop(0.0227, #e36d51),'+
'color-stop(0.0227, #bd1c08), color-stop(0.7500, #990700),'+
'color-stop(0.9545, #990700), color-stop(0.9545, #7c110f),'+
'color-stop(0.9772, #7c110f), color-stop(0.9772, #37080a),'+
'to(#37080a));',

styleHtmlContent: true,
html: '<div style="font-size:24pt; line-height:12pt; color:white; text-shadow: 0px 0px 5px black"><center><strong>▲</strong></center>'+
'<div style="font-size:14pt; line-height:16pt; color:white; text-shadow: 0px 0px 5px black"><center><strong>GO FULLSCREEN</strong></center>'+
'<div style="font-size:24pt; line-height:18pt; color:white; text-shadow: 0px 0px 5px black"><center><strong>▼</strong></center>',
dockedItems: [{
dock: 'bottom',
xtype: 'button',
text: 'Add to Home Screen',
height: 40,
style: 'background-image: -webkit-gradient(' +
'linear,' +
'left bottom,' +
'left top,' +
'color-stop(0.49, #edeff3),' +
'color-stop(0.5, #edeff3),' +
'color-stop(0.51, #ffffff),' +
'color-stop(1, #ffffff));',
}],
});
}
this.popup.show('pop');
}

//end detect

Cheers,

Sandor

jacstofberg
17 Oct 2010, 7:15 AM
That looks nice. Well done. Now just the anchor:)