0

He puesto la opción de añadir la app PWA desde varios botones en mi web, pero la consola de google me da el error "Uncaught TypeError: Cannot read property 'style' of null".

Mi intención es que se pueda instalar la app PWA desde el menú, el header y al final en el footer. Funcionan los botones, pero el error en la consola persiste...

Paso el código que tengo en footer.php:

    <script type="text/javascript">
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('/sw.js')
                    .then(function(registration) {
                        console.log('service worker ready');
                        registration.update();
                    })
                    .catch(function(error) {
                        console.log('Registration failed with ' + error);
                    });
            });
        }


        let deferredPrompt;
        const addBtnHeader = document.querySelector('.add-button-header');
        const addBtn = document.querySelector('.add-button-footer');
        const addBtnMenu = document.querySelector('.add-button-menu');

        addBtnHeader.style.display = 'none';
        addBtn.style.display = 'none';
        addBtnMenu.style.display = 'none';

        window.addEventListener('beforeinstallprompt', (e) => {
            // Prevent the mini-infobar from appearing on mobile. Evita que Chrome 67 y versiones anteriores muestren automáticamente el aviso
            e.preventDefault();
            // Guarda el evento para que pueda activarse más tarde
            deferredPrompt = e;
            // Actualizar la interfaz de usuario para notificar al usuario que puede agregar a la pantalla de inicio
            addBtnHeader.style.display = 'block';
            addBtn.style.display = 'block';
            addBtnMenu.style.display = 'block';

            addBtnHeader.addEventListener('click', (e) => {
                // Oculta nuestra interfaz de usuario que muestra nuestro botón A2HS
                addBtnHeader.style.display = 'none';
                // Mostrar el aviso
                deferredPrompt.prompt();
                // Espere a que el usuario responda a la pregunta
                deferredPrompt.userChoice.then((choiceResult) => {
                    if (choiceResult.outcome === 'accepted') {
                        console.log('User accepted the A2HS prompt');
                    } else {
                        console.log('User dismissed the A2HS prompt');
                    }
                    deferredPrompt = null;
                });
            });


            addBtn.addEventListener('click', (e) => {
                // Oculta nuestra interfaz de usuario que muestra nuestro botón A2HS
                addBtn.style.display = 'none';
                // Mostrar el aviso
                deferredPrompt.prompt();
                // Espere a que el usuario responda a la pregunta
                deferredPrompt.userChoice.then((choiceResult) => {
                    if (choiceResult.outcome === 'accepted') {
                        console.log('User accepted the A2HS prompt');
                    } else {
                        console.log('User dismissed the A2HS prompt');
                    }
                    deferredPrompt = null;
                });
            });


            addBtnMenu.addEventListener('click', (e) => {
                // Oculta nuestra interfaz de usuario que muestra nuestro botón A2HS
                addBtnMenu.style.display = 'none';
                // Mostrar el aviso
                deferredPrompt.prompt();
                // Espere a que el usuario responda a la pregunta
                deferredPrompt.userChoice.then((choiceResult) => {
                    if (choiceResult.outcome === 'accepted') {
                        console.log('User accepted the A2HS prompt');
                    } else {
                        console.log('User dismissed the A2HS prompt');
                    }
                    deferredPrompt = null;
                });
            });


        });
    </script>

El código de un botón, el resto son parecidos, cambiando el contenido de class:

<a style="position: fixed;bottom:117px;left: 10px;z-index:9999;" class="add-button-footer mobile-menu añadirapp" title="pulsar para añadir a tus aplicaciones" href="#" onclick="javascript:return alert('<?php echo osc_esc_js(__('LEALES.ORG EN TUS APLICACIONES<br><br>•&nbsp;Pulsando Añadir en el siguiente mensaje se añadirá a tus aplicaciones, para que accedas cómodamente.<br><br>•&nbsp;Si no se muestra el mensaje, actualiza e inténtalo nuevamente.', 'beta')); ?>')">
            <i class="fas fa-mobile-alt" href="#" style="margin-top:8px;margin-right:13px;font-size:34px;color:#F56200;"></i>
        </a>

Gracias por adelantadas!

Esto me dice que añada más detalles, pero no hay mucho más que añadir...Esto me dice que añada más detalles, pero no hay mucho más que añadir...Esto me dice que añada más detalles, pero no hay mucho más que añadir...Esto me dice que añada más detalles, pero no hay mucho más que añadir...

5
  • Por favor edita la pregunta y agrega el HTML de los botones, tal vez los tienes con ID y estás tratando de obtenerlos por clase.
    – Triby
    el 1 jun. 2020 a las 19:27
  • he añadido un botón de ejemplo, pero veo que lo tengo como class
    – siken
    el 1 jun. 2020 a las 20:05
  • ¿Ese botón es el que causa el error, o puede ser otro? Necesitas proporcionar código que permita reproducir tu problema, no solo partes, porque así va a ser difícil ayudarte.
    – Triby
    el 1 jun. 2020 a las 22:00
  • No existe un elemento con la clase add-button-footer, son cosas que deberías revisar por ti mismo al ver el código fuente desde el navegador.
    – Triby
    el 1 jun. 2020 a las 23:56
  • Existe en la versión móvil. Luego miro a cuál de los 3 se refiere exactamente, pero el error sale en la consola.
    – siken
    el 2 jun. 2020 a las 6:58

1 respuesta 1

0

está solucionado, el error está en que el botón con class="add-button-footer" estaba mostrado únicamente cuando detectaba un móvil y al buscarlo en la versión de ordenador no aparecía.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.