consultoria-as
3b8224d15e
- pwa-install.js: captures beforeinstallprompt, shows dismissible banner with 7-day localStorage cooldown, handles appinstalled - Registered in 12 POS templates alongside existing service worker
102 lines
2.9 KiB
JavaScript
102 lines
2.9 KiB
JavaScript
/**
|
|
* Nexus POS — PWA Install Prompt
|
|
* Captures beforeinstallprompt and shows a dismissible banner.
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
|
|
const STORAGE_KEY = 'nexus_pwa_install_dismissed';
|
|
let deferredPrompt = null;
|
|
|
|
function createBanner() {
|
|
if (document.getElementById('pwa-install-banner')) return;
|
|
|
|
const banner = document.createElement('div');
|
|
banner.id = 'pwa-install-banner';
|
|
banner.innerHTML = `
|
|
<span>📲 Instala Nexus POS para acceso rápido y modo offline.</span>
|
|
<button id="pwa-install-btn">Instalar</button>
|
|
<button id="pwa-dismiss-btn" aria-label="Cerrar">×</button>
|
|
`;
|
|
document.body.appendChild(banner);
|
|
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
#pwa-install-banner {
|
|
position: fixed;
|
|
bottom: 0; left: 0; right: 0;
|
|
background: var(--color-surface, #1a1a1a);
|
|
color: var(--color-text, #eee);
|
|
border-top: 1px solid var(--color-border, #333);
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 14px;
|
|
z-index: 9999;
|
|
box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
|
|
}
|
|
#pwa-install-banner span { flex: 1; }
|
|
#pwa-install-btn {
|
|
background: var(--color-primary, #F5A623);
|
|
color: #000;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
#pwa-dismiss-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--color-text-muted, #888);
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
document.getElementById('pwa-install-btn').addEventListener('click', function () {
|
|
if (!deferredPrompt) return;
|
|
deferredPrompt.prompt();
|
|
deferredPrompt.userChoice.then(function (choice) {
|
|
if (choice.outcome === 'accepted') {
|
|
console.log('[PWA] User accepted install');
|
|
}
|
|
deferredPrompt = null;
|
|
banner.remove();
|
|
});
|
|
});
|
|
|
|
document.getElementById('pwa-dismiss-btn').addEventListener('click', function () {
|
|
localStorage.setItem(STORAGE_KEY, Date.now().toString());
|
|
banner.remove();
|
|
});
|
|
}
|
|
|
|
window.addEventListener('beforeinstallprompt', function (e) {
|
|
e.preventDefault();
|
|
deferredPrompt = e;
|
|
|
|
const dismissed = localStorage.getItem(STORAGE_KEY);
|
|
if (dismissed && (Date.now() - parseInt(dismissed)) < 7 * 24 * 60 * 60 * 1000) {
|
|
return; // dismissed within 7 days
|
|
}
|
|
|
|
// Wait for DOM to be ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', createBanner);
|
|
} else {
|
|
createBanner();
|
|
}
|
|
});
|
|
|
|
window.addEventListener('appinstalled', function () {
|
|
console.log('[PWA] App installed');
|
|
deferredPrompt = null;
|
|
const b = document.getElementById('pwa-install-banner');
|
|
if (b) b.remove();
|
|
});
|
|
})();
|