using the Page Visibility API to add and remove a temporary hash while the page is hidden

61 Views Asked by At

I found a medium article that described how to persist user state for a standalone web app on ios or just keeps working after a user has gone offline. On iOS devices, tapping an installed app icon will force a reload of the target URL which erases the current state of the app for the user. The link to the article is https://medium.com/@samthor/add-to-home-screen-apps-and-their-lifecycles-9ccd05f96e71

I included screenshots of the section in the article I am referring to

Screenshot number 1

Screenshot number 2

function visibilityHandler() {
  var hash = '#bg';
  if (document.hidden && !window.location.hash) {
    window.history.replaceState(null, null, window.location + hash);
  } else if (!document.hidden && window.location.hash == hash) {
    var l = '' + window.location;
    window.history.replaceState(null, null, l.substr(0, l.length - hash.length));
  }
};
document.addEventListener('visibilitychange', visibilityHandler, false);
visibilityHandler();

This code is supposed to persist the state of the user for a standalone web app but it's not working. Could someone please help me? Thanks

0

There are 0 best solutions below