Home screen web app not refreshing after being closed on iPhone

1

Just wondering if anyone else has experienced this?.. after adding a Hype page as an iPhone home screen web app from my server, everything works fine until I close the web app (swiping up in the app switcher screen) and relaunch it - instead of starting on the first scene again, the app continues from the last scene I was viewing before closing.

I know there is a thread or two on here where people actually want this to happen but I need the opposite, the web app should always start from the beginning of the first scene every time it is opened.

I’ll work on getting a stripped down version that I can share here but if anyone has any ideas in the meantime, would be much appreciated!

Many thanks
Rich

2

One purpose of the “Home screen web app” checkbox is to try to preserve state. You could disable that and you are still able to use the iPhone to add the page to the home screen; it will just more appear as a regular web page with a titlebar.

If that isn’t acceptable, my guess would be that you could use the Page Visibility API to determine when the page is shown, and force a reload. The code would be added to your Head HTML and look something like:

	<script>
	
	document.addEventListener("visibilitychange", function() {
  		if(document.visibilityState == "visible") {
  			location.reload();
  		}
	});
	
	</script>
2 Likes
3

Did a quick test on my iPhone and that works..

Note the above will reload even if it is already on scene 1 but you can add simple code to stop that if you so wish.

4

Yep, I was just going to reply that that pretty much nailed it, thank you @jonathan! I’m just getting a very quick glimpse of the page before it reloads on open, almost unnoticeable but just having a tweak to see if I can solve it. Cheers!

5

It may work better if you use

if(document.visibilityState == "hidden")

instead of

if(document.visibilityState == "visible")

I was just trying that also so it renders in the background …

6

Thanks @MarkHunte, just tried it but doesn’t seem to reload that way on my phone unfortunately

7

hmm… does on mine. old iPhone latest build.

here is my test.

http://markosx.com/hypeTests/webAppTest.html

8

Interesting, your test doesn’t reload on my phone either. iPhone 8, iOS 12.2. No worries though, I think I can work with the ‘visible’ version. Thanks for your time and help!

9

no prob. That is odd though…

10

You might still be able to use the hidden state condition to do something like jump to a blank scene, so that when the user does come back they don't see the page as it was. Then still use the visible condition to do the reload.

11

Thanks @jonathan, I tried it but doesn’t seem to work, maybe my code is a little out?..

<script>

document.addEventListener("visibilitychange", function() {
	if(document.visibilityState == "hidden") {
		hypeDocument.showSceneNamed('outro', hypeDocument.kSceneTransitionCrossfade, 0.1);
	}
});

</script>
12

Most likely the problem is that you don’t have a reference to the hypeDocument object. An easy way to get it may be to make a on scene load handler that you make sure only runs once; that will have the object. Secondarily to that, you’d definitely want an instant transition as the web view is going away and won’t even have .1 seconds to run.

Yet all of that said I couldn’t get it to work with those changes, so it might just be you don’t really get enough of an opportunity to run code on the hidden change.

13

I did test my code on my iPhone at the time with hidden and it did work?

Below is what I tested…

http://markosx.com/hypeTests/webAppTest.html

	<script>
	
	document.addEventListener("visibilitychange", function() {
  		if(document.visibilityState == "hidden") {
  			location.reload();
  		}
	});
	
	</script>

http://markosx.com/hypeTests/webAppTest2.html

<script type="text/javascript"> function myCallback(hypeDocument, element, event){ 
 
  window.myhypedocument = hypeDocument; } 

if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}


window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
 
	
	
	document.addEventListener("visibilitychange", function() {
  		if(document.visibilityState == "hidden") {
  		if (window.myhypedocument.currentSceneName() != 'sc1'){
  		
  		console.log('reloading')
  			location.reload();
  			}
  		}
	});
	
	</script>