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>• Pulsando Añadir en el siguiente mensaje se añadirá a tus aplicaciones, para que accedas cómodamente.<br><br>• 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...
add-button-footer
, son cosas que deberías revisar por ti mismo al ver el código fuente desde el navegador.