We Keep Coding

Phonegap Framework7 Back Button not working

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

How to save fullscreen state in Firefox?

Following Mozilla's API document on Fullscreen, I've placed the following code in my website, it simply takes the whole document (html element) and makes the page go fullscreen once the user clicks anywhere in the page, and once there's another click, page goes back to normal.
var videoElement = document.getElementsByTagName('html')[0];
function toggleFullScreen() {
if (!document.mozFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
}
window.addEventListener("click", function(e) {
toggleFullScreen();
}, false);
My question is how can I save this fullscreen state so every time that Firefox loads up, that page is still on fullscreen.
Or any workaround? This is for Firefox for Android.

It's an extreme workaround, but you can make your website a progressive web app and put "display": "fullscreen" in its manifest. Then you can launch your site from the home screen and use it like a fullscreen native app.

Following my experiments and the specs, this isn't doable, from client browser javascript
This api need an user interaction. We can't activate the fullscreen by scripting.
From the fullscreen api specification:
Fullscreen is supported if there is no previously-established user
preference, security risk, or platform limitation.
An algorithm is allowed to request fullscreen if one of the following
is true:
The algorithm is triggered by user activation.
The algorithm is triggered by a user generated orientation change.
https://fullscreen.spec.whatwg.org/#model
About activation events:
An algorithm is triggered by user activation if any of the following
conditions is true:
The task in which the algorithm is running is currently processing an
activation behavior whose click event's isTrusted attribute is true.
The task in which the algorithm is running is currently running the
event listener for an event whose isTrusted attribute is true and
whose type is one of:
change
click
dblclick
mouseup
pointerup
reset
submit
touchend
https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation
We can't trigger fullscreens from scripts, or if so, the script must be triggered by the user.
Including simulating a click won't works, this is regular behavior, made to protect user experience.
With some reflexion, we can't agree more on this, imagine any ads page can launch full screens, the web would be a hell to browse!
You told in comment: «I am the only user here»
What you can do if using unix: (( probably alternatives exists in other os )).
Using midori (a lightweight webkit browser), this will start a real fullscreen.
midori -e Fullscreen -a myurl.html
There is no ways to start firefox or chromium in a fullscreen state from the command line, to my knowledge.
But what is doable is to trigger a F11 click at system level, focusing on the good window, just after the page launch. ((sendkey in android adb shell?))
xdotool can do that.
Here is a pipe command line that will launch firefox with myurl.html, search for the most recent firefox window id, then trigger the F11 key on this window.. (Press F11 again to exit)
firefox myurl.html && xdotool search --name firefox | tail -1 | xdotool key F11
This should be easy to adapt for other browsers.
As last alternative, have a look at electron or nw.js.

take a look at this add on for Firefox, i have not tried it, as I'm posting this from mobile, it's description does say that it can force start in full screen. I'm just quoting their description .
Saves the last state or force start in full screen forever! Simple and
complete for this purpose.
Edit : And the link to it
https://addons.mozilla.org/en-US/firefox/addon/mfull/

What about using localStorage like this?
function goFullScreen() {
if (videoElement.mozRequestFullScreen) {
localStorage.setItem('fullscreenEnabled', true)
videoElement.mozRequestFullScreen();
}
}
window.onload = function () {
if (localStorage.getItem('fullscreenEnabled') === true) {
goFullScreen();
}
};
function toggleFullScreen() {
if (!document.mozFullScreen) {
goFullScreen();
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
localStorage.setItem('fullscreenEnabled', false)
}
}
}
window.addEventListener("click", function(e) {
toggleFullScreen();
}, false)

How to auto focus browser tab when clicking on browser notification in Chrome?

I am trying to setup browser notification for a project I'm working on. The code I have so far is:
// Notification permissions logic handled before...
var notification = new Notification('Title', { body: 'Message' });
notification.onclick = function (e) {
window.focus();
// this.cancel();
};
setTimeout(notification.close.bind(notification), 5000);
The notifications work fine with this code except for one thing. In Chrome clicking on the notification does not set the focus on the browser window. In Firefox this behavior is native out of the box and it works fine without on click handler defined above. I have looked for the solution for this for Chrome and found these:
How to get focus to the tab when a desktop notification is clicked in Firefox?
How to get focus to a Chrome tab which created desktop notification?
However the suggested accepted solutions do not work for me - the event is triggered but the focus is not set.
Does anyone have any suggestions how to make this behave properly?
Chrome version: Version 44.0.2403.130 m
Firefox version: 40.0

It's an hacky solution, but if you registered a service worker you could do something like this.
In the client page:
yourServiceWorkerRegistration.showNotification('Title', {
body: 'Message',
});
In the service worker:
self.addEventListener('notificationclick', event => {
event.notification.close();
event.waitUntil(
clients.matchAll({
type: "window",
})
.then(clientList => {
if (clientList.length) {
clientList[0].focus();
}
})
);
});

Now, my chrome version is 100.0.4896.127. And window.focus() works perfect in onclick of notification callback! It would be helpful to anyone who sees this issue.

Select a file from OneDrive on phone - mobile web site

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>

Is there a way to launch a popup for mobile device browser ONLY if App not already installed?

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.