I'm creating an hybrid app with Phonegap and Framework7 (v1 i guess).
I've been trying to set the "android back button" to quit the app after the user confirms it, and i've been looking at some examples but i can't get this to work. I'm using this:
$$(document).on('deviceready', function() {
console.log("Device is ready!");
document.addEventListener('backbutton', function(e) {
e.preventDefault();
navigator.notification.confirm("Tem a certeza que quer fechar a aplicação?", onConfirmExit, 'Pizzarte', 'Sim,Não');
}, false);
function onConfirmExit(button) {
if (button == 2) { //If User select a No, then return back;
return;
} else {
navigator.app.exitApp(); // If user select a Yes, quit from the app.
}
}
var mySwiper = myApp.swiper('.swiper-container', {
pagination: '.swiper-pagination'
});
});
But when I click the back button on Android, nothing happens. And the strange thing is that if i'm previewing the app using the Phonegap app this will work. Only when i install the final app on my phone, this does not work.
Please help/suggest me if I am doing something wrong.
Phonegap Developer app is a Cordova app which includes all the core plugins and a few 3rd party ones.
Your problem is you are trying to use cordova-plugin-dialogs for the confirm prompt, but you don't have it installed, so it does nothing.
So install it with cordova plugin add cordova-plugin-dialogs
Related
I released a server rendered progressive web app recently and everything works great so far.
However, Android using chrome shows a banner to download the app which is awesome, but it doesn't on iOS. Using Safari, a user needs a few clicks to get to the "Add to homescreen" feature which is bad.
So here I am, I'm satisfied with my PWA, but I would really love to be able to tell the user myself that this app can be added to homescreen.
As far as I can remember, I saw https://marvelapp.com/ doing it to add a prototype to the homescreen.
iOS - Safari currently don't support Web app install banner, like in Android - Chrome.
There is no way to programatically trigger install banner in Android as well, except for the case when you catch the beforeInstallPromot and use that to show the banner.
In the linked answer, you can check on the alternate option on how to show in app banner to guide user to add to home screen. Here is some code example for the same, which is iOS specific(look under #PROTIP 3).
For now, Apple doesn't give the possibility to make this "Add to home screen" experience easy.
You can provide a tooltip explanation to your users though, for IOs users:
Details explained here:
https://web.archive.org/web/20200809175125/https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native
in the section: PROTIP 3: Create an “Add to home screen” popup yourself!
Please note that Chrome (on Android) is the only browser that auto-prompts the user to install your PWA. You should handle iOS & other Android browsers manually.
Statistics say (updated 2021) that the top 3 mobile browsers are Chrome, Safari & Samsung internet (<6%).
You can use this code to help you prompt:
// helps you detect mobile browsers (to show a relevant message as the process of installing your PWA changes from browser to browser)
var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function () {
return navigator.userAgent.match(/Opera Mini/i);
},
Samsung: function () {
return navigator.userAgent.match(
/SAMSUNG|Samsung|SGH-[I|N|T]|GT-[I|N]|SM-[A|N|P|T|Z]|SHV-E|SCH-[I|J|R|S]|SPH-L/i,
);
},
Windows: function () {
return (
navigator.userAgent.match(/IEMobile/i) ||
navigator.userAgent.match(/WPDesktop/i)
);
},
any: function () {
return (
isMobile.Android() ||
isMobile.BlackBerry() ||
isMobile.iOS() ||
isMobile.Opera() ||
isMobile.Windows()
);
},
};
// use this to check if the user is already using your PWA - no need to prompt if in standalone
function isStandalone(): boolean {
const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
if (document.referrer.startsWith("android-app://")) {
return true; // Trusted web app
} else if ("standalone" in navigator || isStandalone) {
return true;
}
return false;
}
As for installing instructions:
Chrome - auto
Safari - Press "Share" icon then "Add to home"
Samsung internet - An "Install" icon will be shown on the top bar (I didn't quite understand if the app should be registered in Samsung Store for it to show) OR press "Menu" on the bottom bar then "Add/install to home"
Other browsers - Press menu on the bottom/top bar then "Add/install to home"
I am developing an Android-Application with cordova. The android 4.4 device is connected with a bluetooth remote control.
With the help of the documentation, I am able to catch some buttons, e.g. the "volume-up"-key:
document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);
function onVolumeUpKeyDown() {
console.log("Volume up pressed");
}
According to the cordova-documentation, there are some other Eventlisteners for keys available:
backbutton
menubutton
searchbutton
startcallbutton
endcallbutton
volumedownbutton
volumeupbutton
I want that the user gets to the settings-page of my application, when he presses the remotes menu-button, but Unfortunately this button doesn't work for me. Here is the description on the cordova site and the sample code:
document.addEventListener("menubutton", onMenuKeyDown, false);
function onMenuKeyDown() {
console.log("Menu pressed");
}
I have found an APK named "keytest", which shows the pressed keys. This app recognizes:
keyCode=KEYCODE_MENU
still, cordova doesn't fire the event... Why?
It's not documented, but you have to override the menu button to make it work
add this line
navigator.app.overrideButton("menubutton", true);
Then you can use
document.addEventListener("menubutton", yourCallbackFunction, false);
Edit - title was previously
OneDrive Web picker SDK (Javascript) cannot choose/open file on mobile
device
Auto email from SO suggests I change title as bounty period expired.
I have created a OneDrive picker in a mobile friendly website according to these instructions https://dev.onedrive.com/sdk/javascript-picker-saver.htm and it works fine on a Windows desktop.
However on a mobile browser (Android Browser & Chrome on Android 4.2, and Safari on iOS 7) the picker launches and logs me in OK, I can see the files, but when I tap to select a file the "Open" button remains disabled.
Edit, just to clarify : I do not want to upload a file to OneDrive. I want to pick a file already in my OneDrive account and pass its URL back to the page. So that I can send that URL to my server and have the server fetch the file
If I long press on my selected file a content (by that I mean like a right click menu in Windows) menu appears, with an "Open" option - choosing this just seems to make Onedrive re-load.
My code is:
<script type="text/javascript" src="https://js.live.net/v5.0/OneDrive.js" id="onedrive-js" client-id="0000000011111111"></script>
<script type="text/javascript">
var pickerOptions = {
success: function(files) {
console.log(files);
document.getElementById("cloud_cv_source_input").value = "onedrive" ;
document.getElementById("cloud_cv_file_url_input").value = files.values[0].link ;
document.getElementById("cloud_cv_file_name_input").value = files.values[0].fileName;
document.getElementById("cloud_cv_file_size_input").value = files.values[0].size;
},
cancel: function() {
// handle when the user cancels picking a file
},
linkType: "downloadLink", // or "downloadLink",
multiSelect: false // or true
}
function launchOneDrive()
{
OneDrive.open(pickerOptions);
}
</script>
I did see this at the end of the docs:
The OneDrive picker and saver supports the following web browsers:
Internet Explorer 9+
Latest version of Chrome
Latest version of Firefox
Latest version of Safari
So assume this SDK is just for desktop sites, is this correct, and if so, what should I use for a mobile site? I know there are SDK's for Android and iOS but I'm not making a native app.
Thanks.
I spent some time looking into this and doing some tests, and without having a URL to your app online (so I can test it directly and on a server) here are my initial thoughts:
Will this work on mobile devices? In theory it should if the user is browsing on their mobile with the supported devices. But when I tried viewing the reference URI you provided for OneDrive Dev Center to the JS Web Picker SDK...the page would not display the example which lets me choose the files on my Android using: Chrome, Firefox, or my wife's iPhone with Safari. Apparently, Micro$oft has chosen not to test the documentation page code on mobile versions of the browsers they state they support.
You might want to add a sanity check around your execution code (to make sure that a file was available in the response). Additionally, I see in the documentation code, they're clearing the results of the picker on cancel and selection (for viewing and saving). If you have a URI where I could test your code, I'd be happy to help more on this.
<script type="text/javascript" src="https://js.live.net/v5.0/OneDrive.js" id="onedrive-js" client-id="0000000011111111"></script>
<script type="text/javascript">
var pickerOptions = {
success: function(file) {
// Sanity check
if( !file ) {
// Handle no file being returned
} else {
var f = file.values[0];
document.getElementById("cloud_cv_source_input").value = "onedrive" ;
document.getElementById("cloud_cv_file_url_input").value = f.link ;
document.getElementById("cloud_cv_file_name_input").value = f.fileName;
document.getElementById("cloud_cv_file_size_input").value = f.size;
} // end if
},
cancel: function() {
// handle when the user cancels picking a file
},
linkType: "downloadLink",
multiSelect: false
}
function launchOneDrive() {
OneDrive.open(pickerOptions);
}
</script>
This is a very general question and maybe difficult to ask, but the thing is that I have a Phonegap aplication with two buttons in the main page.
One button is to list all the customers I have in my database, and the other button is to synchronize the database, so the user can download de customer's information from the server.
On Android 4.0 and over, it works great, but, when I run it on Android 2.3.6 and under, the synchronization button stops working. This the code:
HTML
<div data-role="button"><img src="images/synch.png" class="iconGrid" onclick="syn()"/></div>
JS
function syn(){
alert(0);
var synchronizationManager = new Test.mobile.SynchronizationManager();
synchronizationManager.synchronize();
}
JS 2
Test.mobile.SynchronizationManager = function(){
function synchronize(){
alert(1);
synchronizeCustomers();
}
function synchronizeCustomers (){
alert(2);
}
return {
synchronize:synchronize
};
};
So fat, only 0 and 1 messages show up. It never gets to alert(2). Once again, this happens only in Android 2.3.6 and under. In Chrome and Android 4.0 it works just fine!
Im really stuck here. Any ideas?
I am looking for a way to launch a popup when a website is viewed via a mobile browser, asking the user if they would like to install our App. But I only want the popup prompt to appear if the App is not already installed.
I have used the following JavaScript (which will work for Apple devices:
<script type="text/javascript">
if( /iPad|iPhone/i.test(navigator.userAgent) ) {
var url=confirm("Would you like to download our mobile application?");
if (url==true)
{
var url = window.location.href = 'http://www.itunes.com';
url.show();
}
else
{
}
}
</script>
As has been discussed here: App notification popup mobile device web browser
However, this popup launches on iOS regardless. I understand you can check for an app url scheme (and so find out if the App is installed) here: How to launch apps (facebook/twitter/etc) from mobile browser but fall back to hyperlink if the app isn't installed
Can I accomplish this by incorporating these two techniques?
You can use this if your app has a custom URL scheme:
<script type="text/javascript">
function startMyApp()
{
document.location = 'appCustomScheme://';
setTimeout( function()
{
if( confirm( 'Install app?'))
{
document.location = 'http://itunes.apple.com/us/app/yourAppId';
}
}, 300);
}
</script>
and call the function startMyApp() on page load, or if you need to bind it to some javascript event (click, etc.).
If you are trying to detect whether twitter or Facebook is installed in your device you can use this in your script.
var url = window.location.href = 'fb://';
for twitter
var url = window.location.href = 'twitter://';
If it does not work, try taking out the //. The above statements will open the twitter or facebook app, you can use that in a if loop or something to detect whether a app is installed on the device.