@closerclick/closer-click-install
v0.1.1
Published
Botón de "Instalar app" (PWA) unificado del ecosistema Closer Click: Web Component <closer-click-install> que captura beforeinstallprompt temprano, maneja iOS con un modal de instrucciones (sin alert) y se oculta si ya está instalada. Vue o vanilla. Sin J
Maintainers
mycloserclickReadme
@closerclick/closer-click-install
Botón de "Instalar app" (PWA) unificado para todo el ecosistema Closer Click.
Resuelve la fragmentación de tener el mismo flujo beforeinstallprompt copiado a
mano en cada app (Vue y vanilla), donde cada copia divergió y arrastra los mismos
bugs sutiles. Un solo Web Component, testeado, igual en todas las apps.
Sin JS de terceros, sin cookies, autohosteado (Shadow DOM). Bilingüe es/en.
Por qué un paquete y no copiar el snippet
El botón es trivial; lo que no lo es —y por eso se centraliza— son tres detalles que casi todas las copias hacían mal:
beforeinstallpromptse dispara muy pronto, a veces antes de montar el componente. Si lo escuchás enonMountedlo perdés y el botón nunca aparece. Aquí se captura a nivel de módulo, en elimport.- iOS/Safari no soporta
beforeinstallpromptni API de instalación: la única vía es Compartir → Añadir a pantalla de inicio. Sin esto, en iPhone la app simplemente no se puede instalar. Lo resolvemos con un modal de instrucciones propio (noalert(), prohibido en el ecosistema). - No reaparecer cuando la app ya corre instalada (
display-mode: standalone) ni trasappinstalled.
Uso — Web Component (recomendado)
// Vue: importa el paquete una vez (p. ej. en main.js) y usa el tag.
import '@closerclick/closer-click-install'<header class="topbar">
<closer-click-install></closer-click-install>
</header><!-- vanilla -->
<script type="module" src=".../@closerclick/closer-click-install/src/index.js"></script>
<closer-click-install lang="es"></closer-click-install>El elemento se oculta solo (no ocupa espacio) cuando no hay forma de instalar o la app ya está instalada. En Chromium muestra el botón cuando llega el prompt y lo dispara al hacer click. En iOS muestra el botón siempre (hasta que se instale) y al hacer click abre el modal con las instrucciones de Compartir.
Atributos
| Atributo | Valores | Default |
|---|---|---|
| lang | es | en | <html lang> / navegador |
| label | texto del botón | Instalar / Install |
| icon | false para ocultar el icono | icono visible |
Estilo (custom properties)
--cc-install-color, --cc-install-bg, --cc-install-bg-hover,
--cc-install-radius, --cc-install-pad, --cc-install-gap,
--cc-install-font-size, --cc-install-icon, --cc-install-focus,
--cc-install-accent (acento del modal), --cc-install-modal-bg,
--cc-install-modal-color.
Parts: button, icon, label, modal, modal-card.
Eventos
cc-install— cancelable, antes de actuar (preventDefault()para hacer lo tuyo).cc-install-result—detail.outcome:accepted|dismissed|instructions|installed.
Uso programático
Para apps que quieren su propio botón con la lógica compartida:
import { canInstall, promptInstall, onInstallStateChange, isIOS } from '@closerclick/closer-click-install'
const unsub = onInstallStateChange(() => { miBoton.hidden = !canInstall() })
miBoton.onclick = async () => {
const outcome = await promptInstall() // 'accepted' | 'dismissed' | 'instructions' | 'installed'
if (outcome === 'instructions') mostrarMisInstrucciones() // iOS / navegador sin soporte
}API: isAppInstalled(), isIOS(), canInstall(), hasNativePrompt(),
promptInstall(), onInstallStateChange(fn) → unsub.
Composable Vue 3
import { useInstall } from '@closerclick/closer-click-install/vue'
const { canInstall, isInstalled, install } = useInstall()<button v-if="canInstall" @click="install">Instalar</button>Para el botón ya hecho (con modal iOS incluido) usá el Web Component; el composable es solo para botones a medida.
Test
npm test # Playwright contra Chromium: prompt nativo, appinstalled y rama iOSLicencia
MIT