In previous iOS (12 and before) or any Android phone, we are able to use the [Add to Home Screen] in Safari (or any browser in Android) and hide the toolbars of a PWA by using the following techniques:
in Index.html:
<head>
<meta name="viewport" content="viewport-fit=cover, width=device-width,initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<link rel="apple-touch-icon" href="/customicon.png"/>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="BGBG01">
<meta name="apple-mobile-web-app-title" content="BGBG01">
<meta name="msapplication-starturl" content="/">
<link rel="manifest" href="manifest.json">
</head>
Create a file manifest.json in the root directory, with the following content:
{
"name": "App Full Name",
"short_name": "AppName",
"lang": "zh-CN",
"start_url": "/",
"scope": "/",
"display": "standalone"
}
However, since iOS 13, the above method does not work anymore, the toolbars persist and we need to click the aA on the left hand side of the Address Bar, then choose [Hide Tool Bar] EVERY TIME, in order to hide the toolbars of the PWA.
So how can we hide the toolbars?
Edit
Just want to emphasize that the following js code does not work as well:
<script>
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
/* iOS hides Safari address bar */
window.addEventListener("load",function() {
setTimeout(function() {
window.scrollTo(0, 1);
}, 1000);
});
}
</script>
or
<body>
<button id="goFS">Go fullscreen</button>
<script>
var goFS = document.getElementById("goFS");
goFS.addEventListener("click", function() {
document.body.requestFullscreen();
}, false);
</script>
</body>
And the solution provided by this link is also not working:
https://codepen.io/akikoo/pen/xdaic
Can be smart and efficiently for your case this method?
Using this minimal webmanifest the menu bar disappear for you too?
{
"name": "My Super App",
"short_name": "My App",
"display": "standalone",
"scope": "/my-app-path/",
"start_url": "/my-app-path/"
}
Related
I have created a SAP UI5 Popover using Fragment. The fragment has XML code for opening the popover window.
My requirement is that when the popover is open and when the mouse pointer goes outside the popver (not mouse click outside), then the popover should close automatically.
Please help me with this.
You can use so called "Event Delegates".
See this little Demo:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.layout,sap.f"
data-sap-ui-theme='sap_fiori_3'></script>
<script>
var btn = new sap.m.Link({
text:'Hello World',
press: function(evt){
var pop = new sap.m.Popover({
title: "MyPopOver",
placement: "Bottom",
contentWidth: "200px",
content: [new sap.m.Text({text: "My Text"})]
})
pop.addEventDelegate({
onmouseout: function() {
pop.close()
}
}, this);
pop.openBy(evt.getSource());
}
});
btn.placeAt('content');
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
Beware, this one already closes, if you touch a text inside the popup, but you'll get the generell idea.
i have included view-port meta tag in header i.e.
<meta name="view-port" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
but in iPhone screen..its allow user to zoom screen using pinch in/pinch out.
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
I developed a simple application for FIrefox OS and I want to sumulate it on Firefox OS Simulator. When I load my application it, I get Validation: OK but my app is not installed in the simulator. I saw the same question here before, but the other guy's problem was that his manifest file had an incorrect name, but mine is named manifest.webapp. Here is my code:
manifest.webapp
{
"name": "Ejemplo Computo Movil",
"description": "Your new awesome Open Web App",
"launch_path": "/index.html",
"icons": {
"16": "/app-icons/icon-16.png",
"48": "/app-icons/icon-48.png",
"128": "/app-icons/icon-128.png"
},
"developer": {
"name": "Eugenio Kuri Sainz",
"url": "http://yourawesomeapp.com"
},
"permissions": {
"desktop-notification": {
"description": "Necesario para la creación de las notificaciones del sistema."
}
},
"locales": {
"es": {
"description": "Ejemplo de aplicación Open Web",
"developer": {
"url": "http://yourawesomeapp.com"
}
},
"it": {
"description": "Il vostro nuovo fantastico Open Web App",
"developer": {
"url": "http://yourawesomeapp.com"
}
}
},
"default_locale": "en"
}
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ejemplo de aplicación para IOS</title>
<!--[if le IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="scripts/respond.js"></script>
<![endif]-->
<!-- The following two elements pull in the styles for the default template functionality -->
<link href="styles/install-button.css" rel="stylesheet" type="text/css">
<link href="styles/normalize.css" rel="stylesheet" type="text/css">
<!-- Below is your custom application stylesheet -->
<link href="styles/app.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Esta es una aplicación para IOS</p>
<button id="install-btn">Install app</button>
<!-- The following element pulls in the script for the default template functionality -->
<script src="scripts/install.js"></script>
<!-- Below is your custom application script -->
<script src="scripts/app.js"></script>
</body>
</html>
index and manifest are on the same folder.
Thank you very much for your help.
Your manifest.webapp is alright. Please try by re-installing the simulator. And Remember to download the latest Stable Simulator
I'm using the Barcode Scanner plugin with Cordova, and the camera keep freezing when I navigate through my app.
It throws the following warning in XCode :
Warning: Attempt to present <CDVbcsViewController> on <MainViewController> while a presentation is in progress!
Do you have any ideas how I could solve this issue ?
edit:
Maybe it has something to do with Backbone as I'm browsing the app. The Barcode scan goes well when i'm on the homepage, but as soon as I change the page, it's freezing and I got the warning.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title>Project</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<script data-main="js/main" src="js/lib/require.js"></script>
</body>
</html>
plugin_cordova.js
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"file": "plugins/com.phonegap.plugins.barcodescanner/www/barcodescanner.js",
"id": "com.phonegap.plugins.barcodescanner.BarcodeScanner",
"clobbers": [
"cordova.plugins.barcodeScanner"
]
}
]
});
my backbone view
define(['jquery','underscore','backbone'], function($, _, Backbone){
var myView = Backbone.View.extend({
initialize: function(){
/* ... */
},
render: function(ev){
/* ... */
}
startScan: function(e){
e.preventDefault();
cordova.plugins.barcodeScanner.scan(this.scanSuccess,this.scanError);
},
scanSuccess: function(response){
alert("We got a barcode\n" +
"Result: " + response.text + "\n" +
"Format: " + response.format + "\n" +
"Cancelled: " + response.cancelled);
},
scanError: function(error){
alert('Error: '+error);
},
});
return myView;
});
Thanks!
I also faced the similar warning recently. After some investigation, triggering the barcode scanner more than once at the same time will have this problem. This could be due to multiple times binding of the button that trigger scanner.
On my jQuery Mobile project I'm using the following code:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
I'm getting the Safari browser address bar and nav footer. How can I hide those so I can just have my app showing?
You can setup a few meta tags to tell iOS that your site can be added to the Home Screen as a web app. Once launched from there, all of the Safari elements are hidden.
Check out the section titled "Hiding Safari User Interface Components" here.
You can specify start up splash screen images and custom icons for the app as it appears on the home screen.
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<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="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-startup-image" href="apple-touch-startup-image-320x460.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="apple-touch-startup-image-768x1004.png" />
You should not need a <meta> tag. jQuery mobile should take care of hiding the address bar on iOS. Never been able to get the nav footer disappear myself.
Rob,
try adding below script. This should do the trick of opening new request in the same window
<script type="text/javascript">
window.onload = function () {
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
if (a[i].className.match("noeffect")) {
// Does nothing
}
else {
a[i].onclick = function () {
window.location = this.getAttribute("href");
return false;
};
}
}
};
</script>