Questions tagged [iphone-standalone-web-app]

An iOS web app whose content is purely web-browser-based and runs outside of Mobile Safari in a chromeless browser using the meta declaration:

In order to make websites and web apps appear more "app-like" on iOS devices, mobile Webkit supports the apple-mobile-web-app-capable meta tag. When the app is opened in Safari, this tag will have no effect. But when this tag is used, and the application is saved to the home screen as an icon and opened that way, it is said to be running in standalone mode and is referred to as a standalone web app.

Standalone web apps do not have any of the Safari UI visible. For security reasons, because they run in their own process space, they run a different version of Webkit and use a different Javascript engine. Because of these differences, standalone web apps often behave differently than apps running in mobile Safari.

This tag is declared:

<meta name="apple-mobile-web-app-capable" content="yes" />

To install the application to work in standalone mode, open the website in mobile Safari and then:

Tap share, add to homescreen, enter a name, and then add.

This installs an icon on the iOS device's home screen. When opened from this icon, the app will be running in standalone mode.

When running in standalone mode, Webkit also supports the apple-mobile-web-app-status-bar-style meta tag to control the color of the iOS device's status bar.

More information can be found in the Safari Web Content Guide's section, "Configuring Web Applications".

259 questions
5
votes
2 answers

iOS WebApp not showing startup image

I added between the head tags of my website but it doesn't work…
5
votes
0 answers

Adding 3D Touch Quick Actions to a Safari home screen shortcut?

With the introduction of the iPhone 6s, 3D Touch was announced. With that, came a new feature called Quick Actions. These allow you to access 1-4 actions quickly for an app on your home screen, simply by 3D Touching it. For example, the Maps app…
Senseful
  • 86,719
  • 67
  • 308
  • 465
5
votes
2 answers

Video no longer playing in iOS 8 WebbApp standalone mode, anyone found a solution?

This bug looks to be resolved as of iOS 9. The video plays fine on the desktop evergreen browsers, and in stand alone mode on Android devices. It even plays nice on the iOS8 safari, but once a user goes and adds it to their home screen, the video…
5
votes
0 answers

iOS 8 - Standalone web app won't clear cache/cookies

I'm developing a mobile website at work that supports standalone mode when added to the home screen. Everything is working for both Android and iOS. I just upgraded my iPhone 5c to iOS 8 and whenever I open the web app from the home screen icon it…
jstudios
  • 856
  • 1
  • 9
  • 26
5
votes
0 answers

Google+ sign in giving blank page iOS web app

I have an issue with using the interactive post from the Google+ api when using the iOS web app view. In safari or any other browser on iOS or Android there's no problem logging into Google+ and sharing the post but in web app mode of iOS it throws…
Rias
  • 186
  • 3
5
votes
2 answers

iOS WebApp's don't allow location services?

I have the following JS which gets the current location of the user and displays their zipcode... (function ($, geolocation) { if (geolocation) { geolocation.getCurrentPosition(function (position) { $.getJSON( …
Charlie
  • 11,380
  • 19
  • 83
  • 138
5
votes
1 answer

Enable “save image” in iOS web application

Added this to my site: While most people ask how to disable the callout in a fullscreen web-app, I need to enable it. I will basically have a slider containing iPhone wallpapers, so I want to…
Cosmin
  • 269
  • 3
  • 8
4
votes
2 answers

Is it possible to make a button 'add to homescreen' for the iphone?

Im new to developing webablications for the iphone. I wonder if it is possible to add a button who has the simular function as the '+ add to homescreen' button to your website?
4
votes
2 answers

Detecting standalone mode in iPhone

I am trying to detect if my jquerymobile app is running as an APP (i.e from home screen). My current code is: if (window.navigator.standalone) Data.isRunningAsApp = true; Problem is I've heard this code is better according to this if…
williamsandonz
  • 15,864
  • 23
  • 100
  • 186
4
votes
1 answer

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 multi page website. I add it to home screen in iPhone using "add to home screen" button in Share menu. When I open it using the icon in the home screen, the website shows full screen. But when I go to any sub-page with a different route,…
4
votes
2 answers

Slow initial loadingscreen iOS web app

I am working with a web app built for webkit browsers that is quite javascript-heavy. The app runs rather smooth in the safari browser and the initial loading is about 1,5-2 sec (iPhone 4s iOS 6) on my 3g net. However, when I launch the app from my…
4
votes
2 answers

iOS Webapp as home button: Authentication Header sent with ajax stop working

I have a webapp that authenticate via a REST APi witch respond with a userid and a session token, that will be sent with future ajax requests as Authorization Basic Header for secured end points of the api. That works fine on every browser,…
4
votes
1 answer

"apple-mobile-web-app-capable" site switches to Mobile Safari after logout

When running a mobile site in iOS full screen mode, using the "apple-mobile-web-app-capable" meta tag, I am using a combination of AJAX and synchronous page requests, including redirects, with success while the user is logged in. However, when the…
kgx
  • 1,195
  • 3
  • 15
  • 26
4
votes
3 answers

Geolocation not working with apple-mobile-web-app-capable?

I have the following JS to display the current user's Zipcode in #zip: (function ($, geolocation) { if (geolocation) { geolocation.getCurrentPosition(function (position) { $.getJSON( …
Charlie
  • 11,380
  • 19
  • 83
  • 138
4
votes
1 answer

Add to homescreen on mobile phone

How can I code a button to make a shortcut for mobile phone especially on iPhone and Android. I'm using boilerplate as a framework so it would automatically be adding this on the head section
Pennf0lio
  • 3,888
  • 8
  • 46
  • 70