Apple says in the Safari HTML reference that the below code is supposed to make the the web-app full screen on iPhone OS 2.1 and later.
<meta name="apple-mobile-web-app-capable" content="yes">
But it doesn't seem to work. Is there a way of hiding the title/location bar within Safari in an iPad WebApp?
This only works after you save a bookmark to the app to the home screen. Not if you just browse to the site normally.
If you want to stay in a browser without launching a new window use this HTML code:
<a href="javascript:this.location = 'index.php?page=1'">
First, launch your Safari browser from the Home screen and go to the webpage that you want to view full screen.
After locating the webpage, tap on the arrow icon at the top of your screen.
In the drop-down menu, tap on the Add to Home Screen option.
The Add to Home window should be displayed. You can customize the description that will appear as a title on the home screen of your iPad. When you are done, tap on the Add button.
A new icon should now appear on your home screen. Tapping on the icon will open the webpage in the fullscreen mode.
Note: The icon on your iPad home screen only opens the bookmarked page in the fullscreen mode. The next page you visit will be contain the Safari address and title bars.
This way of playing your webpage or HTML5 presentation in the fullscreen mode works if the source code of the webpage contains the following tag:
<meta name="apple-mobile-web-app-capable" content="yes">
You can add this tag to your webpage using a third-party tool, for example iWeb SEO Tool or any other you like. Please note that you need to add the tag first, refresh the page and then add a bookmark to your home screen.
It only opens the first (bookmarked) page full screen.
Any next page will be opened WITH the address bar visible again.
Whatever meta tag you put into your page header...
This site has a working workaround, same effect, uses some javascript to set the first child div to total height of viewport.
http://webapp-net.com/Demo/Index.html
Looks like most of the answers on this thread have not kept up. iOS Safari on iPads have fullscreen support now and it's very easy to implement using javascript.
Here's my full article on how to implement fullscreen capability on your web app.
Related
This question already has an answer here:
In mobile Safari, website added to Home screen, shows gray bars on the top and bottom when navigating pages, how to make it full screen?
(1 answer)
Closed 1 year ago.
Have an iPad Web Application1 which will be saved to the user's home screen and function as an app.
We're using the below meta tags so it functions with as minimal UI as possible on iPad.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Initial load of the application is good with an expected small UI:
Minimal chrome
The issue comes when the user navigates to a new page. The Safari forward/back buttons appear, even if there is no history.
Expanded chrome
Question: is there any way to stop Safari from adding an expanded status bar?
This is a NextJS app if it helps, using the built in router.
1 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
The manifest.json was not loaded for the application. This made pages after the first load add the extra chrome. Incorporating missing manifest.json fixed the problem.
Same as this question:
In mobile Safari, website added to Home screen, shows gray bars on the top and bottom when navigating pages, how to make it full screen?
I have a PWA saved on the home screen, this opens up standardly without search bar nor the bottom buttons (share, tabs, etc..).
So every link gets opened inside the PWA, and that is expected.
I have a problem when showing pdfs as they normally open in Safari with the "share" button and all the bottom bar, but in the PWA they open up without bottom bar and without any share button.
So my idea is to open the PDF link (http://www.mywebsite.com/download/pdf/12345) in a new safari window,.
I tried putting target="_blank" on the PDF link but this did not solve the problem.
I also tried forcing the iOS behavior by opening the app in safari with safari://http://www.mywebsite.com/download/pdf/12345 but with no luck.
How do I open a New Safari window to a link?
OK, the ONLY working solution is to tell iOS you are going onto another domain.
PWA stays in your app frame ONLY if you stay in the same domain.
To open a link within your domain in an EXTERNAL window (or inside the PWA but with Safari standard controls) you have to send it to an external/different domain.
So the PWA is on https://www.mywebsite.com/ and you want to open a PDF with all Safari control buttons, you just create a SUB domain and point the link to it, like https://media.mywebsite.com/download/pdf/12345 at this point the PWA thinks you are on a different domain and does the correct rendering! 🎉
You can try to use window.open(url).
But, remember to put it in an element with onclick event attribute.
For example,
<button class='btn' onclick='window.open("https://www.google.com", "_blank");'>Open Google search</button>
Reference: window.open(url, '_blank'); not working on iMac/Safari
EDIT
You can set a scope in manifest.json to customize where to open an external link.
You can refer https://developers.google.com/web/fundamentals/web-app-manifest on the property scope.
I've used Vuejs and Framework7 in my PWA. I want to open a remote PDF file in my PWA and also it's important to me that users be able to back to my PWA after opening PDF. I did this using :
window.open(pdf_url, "_blank");
And it works fine for iOS > 12 and after opening pdf file there is an "OK" button for closing pdf.
But for example in iOS 11.3 there is no button and user has to use home button to close PWA.
I tried to solve problem using iframe but I can show only first page of the pdf.
Is there any way to fix this issue?
You can resolve this issue by doing some tricks (for any device without back button):
if you use iframe, you can set height manualy with overflow scroll, and I think this will resolve issue (dependence of style or lib dependency, so that may be not work).
you can add back button to your navbar, or Toolbar to let user click on it to back to previous page. (I prefer this solution).
you can render pdf in popup nested of normal html page, and then you can customize popup component by handling back button, or handling close by dropback overlay.
I use second and third point in real project and its work fine...
This is sample close button code used in popup:
'<p>'+ i18nextHelper.i18next.t('Exit From PDF') +'</p>'
Note: You can also customize height page for pdf page only, and add normal button bellow it, or by add absolute positioning button above PDF, but I think if you use second or third point will be best.
Good luck.
For some websites/webapps, using Mobile Safari on the website causes a pop-up to come up advising the user that they can add the site/app to their home screen. I tried to replicate it but I can't figure it out.
Is there a JS library to do this or is there a meta tag to add to my html?
Most of them use add to home screen from cubiq
I noticed that if you go on google chat, and "add to home screen", once you open it from home screen, the browser disappears and all you see is the website itself... I'm wondering how google managed to do that? this is for a website I am making that is supposedly compatible for the iPad.
Add the following meta tag to the page's header:
<meta name="apple-mobile-web-app-capable" content="yes">
The window.navigator.standalone boolean JavaScript property will indicate whether the page is currently displayed in full-screen mode (it will only be displayed full-screen if launched from a home screen icon, not if visited from within Safari).
To keep all links from 'breaking out' of the full-screen mode, see this