About Newsletter Contact etc.

Add to Homescreen

structure

Originally from Humdrum.life - moved here for prosperity.

Done! The one thing that seems not to be supported based on what I could find was swipe to go back. Going to make the title bigger so I have a larger touch Target to navigate home.

But now HL is an icon on my home screen, opens in full screen and links stay in that instance rather than opening up Safari.

Yes, I am very much smitten with myself for this.

Only thing I can’t get going is opening links within the app instance. All my links end up opening Safari which defeats the purpose.

Trying to set this up so I can open it like an app. Had this before but I don’t remember the steps. Need to set the icon image and find the code that allows it to open up without the Safari search bar etc.

Code

Allowing FullScreen Mode:

 <meta name="apple-mobile-web-app-capable" content="yes">

Setting Homescreen Icon:

 <link rel="apple-touch-icon" href="https://farm8.staticflickr.com/7878/47149335741_38c9eac571_o.jpg">

Status Bar Color [not working]:

 <meta name="apple-mobile-web-app-status-bar-style" content="#2F3057">
 // Mobile Safari in standalone mode

  if(("standalone" in window.navigator) && window.navigator.standalone){

// If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true

var noddy, remotes = false;

document.addEventListener('click', function(event) {

    noddy = event.target;

    // Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML

    while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
noddy = noddy.parentNode;
}

    if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
    {
        event.preventDefault();
        document.location.href = noddy.href;
    }

},false);

}


✉️  Reply by email
X