Geek Answers Handbook

How to stay offline iOS Safari while navigating

When in the standalone web application module of iOS, and you click the link, this link opens in Mobile Safari instead of remaining in the standalone module. This makes no sense to me (at least for internal links).

The only way I can fix this is to add a click handler to the document node and perform manual navigation as follows:

 if (window.navigator.standalone) { document.addEventListener('click', (e) => { if (e.target.tagName === 'A') { e.preventDefault(); window.location = e.target.getAttribute('href'); }); }

Is there a less hacky way to get this behavior? It really hurt my eyes.

+8
javascript safari ios
source share
1 answer

Unfortunately, something along these lines is the standard way to do this. irae on GitHub has put together a script called Stay Standalone that will handle all the dirty work for you and is tested on different edges of cases. Although the script is a bit older, it works on a modern version of iOS.

This may be a little ugly, but the code is robust and can be included in the overall Javascript suite. This will not change the behavior for other scenarios. This is just an assumption, but the reason I think Apple opted for this behavior is because stand-alone web applications do not have direct or call back buttons, and clicking on the link may cause the application to be “unusable” , but for websites that are not intended for applications. This is probably the most desirable behavior in the general case for the end user.

Here is a copy of Javascript:

 (function(document,navigator,standalone) { // prevents links from apps from oppening in mobile safari // this javascript must be the first script in your <head> if ((standalone in navigator) && navigator[standalone]) { var curnode, location=document.location, stop=/^(a|html)$/i; document.addEventListener('click', function(e) { curnode=e.target; while (!(stop).test(curnode.nodeName)) { curnode=curnode.parentNode; } // Condidions to do this only on links to your own app // if you want all links, use if('href' in curnode) instead. if( 'href' in curnode && // is a link (chref=curnode.href).replace(location.href,'').indexOf('#') && // is not an anchor ( !(/^[az\+\.\-]+:/i).test(chref) || // either does not have a proper scheme (relative links) chref.indexOf(location.protocol+'//'+location.host)===0 ) // or is in the same protocol and domain ) { e.preventDefault(); location.href = curnode.href; } },false); } })(document,window.navigator,'standalone');

You can see the tests here .

+2
source share

More articles:


All Articles