code-sample.js

/**
 * Create popup function that takes url as input
 * @param url
 */
function homescreenPopup(url) {
    // Add popup container to top of body
    $('body')
        .prepend('<div class="homescreen-popup" style="background-image:url(' + url + ');"><div class="close-homescreen-popup">X</div></div>');

    // Add click handler to remove popup
    $(document).on('click', '.homescreen-popup', function() {
        $(this).remove();
    });
}


/**
 * Detect Chrome
 * @returns {boolean}
 */
function isChrome() {
    var isChromium = window.chrome,
        winNav = window.navigator,
        vendorName = winNav.vendor,
        isOpera = winNav.userAgent.indexOf('OPR') > -1,
        isIEedge = winNav.userAgent.indexOf('Edge') > -1,
        isIOSChrome = winNav.userAgent.match('CriOS');

    if (isIOSChrome) {
        return true;
    } else {
        return isChromium !== null && isChromium !== undefined && vendorName === 'Google Inc.' && isOpera === false && isIEedge === false;
    }
}

/**
 * Detect Safari on iOS
 * @returns {boolean}
 */
function isSafari() {
    var ua = window.navigator.userAgent.toLowerCase();
    var isiOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
    var webkit = !!ua.match(/WebKit/i);

    return isiOS && webkit && !ua.match(/CriOS/i);
}

// If not launched from homescreen and popup hasn't been shown previous
if (!window.navigator.standalone && !window.matchMedia('(display-mode: standalone)').matches && !localStorage.fullscreenPopup) {
    // If mobile
    if (isMobile) {
        // If Chrome, show popup for Chrome and register that we showed the popup
        if (isChrome()) {
            homescreenPopup('/app/themes/hp-theme/dist/images/homescreen/chrome.jpg');
            localStorage.fullscreenPopup = true;
        }
        // If Safari, show popup for Safari and register that we showed the popup
        else if (isSafari) {
            homescreenPopup('/app/themes/hp-theme/dist/images/homescreen/safari.jpg');
            localStorage.fullscreenPopup = true;
        }
    }
    // If the user is on dekstop or tablet
    else {
        homescreenPopup('/app/themes/hp-theme/dist/images/homescreen/no-chrome-safari.jpg');
        localStorage.fullscreenPopup = true;
    }
}