When I enter http://pattern.dk/sun/ (web mobile app) it asks me to add it to homescreen of iPhone. Otherwise I only see "add to home screen" message and not actual application. Adding it to homescreen and running it from there makes it display application.
But I would like to open that application in Chrome. Setting "iPhone iOS5" user agent in Chrome makes it display the same "add to home screen" message and not application itself.
I'm wondering what are the differences between entering application added to iPhone's home screen and Safari entrance? Can I see that application in Chrome in any way?
The distinction can be made using JavaScript:
if (window.navigator.standalone) {
// Web app on the homescreen
} else {
// Mobile Safari
}
Related
I have a Progressive Web App that meets all the Google Chrome criteria for installation and passes the Audit tests. Using Chrome, when I surf to the PWA's URL and select "Add To Home screen" (either from the menu or from the popup) it will install as an app via WebAPK - as expected. The correct icon shows in the app list. However, the app icon is not added to the Home screen - it is not on any of the home screens.
Shouldn't it also be added to the home screen as that is the expectation of "Add to Home screen"?
This SO thread suggests adding to both is the usual functionality. But that is not happening for me. PWA add to home screen does not work as expected
If it should also be added to the home screen, any suggestions as to what I may be doing wrong or where to investigate?
If it doesn't also add to home screen - shouldn't it? Or change the menu item to "Install App" - so the user expectation is set correctly?
EDIT 2021-09-18:
It's been 2 years since this post and I've been distracted with other things (as many have the last 18 months). But coming back to this project, I still have this issue. Thanks to CherryDT for suggesting to update this post instead of creating a new one.
I created a minimal PWA (called PWATest) that successfully registers a service worker and shows the browser prompt to install the PWA. The browser prompt in Android Chrome (now Version 91.0.4472.124) shows at the bottom of the mobile screen and says "Add PWATest to Home screen". When I tap that prompt, the "Install app" dialog shows and I select "Install". I see "Adding PWATest...". After it is installed, the app icon is in the applications area with all the other app icons but there is no PWATest icon on the home screen (any of them).
I have cleared the cache and asked a friend to try with no difference.
I just went to bmw.com and installed their pwa. Same thing. The app icon showed only with the other application icons - no icon on the home screen.
I tried my pwa using Samsung Internet and again same result.
I am Beginer for intel xdk , i have made an app for android device, in app. i have set a button as a back button , my app have 6 pages, one of them is an index page which is load first and then navigate too the another page , when i am on index page , press a back button which inbuilt in device it redirect me on the page according to history instead of exit the app.. it behaves just like a web browser back button, because my code is in html5 format.
i want to use this button to quit from this application how can I use it or code...*/
<script>
window.history.forward();
function noBack() {
window.history.forward();
}
</script>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();">
You can use the navigator.app.exitApp() function from the Cordova API if you include the cordova.js library (after the intelxdk.js library). But it only works on Android devices, it is not supported anywhere else.
You would execute this code when you capture the Android hardware back button.
Apps like Icon Project show that you can let your app make a homescreen icon with a link to a website. Does anyone know how this can be accomplished?? I dont know where to start.
Icon project submits data to a php based website which then shoots out an html to your browser ...
This html is nothing but a web app which is cached and stored to your homepage ...
information on setting the web app icon and caching can be found on
http://sixrevisions.com/web-development/html5-iphone-app/
I have an app that uses OAuth to authenticate, which means the user must be directed to the website to authorize the application. I prefer to make it obvious to the user that they are using a standard browser to authorize at the original site rather than just using a web view to show the content within my app. However, every time they are directed to Safari (via openURL), it launches a new Safari window and once Safari has 8 windows open, it simply fails to work at all.
I'm wondering if there is an equivalen to the "target" attribute of an anchor tag in html which would allow me to cause all openURL calls from my application to open in the same window.
There is other functionality that I can expose via the web application, creating a hybrid app between native iphone functionality and web app functionality in Safari, but if I have to launch a new window every time I switch between the app and Safari, it becomes unworkable. The Youtube app is obviously able to return the user to the previous page after showing a video, but that might well be a custom plugin in Safari for iphone. Also, while returning to the previous page is somewhat useful, sending them to a new URL in the existing window really opens up a lot of possiblities.
I'm pretty sure there is no way to pass a target parameter to openURL:.
What I noticed about Safari is that it won't open another tab if the page you are opening with openURL: is/was already open in Safari. It just reloads that page. This might sound trivial and not helpful but perhaps you could use it to your advantage if you can make your web application only use one page. Different views or states could be expressed with #anchor tags.
An example is http://m.flickr.com. Notice their URL structure? It goes http://m.flickr.com/#/home, http://m.flickr.com/#/explore/interesting/, http://m.flickr.com/#/search and so on. All of these are different web pages to the user but to Safari it's all the same page.
I found iOS 6.0.1 Safari will open the same tab with a simple hashtag, without the slashes. So with the above example http://m.flickr.com, openURL to http://m.flickr.com#someinfo opens to the same tab.
In your webpage, use window.location.hash to return the params. In the above example it will return #someinfo.
Is there a way of telling whether my Web Application has been launched from a button on the user's iPhone home screen? I want to display a "add this WebApp to your home screen" prompt if the user has accessed the WebApp via safari by typing in a URL.
window.navigator.standalone
True if you have launched from the Home Screen. False if in the Safari browser.
Documented here:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
It works with OS 2.1 and up.
In Safari, the scrollY will start at a negative value if inside Safari, and at 0 if running as an application.
Likely the viewport will change as well (if it does, this is a more reliable method)
jQTouch detects this (try the demo). It's open source, so you should be able to find out how.
If I remember correctly there's a thing in the server log that shows what the user's previous page was. So the only way I can think of is if the user was on a previous page display the "add" thing, and if they didn't don't