J’ai mis la possibilité d’ajouter l’application PWA À partir de divers boutons de mon site Web, mais la console Google me donne l’erreur « Couvent TypeError: impossible de lire la propriété » style « de null ».
Mon intention est que l’application PWA peut être installée dans le menu, l’en-tête et à la fin du pied de page. Les boutons fonctionnent, mais l’erreur dans la console persiste …
Je passe le code que j’ai dans pied de page.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 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>> Le code d’un bouton, le reste est similaire, modifiant le contenu de la classe:
<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>Merci d’avance!
Ceci raconte Moi d’ajouter plus de détails, mais il n’ya pas beaucoup plus d’ajouter … Cela me dit d’ajouter plus de détails, mais il n’ya pas beaucoup plus d’ajouter … Cela me dit d’ajouter plus de détails, mais il n’y a pas beaucoup plus Pour ajouter … Cela me dit d’ajouter plus de détails, mais pas beaucoup plus à ajouter …