philfung / add-to-homescreen

Easily add a website to a user's home screen on IOS/Android/Desktop
MIT License
103 stars 25 forks source link

I have three problems #6

Closed queno18 closed 8 months ago

queno18 commented 8 months ago

Hi,

I think it's great what you do to notify with a PWA app message, thank you very much.

I have three problems:

1) On Windows 11 PC I cannot close the installation message in any browser, I can close the message in Chrome and Samsung browser on Android. (allowUserToCloseModal: true,)

On the other hand, the message on PC about widows 11 chrome shows that it cannot be installed, when it can be installed PWA

2) If I install the PWA application, the installation message still appears. Can you stop reporting the PWA installation message?

3) On Android when browsing, Edge shows the installation message with the up arrow, but the correct thing is that it will show the down arrow, in the direction of the edge setting button.

Best regards,

Eugenio

queno18 commented 8 months ago

Hi,

Sorry, I just configured the src script to version 1.6, so point one is solved, thank you very much.

It would only be these, how could I solve them please:

1-b) On the other hand, the message on PC about widows 11 chrome shows that it cannot be installed, when it can be installed PWA

2) If I install the PWA application, the installation message still appears. Can you stop reporting the PWA installation message?

3) On Android when browsing, Edge shows the installation message with the up arrow, but the correct thing is that it will show the down arrow, in the direction of the edge setting button.

Best regards,

Eugenio

queno18 commented 8 months ago

For example, with this script code, the install button appears on Chrome mobile and PC, it appears on edge as well, but if I have the PWA app installed, the install button does not appear if the PWA application is installed. I find it great. But I don't know how to apply this to your application so that your window on how to install the application does not appear when it is installed in Chrome, please help me, thank you very much:

if ('serviceWorker' in navigator && 'PushManager' in window) {
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();

            const deferredPrompt = e;

            const installButton = document.createElement('button');
            installButton.textContent = 'Install App';
            installButton.style.position = 'fixed';
            installButton.style.top = '10px';
            installButton.style.left = '50%';
            installButton.style.transform = 'translateX(-50%)';
            installButton.style.zIndex = '9999';
            installButton.style.padding = '10px 20px';
            installButton.classList.add('btn-grad');
            installButton.style.color = 'white';
            installButton.style.border = 'none';
            installButton.style.borderRadius = '5px';
            installButton.style.cursor = 'pointer';

            installButton.addEventListener('click', () => {

                deferredPrompt.prompt();

                deferredPrompt.userChoice.then(choiceResult => {
                    if (choiceResult.outcome === 'accepted') {
                        console.log('App installed');
                    } else {
                        console.log('App installation declined');
                    }

                    installButton.style.display = 'none';
                });
            });

            document.body.appendChild(installButton);
        });
    }
philfung commented 8 months ago

hi @queno18 thanks for reporting these issues. Ive fixed 1-b) and 2) in cb8e0213bb3db83c338e2de73fab97049165c9dc and published a new release 1.7.

To fix 1-b and 2)

  1. Use the latest release 1.7
  2. When instantiating the library, use the constructor flag showErrorMessageForUnsupportedBrowsers: window.AddToHomeScreen.SHOW_ERRMSG_UNSUPPORTED.MOBILE .
    Your issues with 1-b) and 2) will no longer occur because error messages will no longer be shown on desktop browsers (e.g. Mac Chrome). (Note with that flag set, they will still be shown on unsupported mobile browsers (e.g. IOS Firefox), which I assume is your desired behavior)

re: 3) this is still an outstanding issue as I dont have access to Android Edge app at the moment to test.

queno18 commented 8 months ago

Hi Philfung,

Thank you very much for the changes, I wish you a happy new year 2024.

Best regards,

Eugenio