70

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.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
Rand
  • 701
  • 1
  • 6
  • 4
  • so you didn't even touched some bits of cocoa and just saved the link to your phone? – Tim Specht Aug 03 '11 at 17:44
  • 3
    @Tim Specht: Not sure what your point is, but the OP is asking about a web app, not a native app. Related question on SO: http://stackoverflow.com/questions/6686654/ipad-home-screen-app-refreshes-on-every-open - Unfortunately, that one doesn't have an answer either. – René Aug 04 '11 at 14:41
  • See my answer here: http://stackoverflow.com/a/40707231/473637 – Jeshurun Nov 20 '16 at 17:46
  • This is such a massive shame :-( – Simon_Weaver Jan 08 '18 at 04:28
  • Created this small react module that persists this info on local storage and redirects to the previous route when the app mounts, this problem is relevant still today (https://github.com/diogofcunha/react-persist-route) – Diogo Cunha Mar 15 '19 at 11:22

4 Answers4

16

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. :-)

Community
  • 1
  • 1
René
  • 9,880
  • 4
  • 43
  • 49
  • 4
    @Crashalot The problem persists to this day, and it's not going to change for a while. – goerwin Aug 26 '14 at 03:47
  • 1
    Doesn't seem like it's going to change much at all. Android, however, has recently added an improved webapp experience through chrome, that caches the state for you. But thats a different platform. – mix3d Dec 14 '15 at 16:03
  • 2
    Miraculously, this is still a problem :O – pulsejet Jan 27 '18 at 05:39
  • I'm now experiencing the opposite behaviour in iOS 12.2 beta. So I wonder if Apple are tweaking things. The problem I am finding is when you launch a web app for the second time, no scripts are run because it looks as if they just show a cached view. – Darren Feb 06 '19 at 14:49
  • @darren so what is the verdict? Now we have 12.4, what happens? Can't we just supply a cache manifest or use some sort of webworkers? Or that doesn't work for "add to home screen"? What do you call these apps, "standalone"? – Gregory Magarshak Jul 31 '19 at 01:39
  • My use case was the opposite of the question in that I needed script to run on every launch. 12.2 beta broke this but Apple fixed it in the next beta as it also broke their Shorcut’s app home screen shortcuts. – Darren Jul 31 '19 at 09:17
  • @Darren So does that mean, that the reload problem is fixed in the latest versions of iOS? – André Reichelt Dec 02 '19 at 08:23
  • Yes and No. iOS 13 broke my app again in that it runs no scripts on launch as the web view doesn’t refresh any more when opened. So this means the `reload problem` is fixed. However... they have reversed it again in `iOS 13.3 beta 3`! So web apps refresh on every load. This is great for me, but not you. They have also borked all the visibility API’s which fire for every web app at the same time. It’s a mess. – Darren Dec 02 '19 at 08:36
0

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:

Wilbo Baggins
  • 2,701
  • 3
  • 26
  • 39
  • 2
    I believe the issue here is slightly different. When you load the page launched from the home screen it is the equivalent of clicking on a bookmark which loads a url, the session is irrelevant. This will result in the page being reloaded and the loss of state unless it is persisted and loaded in some other way. – Chris A Mar 26 '13 at 15:45
  • Hi Chris, in my case this is working perfectly. I am not using any other form of local storage or cache other than the session cookie, and the state is even restored when I shutdown and restart my device in between. I am only using the web app installed to the home screen. Is my solution not working for you? – Wilbo Baggins Mar 26 '13 at 18:52
  • 1
    No, I have the same issue as the OP and have had to implement a localStorage based solution. I have made use of your solution to persist the session but it doesn't assist with the state, the bookmarked URL is always reloaded. I wonder if there might be another difference? – Chris A Apr 25 '13 at 16:32
  • Of course the URL is always reloaded; this is just a way to keep the session alive during app switching (and even rebooting the device). If you don't do this, your site has no way to remember your previous session; If you do this, you kan keep the state server side and always restore to it. Obviously, if you really want to avoid doing a http request, you will have to use some form of local storage. – Wilbo Baggins Apr 25 '13 at 22:57
  • This is not an end all solution and its also just a modfiying a cookie... While some may experience a change here, it is most likely their server was not setup for production from the start anyway. -1 due to the lack or research/understanding of this issue and think this answer needs to sit on the bottom of this page. – Angry 84 Oct 30 '18 at 03:10
  • Thanks for your comment Mayhem. You're right that this doesn't stop the web app from reloading, as is clearly stated at the start of the answer. But persisting a session cookie might be a valuable work-around for developers of server-side applications looking for a way to stop the forced reload from bothering their users. It was for me and it is a whole lot easier than implementing a true non-reload solution using localStorage. – Wilbo Baggins Nov 05 '18 at 12:47
0

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.

Alastair
  • 5,894
  • 7
  • 34
  • 61
  • 1
    iOS will **always unconditionally** kill the full screen webapp if you *sufficiently leave* the app and come back to it. For example, pressing the home button to show the home screen or switching to another app will cause the full screen webapp to be reloaded when you switch back to it. The only time this doesn’t happen is if you open the app switcher (press the home button twice) and reselect your webapp instead of switching to another app, locking the screen while your app is open and directly unlocking it, displaying/hiding the Control Panel, and pulling down and pushing up notif center. – binki Nov 05 '18 at 22:34
0

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

Artem Bernatskyi
  • 4,185
  • 2
  • 26
  • 35