Add to Homescreen

Creation: March 04, 2019
Updated: March 4, 2019

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) &amp;&amp; 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" &amp;&amp; noddy.nodeName !== "HTML") {
noddy = noddy.parentNode;
}

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

},false);

}


structure
edit


Next: Blog Setup
Previous: //190303// Reading: zanyberg

Posts tagged “structure”