I have a strange problem with a website I've developed for one of our clients. What I'll do is bookmark the home page using the "add to homescreen" Safari menu item. I will then browse around for a while and then go back to the phone's home screen, e.g. if someone calls me or I'm checking mail or whatever it is iPhone users do. When I tap the bookmark on the homescreen, I will be taken to the login page. When I log in, I'm taken to the home page as normal, but if I try to navigate anywhere else, the link opens in a new browser instance. I know this because my bookmarked link opens a Safari session in full screen mode, but the new browsed link opens a Safari session with the address bar and other goodies visible. I then have to log in again, but this time everything works fine.
It's only when I use the bookmarked link that it does this weird login thing. THe site works perfectly well on desktops (Mac and PC) as well as Android and Windows Phone 7.x and 8.x devices.
Right, so anyway, the problem was that another developer added the meta-tag <meta name="apple-mobile-web-app-capable" content="yes">. What that does is tell IOS that the webpage supports offline mode. Unfortunately, ours doesn't. I changed the tag to <meta name="apple-mobile-web-app-capable" content="no"> and all was well.
It's not a problem in our case because the meta tag was put there by mistake. We simply needed the meta tag for the nice homescreen icon and the above tag was also in the code snippet.
Related
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).
I have a mobile-friendly web application which I want users to be able to access from a link sent in an email or text. The link will include a querystring parameter specific to that user, which controls what the web site displays. This link might look like this:
https://corpsite/myapplication/?show=578
When the user goes to this URL using safari, the site grabs some information which is correct for the "show=578" parameter and all is good. (Security is not a factor here.) But after the application is installed to the home screen with the "Add to Home Screen" function of the iPhone 8 I am testing with, the URL which opens upon clicking the home screen icon is:
https://corpsite/myapplication/
The querystring information is not preserved! (I ultimately wrote some debugging code that tells me the full URL when the application loads. When I click on the link from an email and go there in Safari, the reported URL includes the querystring. But when I then save that page to the home screen and later click on the home screen icon, the reported URL does not include any querystring information.)
I have added this to the index.html page of the (Angular 5) application, which I thought would be all I would need to do (aside from some icon-related tags):
<meta name="apple-mobile-web-app-capable" content="yes">
How can I make this work from the home screen icon?
I found the source of my problem here:
PWA loses its params and query params after being added to the home screen.
It turns out that I was setting the start_url in my manifest.json file, and that was overriding the value in the browser. I just removed that setting from the manifest.json file, and the phone then used the URL from the browser when saving to the home screen.
I started my applicaiton, its open an url in safari. On my website the user can login and do some work. After the user did it the website redirect to the universal link. At first it is working fine, but if the user start again my application, open my website from it (the safari already show my website), login again and redirect to the universal link, show the universal link, and on the top I see a bar where i can open my application.
If the user didn't login to my website, just clicked on the button to redirect to my universal link the ios9 open my application.
Have you got any idea, what's wrong? Maybe the iOS 9 doesn't like the autoredirect to universal link?
Universal links does not work with redirections.
check https://stackoverflow.com/a/32751734/127493
I just been on a similar issue where I clicked the link on the top right side of the screen, disabling the automatic opening in my app.
since you see the banner, the user has to scroll a bit (to show the banner "open" ) and all redirections will occcur on your app again (and not safari)
I'm not a heavy coder here, so i'll ask my best.
We made a brochure about our home town. However users spreading it trough facebook cant open the links when in their facebook app. The app does not send it to safari either. If opened directly from safari it is no problem.
The link is http://visit.lodingen360.com
Is there anything i can do to the site/index.html/whatever that will make it open in safari when the link is clicked in the facebook app for ios? (that won't affect visiting the site from pc's and so on)
Is there anything uiwebview won't read that can force it to safari, so that we can redirect from the thing opened in safari to the site?
Your page will load and display in Mobile Safari, I tried with UIWebView and it will load without displaying an error, but the brouchure page content won't display.
Safari and UIWebView have different user agent's - therefore my guess is that because your site uses flash but it checking for the type of browser you are not performing the check correctly for UIWebView and the page is attempting to use flash which isn't supported.
Is there anyway that I can create a link that when clicked on an ipad, it will open in a new full screen window (no address bar/tabs/etc)?
At the moment, the only way that I am aware of to open a page in safari without the safari chrome(address bar/tabs/etc) is to add the <meta> tag following to the <head> element in the source.
<meta name="apple-mobile-web-app-capable" content="yes">
Note that for this to work, the user must bookmark the page on their home screen. Apple provides a number of other meta tags as well that can add a 'native app' look and feel to the user's experience. All of which can be found in the documentation.