Skip to content

Add PWA support for app installation#205

Draft
Copilot wants to merge 7 commits intodevfrom
copilot/add-pwa-install-option
Draft

Add PWA support for app installation#205
Copilot wants to merge 7 commits intodevfrom
copilot/add-pwa-install-option

Conversation

Copy link
Contributor

Copilot AI commented Jan 8, 2026

Implements Progressive Web App functionality allowing users to install the web application on their devices as a native-like app.

Changes

Core PWA Components

  • Web manifest (site.webmanifest) - Enhanced with standalone display mode, theme colors (#5658dd, #1a1a1a), and maskable icon support
  • Service worker (service-worker.js) - Network-first caching strategy for static assets with graceful offline fallback
  • Installation handler (pwa-install.js) - Captures beforeinstallprompt event, shows install button dynamically, prevents duplicate listeners

UI Integration

  • Added install button to landing page hero with gradient styling and animations
  • Created installation instructions section with platform-specific guidance (Chrome Android/Desktop, Safari iOS)
  • Extracted PWA meta tags to reusable partial (_pwa_meta.html) included across all templates
  • Added mobile-web-app-capable and apple-mobile-web-app-capable meta tags for full-screen app experience

Example Usage

When users visit on a compatible browser, the install prompt triggers:

// pwa-install.js
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  showInstallPromotion(); // Shows "Instalar App" button
});

Service worker caches core assets on first visit:

const urlsToCache = [
  '/',
  '/static/css/style.css',
  '/static/js/main.min.js',
  '/static/images/armar-equipos-logo-circle.png'
];

Testing

  • Added 5 tests covering manifest accessibility, service worker registration, meta tag presence, and manifest content validation
Original prompt

This section details on the original issue you should resolve

<issue_title>Agregar opción para instalar la aplicación web como app (PWA)</issue_title>
<issue_description>Sería útil dar la opción a los usuarios de "instalar" la aplicación web en su dispositivo, similar a cómo Chrome permite instalar páginas web para acceder a ellas desde el inicio como si fueran una app nativa.

Esto podría implementarse agregando un botón visible o mostrando algún tipo de banner o mensaje que indique cómo instalar la aplicación. Idealmente, se configuraría el sitio como una Progressive Web App (PWA), permitiendo a los usuarios agregarla a su pantalla de inicio, con icono y experiencia similar a una app.

Recomendaciones:

  • Agregar manifest.json y service worker.
  • Implementar lógica para mostrar el prompt de instalación cuando sea posible.
  • Incluir instrucciones para instalar en diferentes navegadores/dispositivos.

Esto mejoraría la experiencia de usuario y aumentaría la retención.
</issue_description>

Comments on the Issue (you are @copilot in this section)


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI and others added 6 commits January 8, 2026 03:58
Co-authored-by: fedecarboni7 <37885214+fedecarboni7@users.noreply.github.com>
Co-authored-by: fedecarboni7 <37885214+fedecarboni7@users.noreply.github.com>
Co-authored-by: fedecarboni7 <37885214+fedecarboni7@users.noreply.github.com>
…S duplication, and use CSS classes instead of inline styles

Co-authored-by: fedecarboni7 <37885214+fedecarboni7@users.noreply.github.com>
…che cleanup logic, and move imports to top of file

Co-authored-by: fedecarboni7 <37885214+fedecarboni7@users.noreply.github.com>
Co-authored-by: fedecarboni7 <37885214+fedecarboni7@users.noreply.github.com>
Copilot AI changed the title [WIP] Add option to install web app as PWA Add PWA support for app installation Jan 8, 2026
Copilot AI requested a review from fedecarboni7 January 8, 2026 04:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants