I am working on a PWA and I have a page with a full screen modal in it, which pops up upon a button click to perform a specific action.
On the modal I have a close button tied to a function which works fine in closing the modal. However I noticed that on most native apps, when a modal is active clicking the (android) back button in a UI like mine closes the modal instead of going to the previous view.
My concern is if it were possible to listen to the android back button being clicked, prevent the default action and call another action. Or if there's anyway else around this!
I've made researches but all I can see is handling the browser back button, which in my case does not work. Tested on samsung A30,S10,A50.
From the Suggested question which I had gone through, There's no answer concerning how to handle the back button, Only on how to intercept it. And none of those answers my question.
Kindly note, PWA is already installed, hence in standalone mode
There is no way to handle the back button of Android in the PWA environment.
It is a system button which "clicks" the history.back() of an open browser. If there is no back-history it closes the browser.
But it doesn't know anything about this special button. There would be the need for something like the keypress-events. But there is no standard and so no implementation in the browsers.
The only way to handle this stuff in your app, is to manage the history.state in your app.
Push a new state with opening the modal. And close the modal in the popstate-event.
https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API
Related
I need to be able to detect when a user re-opens their browser after they go to their homescreen by clicking the home button on a mobile phone.
Is there an event I can subscribe to or something?
EDIT: To make this extremely clear, I am looking for a solution based in the web, not a mobile app. I need a js event or something to detect when my website is reopened.
The unload event can be monitored to check if the page has been closed dues to navigation away from the page or specific user action has been take to close the page.
The beforeunload evemt is similar to unload but it may be possible to ask if the user wants to stay on the page. If you want to debug when this event occurs I would suggest saving a message in local storage and logging (or otherwise alerting) it in debug code when the page is loaded again.
The blur event can be used to see if the page has lost focus by checking the relatedTarget property of the event object - if focus has been transferred off page it will be null.
None of these can implicitly check if the user actually went to the home screen and came back, and I would consider it a security breach if you could tell exactly. The blur event can at least tell if the page has lost focus, but will fire in a desktop environment if the user clicks on, say, the address bar.
Our site has an issue where the browser back button is not returning you to the page you navigated from. Specifically, this occurs when you click a link to navigate to our home page and the browser back button is then not working. We need a temporary fix to this problem until we can correctly resolve this issue.
So, is it possible to have some jquery or javascript that does the following:
If a user is on a specific page (for example, www.abc.com/index.htm), and the user clicks the browser back button, force the browser to display the page www.xyz.com?
I am not a software developer so my knowledge of coding is fairly rudimentary and I do know that changing the default behavior of the browser back button is not good practice.
This seems like a simple fix, but I can't find any information!
Our mobile site in Safari has been sporatically displaying a dialog saying 'Open this page in "App Store"?' with a cancel and open button, both of which dismiss the dialog but don't do anything beyond that. This dialog doesn't come up all the time, but we have nothing explicitly calling this dialog and want this gone.
We do have a smart banner for our app. We also have 2 buttons in our site source to download/open the app from the page, which links with a specific appstore URL. I have a feeling this has something to do with this dialog but I don't know what.
Can anyone provide more information about this dialog? What can we do to prevent its appearance?
If it makes a difference, we're testing this mobile site with an iPad running iOS 7.
I've included this blurred out screen shot to focus on the unwanted dialog.
I got the same problem for IOS 9.0 and IOS 8.4 and after trying almost everything i found the solution. On click of button which shows this pop-up you must be doing some asynchronous call and on getting the response if you do window.open(someUrl) you will always get this pop-up. You can solve this by making that call sync or get the url even before click on the button and just do window.open with that url. I changed my call to sync this issue is solved.
I am using PhoneGap 2.9 on a Galaxy S3 Android 4.2.1 to develop an application. In the application i have overridden the default back button behavior. The back behavior is simply a call to :
window.history.back();
I have 4 html pages. After navigating all the way to page4.html, I hit the back button and successfully navigate to page3.html. On page3.html I must hit the back button twice in order to successfully navigate to page2.html. It seems to behave this way regardless of the navigation plot. The first "back" works fine, all subsequent ones require a double tap of the back button.
Stangely, when I put an alert("going back!") just before the call to window.history.back(),it displays properly for every "back" tap in the navigation. What could be causing this?
I'm not exactly sure how you are calling window.history.back() but you could do something like this:
$("#backButton").bind("click", backClicked);
function backClicked(){
window.history.back();
}
and I highly recommend incorporating the fastclick.js library to any project that you want responsive buttons.
I have a simple logon page. When the user is validated, the window navigates to a new page. The javascript is window.open('http://www.google.com',"mytest",'toolbar=no'); My expectation is that when it navigates away from our logon page and opens the google site that the back button would be disabled. But it's not. Does anyone have any idea why?
It depends on your browser. Ultimately, all you can do with javascript's window.open() is tell the browser what you'd like it to do, but it's not obligated to do it. Browsers can and do ignore some directives based on user preferences.
I believe the option your looking for is 'location=no', as that hides the address bar and therefore the back button too. The toolbar is things like favorites/etc.
This is bad practice - what happens if the user has javascript disabled? If the browser prevents the js from removing the toolbar of the main window?
Instead, amend the logon page to detect whether the user is logged in before showing the login form. If logged in, show a message saying so instead of the form - that way, a user clicking back won't be a problem.
I find it very annoying when a website messes around with my browser window, and generally don't come back.
This is what worked for me. Instead of disabling the back key. I listen for on unload event. I then write the following in javascript:
window.onbeforeunload = function () { return "You should not press the back button while in this application. If you continue, your work will not be saved and you will need to log back in."}
Java Script pops a dialogue box with OK and Cancel options. If the user clicks cancel. The application stays right where they are. The script is embedded within the tags. For me this is the ideal solution. I found this at
http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript