ng-chicago / addtohomescreen Goto Github PK

when I use chrome on iPhone here is the user agent object:

isStandalone: false
isChrome: false
...
isSafari: true
isIOS: true
isMobile: true

mozilla/5.0 (iphone; cpu iphone os 12_2 like mac os x)
applewebkit/605.1.15(khtml, like gecko)
crios/74.0.3729.155 mobile/15e148 safari/605.1

Hi,

I'm trying to follow your example to implement add to home screen button on a Vue project but I'm having couple of issues

My JS looks like this
window.addEventListener('beforeinstallprompt', (e) => {
// show your custom button

// Prevent Chrome 67 and earlier from automatically showing the prompt
// no matter what, the snack-bar shows in 68 (beta 06/16/2018 11:05 AM)
e.preventDefault();

// Save the prompt so it can be displayed when the user wants
this.deferredPrompt = e; 

});

window.addEventListener('appinstalled', (evt) => {
// if installed, hide your custom button?
// if installed, call Google Analytics to track?
app.logEvent('a2hs', 'installed');
});

if (window.matchMedia('(display-mode: standalone)').matches) {
// do things here
// e.g. call Google Analytics to track standalone use
}

On my HTML I added a
button class="btn-a2hs" type="button">Add Shortcut To Home/Apps Screen

The console does not show any errors but the button is showing at all times and that does not seems right, it should show and hide depending.

Hi

I downloaded the script, run on my server and it didn't works.
This is the link: https://smkn1paringin.sch.id/a2hs/

Please help, what did I miss?

Hi,

I'm not seeing where you put

 window.addEventListener('beforeinstallprompt', (e) => {})

why you can call this.deferredPrompt.prompt();

Do you have any react example? I'm struggling to make this work on react project.