Know if website launched from home screen shortcut

Question

I'm relatively new to web development and I was requested to add a popup message suggeting the user to add the website shortcut to his/her mobile home screen.

I already have the popup running but my boss is asking me to detect if the user launched the website from the shorcut to not show again the popup and I'm not sure if this is possible.

Any help or advice would be greatly appreciated.

       if (navigator.userAgent.match(/Android|webOS|BlackBerry|IEMobile|Opera Mini/i)) {  
            $.fancybox({
               'width': '50%', //Use percentage to maintain responsiveness
               'height': '50%',
               'autoScale': true,
               'autoDimensions': false,
               'transitionIn': 'fade',
               'transitionOut': 'fade',
               'centerOnScroll': true,
               'type': 'inline',
               'href': '#mob_popup',
               padding: 8,
               helpers: {
                   overlay: {
                       css: {
                           'background': 'rgba(255, 255, 255, 0.45)'
                       }
                   }
               }


           });

Answer 1

Use javascript to check the window.navigator.standalone property. If you're launched from the home screen, that property should come up true and if you're in Safari (or another browser) it will be false.

Answer 2

• For iOS devices, use window.navigator.standalone === true
• For Android devices, use window.matchMedia('(display-mode: standalone)').matches

See similar post for reference.