0

I have a Progressive Web App that I need to refresh every time the user opens it.

To achieve this I have tried:

1) First Option
window.onblur = function() {
    window.onfocus= function () {
        window.location = self.location;
    }
};

2) Second Option
var blurred = false;
window.onblur = function() { 
    blurred = true; 
};
window.onfocus = function() {
    blurred && (window.location = self.location); 
};

Credit of Option 1: https://stackoverflow.com/a/16406350/11843328

Credit of Option 2: https://stackoverflow.com/a/11313719/11843328

This work well but the problem is that sometimes whenever you click something, it reloads again. It basically reloads like 4 times in a row with some action. Other times it works as expected, just reloading once, but most of the times is like 4 or 5 times in a row.

I need it to reload just once when opened (on focus). Is there any alternatives I could try or any advice would be appreciated!

MCM13
  • 237
  • 1
  • 4
  • 12
  • What do you mean by open? Do you mean `onload`, like when the page is loaded for the first time? Or do you mean `onfocus`, when the window gets focus? Little confused about which event your targeting, but I will leave an answer when I know more. – Lewis Feb 14 '20 at 21:29
  • @Christian it's ```onfocus``` – MCM13 Feb 14 '20 at 21:30
  • Is there a reason why you're not using onload? – Mosia Thabo Feb 14 '20 at 21:31
  • I am also note sure what you wanted to do on that function executing on window.onfocus because it just puts blurred && (window.location = self.location); which does not make any sense. Please look at your question again? – Mosia Thabo Feb 14 '20 at 21:38
  • @MosiaThabo Yes, because I'm using this function for iOS PWA, it caches a version of the opened app, so whenever you open the app, you get the same state as how it was because it's basically a "bookmark" so the page is already loaded, this is why onFocus works for whenever they "open" it. – MCM13 Feb 14 '20 at 21:40
  • @MosiaThabo I edited with credits on where I got the code – MCM13 Feb 14 '20 at 21:44
  • Makes sense now. Thanks MCM for the clarity. The Blurred variable being put there in the function is the one causing confusion "__blurred__ && (window.location = self.location);" – Mosia Thabo Feb 14 '20 at 21:48
  • This is very user-hostile. If you want to do this, it should be based on a button click or happen automatically in the background. If go back to a previously opened tab and then it immediately reloads, then I'd be a bit confused. – volt Feb 14 '20 at 21:55
  • @volt Do you have any advice on how I can achieve reload in the background? this is my ultimate goal but I cannot find any help. I don't know if I'm not looking/searching with the correct words. – MCM13 Feb 14 '20 at 22:11
  • @MCM13 That's honestly not a question that I can answer in a "comment." That said, I can say with some degree of certainty that if that's your end goal, then you'd need to look at the available single page-application frameworks for inspiration like ember (of the top of my head). – volt Feb 14 '20 at 22:25

2 Answers2

1

Make sure you're using window focus event. As others have pointed out, there is no need to use the blur event, as focus will only fire if the window focus was blurred.

You can use the window.location.reload method to reload the window as well.

window.addEventListener("focus", e => window.location.reload());
<p>Look for a flicker</p>
Lewis
  • 4,285
  • 1
  • 23
  • 36
0

You don't need the onblur event. Using just the onfocus event will do the work.

Glauvus
  • 96
  • 4