I created a web app and added to my iPhone Home Screen. When I switch to another app and back, iPhone automatically reload my web app. This breaks my app flow.
How do I prevent iPhone from reloading the app?
I have apple-mobile-web-app-capable meta tag enabled to hide Safari toolbar and I don't want to turn it off.
I just found this related question on SO: Stop native web app from reloading itself upon opening on iOS
As it seems it's a limitation of Safari, a proposed solution is to persist your web apps state using Javascript and HTML5 localStorage. When your web app is launched, check for the persisted state and load it if available.
You can read about using localStorage in Safari here: http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007256-CH1-SW1
Hope that helps you. At least it did for me, as I had the same problem as you. :-)
I found a hack, tested on iOS 11.4.1/12.0
Open file uploading window and then switch back to the home screen.
The app still continues to work, in my case audio is playing and localStorage is updating
Proofs: https://youtu.be/heehLUhGKYY
PS. note how song progress changes when we seek, it proves that app works in the background
The short answer is that you can't control this. Sometimes iOS will keep a web app active in the background, at other times it will kill it. It's entirely related to how much memory is available on the device.
So, your best approach is to minimise the problems presented by this reload. Make sure your webapp updates the URL when you move from view to view, either by changing location.hash or using history.pushState(). This will allow you to reload whatever view the user was on before they switched apps. There are pagehide and pageshow events that allow you to execute code when the user moves away from your app - take that opportunity to store local state in localStorage and/or IndexedDB, then fetch that data again when the webapp is reopened.
Update: as this answer is receiving downvotes, I added this explanation.
Your problem might not be the actual reload, but the fact that Mobile Safari treats your user's cache and cookies differently when your web app is opened through the browser, than when it's 'installed' as a web app to the home screen. Although the solutions proposed here that use localStorage will work, they're a lot of work for client-side logic that can be avoided if your server is already responsible for persisting the session state of your user. The 30-second solution is to simply explicitly set the session cookie to have a longer lifetime.
This allows you to keep the state intact even between device reboots, so even though it doesn't technically stop the web app from being reloaded when launched from the home screen, it is an easy way to restore the state for the user without him/her noticing the reload - which in many cases I suspect is the real problem.
For a more elaborate discussion of this strategy and code examples, take a look at these questions and my answers there:
