In iOS, android I can show a webview and when it redirect to an url, I can detect it.
(like login via facebook, google ..vv..)
I want to do the same thing with cocos2d-html5 or cocos2d-js. (for web-browser)
I just try below code but nothing happened
window.open('http://webdesign.about.com/',
'open_window',
'menubar, toolbar, location, directories, status, scrollbars, resizable, dependent, width=640, height=480, left=0, top=0');
How can I tell web-browser open new tab for me?
====== UPDATE ======
My browser stopped all popups. my bad.
But I don't how to observe a Window object in javascript to know when it goes to new url.
I saw all thing about window at http://www.w3schools.com/jsref/obj_window.asp but I don't see something like that :(
Related
I'm testing on iOS 13.2 this link from a webpage:
Open IG
It first opens the IG app, and then right away opens IG in Safari, and below displays a message if I want to switch to the app.
why does it make two actions at once?
I want to make only one action - either have it open Instagram right away with the correct path, or open instagram in web version right away.
I know I can use this link format instead:
Open IG 2
But it is not the format I wish to use, but I'm not sure if it supported on all phones, and also it might do nothing if a user does not have the app installed, right?
We were surprised we didn't find any mention of this anywhere online, so we're posting here in hopes we find a solution.
Using an iPhone with mobile safari is when we hit this issue running the 2 easy to follow tests below, one works, one doesn't.
Here is the link
https://pwa-react.netlify.com/
Here are the 2 tests we run (both listed in the link), one works when not in PWA mode, and the other fails when in PWA mode.
Test #1: Works Perfectly (Expected Behaviour)
Visit https://pwa-react.netlify.com/ from iPhone in mobile safari
1. Make sure you have google drive on the phone but not logged in.
2. Click "Choose File". It will show you the list of options to choose from.
3. Click "Browse" to look for the photo.
4. Click "Cancel" and you're back here.
5. Click "Choose File" it will still show you the list of options to choose from.
This works perfectly in mobile safari but NOT in PWA mode below.
Test #2: Does NOT Work (Unexpected Behaviour) (PWA)
Visit https://pwa-react.netlify.com/ from iPhone in mobile safari, hit the share
button, then add to home screen. This will add the PWA app on your phone. Open App.
1. Make sure you have google drive on the phone but not logged in.
2. Click "Choose File". It will show you the list of options to choose from.
3. Click "Browse" to look for the photo.
4. When it shows you the Google Drive logo with Sign In, double click the home
button, then go back to the PWA.
5. Click "Choose File" it will NOT show you the list of options to choose from.
This is now 100% broken.
The ONLY way to fix it is to go to Settings>Safari>Clear History and Website Data (all the way down)
How can we fix this so when the user hits "Choose File" it shows the list of
options to choose from in the PWA?
Screenshot #1: These are the options that appear in Test #1 and stop appearing in Test #2
Screenshot #2: This screen allows us to cancel in Test #1 but it disappears in Test #2
Any idea how to get Test #2 to work by allowing us to choose the upload options like in Screenshot #1 without breaking the app and having to go to safari settings to clear history and website data for it to function again?
PS - Here is the repository file pwa-react/src/App.js
We were facing almost exactly the same issue in our PWA, so first, off I want to thank you for helping us narrow down the cause.
After reviewing the iOS PWA lifecycle (article here) and a couple maddening hours of trial and error I was able to figure out a solution that is semi-acceptable.
My guess at what is happening when you leave the app mid-upload (Test #2) is that there is some internal context in how iOS handles PWA's that is not being reset, so when you go back and try to upload a file again it thinks that the upload dialog is already open.
The article mentions that opening external links without target=_blank will cause the PWA context to be deleted, so when the in-app browser closes, the PWA page reloads in the standalone window. I thought that might reset the "detached upload" context, and it ended up working.
So I created a page hosted on another domain, and linked to it below our upload button in the PWA:
// not sure the target={'_self'} is necessary but not risking it
<a href={'https://externalDomain.com/reset'} target={'_self'}>
Having Issues? Reset Upload
</a>
This works decently well, minus one issue. When you click this link it opens the in-app browser, but there is no "Done" button or navigation tools for the user to know how to exit. Linking back to the PWA does not work, because iOS detects that and does not reset the app context. What I did notice was that if I navigated to another page from the first external page (I originally just tested this with google.com), the "Done" button would show up, making it obvious how to exit.
With that knowledge, I guessed that you could probably just do window.history.pushState to achieve the same effect, which works. My final solution is below. It causes the entire app to reload when the user presses Done from the in-app browser, but that's far better than having them re-add to the home screen in my opinion.
const Reset: React.FC = props => {
React.useEffect(() => {
// Redirect any wayward users who find this page from outside the PWA
if (!window.matchMedia('(display-mode: standalone)').matches) {
navigate('/');
}
// push an additional page into history
const newUrl = `${window.location.href}?reset`;
window.history.pushState({ path: newUrl }, '', newUrl);
}, []);
return (
<Grid container>
<ArrowUpIcon />
<Typography variant={'h5'}>Press done above to return to App</Typography>
<Typography variant={'body1'}>Sorry for the inconvenience!</Typography>
</Grid>
);
};
Hope this helps! Would love to hear if it works for you.
Edit After Production Testing:
An additional important note is that your "reset" page must be on a completely different domain for this to work. Ran into this today in production, because our reset page was on a subdomain with the same root as the PWA, iOS was not resetting the entire PWA lifecycle.
SUMMARY
Key Issues:
Leaving an iOS PWA while any of the "file upload" dialogs are open ('Take Photo', 'Photo Library', or 'Browse') breaks the iOS PWA lifecycle.This breakage makes it impossible for the user to open any "file upload" dialogs when clicking on a file input.
In order to fix this issue, the PWA context must be completely reset.
It seems that the only ways to reset the PWA context are to restart the phone, delete the app and re-add it to the home screen, or to open an external link.
When opening an external link, the "Done" button that closes the iOS PWA embedded browser will not show on the initial page. The user must navigate to an additional external page in order for the "Done" button to show.
External links do not trigger a reset of the PWA context reset when they have target="_blank".
Solution:
In order for the user to be able to upload files again, the PWA context must be reset. The easiest way to do this (in my opinion) is to ask them to open an external link.
(In PWA): Present a link to the user to fix the fact that the upload dialog is not showing. The link destination must be a completely unrelated domain (not a subdomain) and must have target="_self" (issue #5).
(External Page): Once the user clicks on the link and the external page opens, there will be no visible way to leave the page (issue #4). To resolve this, you can use history.pushState to simulate navigating to an additional page.
(External Page - Bonus): To make it clear to the user that the issue has been resolved, add an arrow in the top left pointing to the "Done" button (as shown in my screenshot).
The "start_url" works for Android browsers, but for iPhone, Safari always uses current page's URL and ignores the "start_url".
For example, the current page is https://test.com/index.html, on manifest the "start_url" is set to be "start_url": "index.html?flag=1", but when the page is added to home screen on Safari, it still uses https://test.com/index.html, without the parameter.
Is there a way to apply a different URL as the start up URL for Safari?
A hacky solution I've implemented here is to silently change the URL on the page you prompt the user to install the PWA with: history.pushState({}, "", "/"); (see: https://stackoverflow.com/a/56691294/827129)
This will update the URL but won't cause the page to reload or refresh the DOM, so you can see the page you're on as normal, but when the user goes to install the PWA (Add to home screen) it'll save the root URL, so that's what they'll see when they open the PWA.
Downsides here include:
the URL in the address bar will update (not a big deal on mobile)
if the user presses the back button they'll go "back" to the page you triggered the history.pushState() on, so they'll need to press back twice to actually go back
if the user refreshes the page they'll see the homepage
In my use case this is good enough, there might be extra solutions to handle these issues that could be applied on top of this solution to improve UX.
try this url format
"start_url": "./index.html?flag=1"
I have a scenario where I have to load an external URL within an App. I also want to come back to the App from the external browser.
`var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');`
I tried this and this is giving a DONE button, which brings me back to the App. However this shows the URL of the external page. I dont want the user to see the external URL. Is there any solution to this? Please help!
The situation is like this:
User opens app from a website using a custom urlscheme
User does stuff in the app
User clicks button in the app to return to the website in Safari.
I have tried opening a new tab containing a javascript:window.close() but this does not work on iOS 6.1.
So my question is: Is there a way to open Safari to view the website the user left from? Either with a working new tab that closes itself or a different route?
When you open the app with your custom url scheme, pass the actual page url as an argument.
mycustomUrlScheme://mydomain.com?objectid=1234&callback_url=encoded_url
In your app, handle the url for the content info and keep the page url to open it afterwards. It will make safari open a new tab. But that should be a good start.
As far as i understand you can do it.
user opens mobile safari for example http://www.example.com
user clicks a link that is appscheme://open and the application become active
user taps a button to open safari for example http://www.example.com?q=test
for the third step you can use [[UIApplication sharedApplication]openURL:url]