Puxen a opción de engadir a aplicación PWA de varios botóns no meu sitio web, pero a consola de Google dáme o erro “Uncaught TypeError: non pode ler o estilo de propiedade” de nulo “.
A miña intención é que a aplicación PWA poida ser instalada no menú, o cabeceiro e ao final no pé de páxina. Os botóns funcionan, pero o erro na consola persiste …
Pase o código que teño en pé de páxina:
<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 addBtnMenu = document.querySelector('.add-button-menu'); const addBtnFooter = document.querySelector('.add-button-footer'); addBtnHeader.style.display = 'none'; addBtnMenu.style.display = 'none'; addBtnFooter.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'; addBtnMenu.style.display = 'block'; addBtnFooter.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; }); }); 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; }); }); addBtnFooter.addEventListener('click', (e) => { // Oculta nuestra interfaz de usuario que muestra nuestro botón A2HS addBtnFooter.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>O código dun botón, o resto son similares, cambiando o contido da clase:
<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>Grazas de antemán!
Isto conta me engadir máis detalles, pero non hai moito máis que engadir … Isto díxome que engada máis detalles, pero non hai moito máis que engadir … Isto dime que engade máis detalles, pero non hai moito máis Para engadir engadir … isto díxome que engada máis detalles, pero non moito máis para engadir …