Sé cómo hacer una integración de pwa y el navegador propone la instalación con el mensaje "Agregar --- a la pantalla de inicio". Mi deseo es el siguiente: Me gustaría configurar en el sitio web integrado de PWA un botón personalizado l "Instalar versión móvil" en HTML para que mis usuarios puedan instalar la aplicación web progresiva según sea necesario, especialmente cuando lo deseen. No necesariamente esperarán a que el navegador les ofrezca la instalación. Ya hice la integración de PWA y el navegador ya ofrece la instalación. El problema es que realmente no sé cómo usar el botón de instalación progresiva de mi aplicación web permanente en html + javascript que los usuarios verán en mi sitio web fuera de lo que ofrece el navegador.
Aquí está mi service-worker.js y mi index.html
var CACHE_NAME = 'PWA-installation'; var urlsToCache = [ 'index.html', './', 'styles.css', 'scripts/network.js', 'scripts/ui.js', 'scripts/clipboard.js', 'scripts/theme.js', 'sounds/blop.mp3', 'images/favicon-96x96.png' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } return fetch(event.request); } ) ); }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- Web App Config --> <title>pwa</title> <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="manifest" href="manifest.json"> </head> <body translate="no"> <header > <a href="#" id="install" class="icon-button" title="Install PWA" > Install PWA </a> </header> <!-- Footer --> <footer class="column"> </footer> <!-- Scripts --> <script src="scripts/network.js"></script> <script src="scripts/ui.js"></script> <script src="scripts/theme.js" async></script> <script src="scripts/clipboard.js" async></script> </body> </html>Su código se ve bien, solo necesita implementar esta parte: https://stackoverflow.com/a/64727286/8716572
Primero necesita usar este código para escuchar el evento beforeinstallprompt:
let deferredPrompt; window.addEventListener('beforeinstallprompt', function (e) { // Prevent the mini-infobar from appearing on mobile e.preventDefault(); // Stash the event so it can be triggered later. deferredPrompt = e; });Luego, debe agregar el detector de eventos a su botón:
var buttonInstall = document.getElementById('install'); buttonInstall.addEventListener('click', function (e) { // Show the install prompt deferredPrompt.prompt(); });