How to create a nanoflow for Add to Home Screen for PWA applications.

0
Hello, I am creating a PWA application and I want to create Add to Home Screen popup for it. I have selected all three properties which are there in the navigation and in options I am getting the option to add it on the home screen but I want to create a popup for it that whenever any user will open the application through any browser ,they should be given an option to add it to home screen.   
asked
2 answers
0

this is an interesting topic.

iOS doesnt allow you to add to homescreen so first you need to detect what browser is being used. for that we use the html/js snippet with the following code:

console.log('js running');

function detectBrowser() { 
    if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) {
        return 'opera';
    } else if(navigator.userAgent.indexOf("Chrome") != -1 ) {
        return 'chrome';
    } else if(navigator.userAgent.indexOf("Safari") != -1) {
        return 'safari';
    } else if(navigator.userAgent.indexOf("Firefox") != -1 ){
        return 'firefox';
    } else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) {
        return 'ie';//crap
    } else {
        return 'Unknown';
    }
} 




var element = document.getElementsByTagName('body')[0];
element.classList.add('browser-'+ detectBrowser());

this sets a class so that in the styling we can target only ios.

then what we have is a bolean called “show homescreen to user”

we do this because we dont want to bug the user everytime, so after the user has done atleas 20 actions, we know the user is invested in the app, and we can ask them if they would like to add it to the homescreen.

if they dont, we can deselect the option, and never ask them again.

as for the code, we just check the bolean of the user, and either show it or not.

answered
0

or you could try this

https://marketplace.mendix.com/link/component/119770

answered