From d82d56a3cc771d9d57cbbf3c0704753b8822df42 Mon Sep 17 00:00:00 2001 From: David Frassi Date: Wed, 20 May 2026 16:51:24 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20correzione=20installabilit=C3=A0=20PWA?= =?UTF-8?q?=20e=20integrazione=20prompt=20installazione=20nativo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Cambiate le proprietà 'scope' e 'start_url' in manifest.webmanifest a valori relativi ('./') al posto di un valore hardcoded '/ionic/'. Questo risolve il problema di installazione quando l'app viene pubblicata in directory diverse (es. root '/' vs sotto-cartella '/ionic/'). - Aggiunto il tracciamento del prompt di installazione nativo tramite l'evento 'beforeinstallprompt' nel SettingsService. - Aggiunta la rilevazione dello stato standalone (app già installata) e del sistema operativo iOS. - Inserita una sezione premium dedicata all'installazione nelle Impostazioni: * Su Android/Chrome: mostra un pulsante 'Installa' quando il browser conferma l'installabilità. * Su iOS (iPhone/iPad): mostra una guida collassabile con le istruzioni per installare l'app manualmente da Safari ('Condividi' -> 'Aggiungi alla schermata Home'). --- public/manifest.webmanifest | 4 +- src/app/pages/settings/settings.page.html | 43 ++++++++++++++++++++ src/app/pages/settings/settings.page.ts | 9 +++++ src/app/services/settings.service.ts | 49 +++++++++++++++++++++++ src/app/version.ts | 2 +- 5 files changed, 104 insertions(+), 3 deletions(-) diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest index 5ad6a37..45d2933 100644 --- a/public/manifest.webmanifest +++ b/public/manifest.webmanifest @@ -2,8 +2,8 @@ "name": "CantiCristiani", "short_name": "CantiCristiani", "display": "standalone", - "scope": "/ionic/", - "start_url": "/ionic/", + "scope": "./", + "start_url": "./", "icons": [ { "src": "icons/icon-72x72.png", diff --git a/src/app/pages/settings/settings.page.html b/src/app/pages/settings/settings.page.html index 385f1a1..a373b7d 100644 --- a/src/app/pages/settings/settings.page.html +++ b/src/app/pages/settings/settings.page.html @@ -10,6 +10,49 @@
+ +
+ + + +

Installa Applicazione

+

Aggiungi CantiCristiani alla schermata home

+ + + Installa + + +
+ + +
+ + + +

Installazione su iPhone / iPad

+

Scopri come aggiungere l'app sulla home

+ + + + +
+

+ Apple non consente l'installazione automatica dei siti web. Segui questi semplici passi da Safari: +

+
    +
  1. + Tocca il pulsante di Condivisione nella barra di navigazione inferiore di Safari. +
    2. +
  2. + Scorri il menu verso il basso e seleziona Aggiungi alla schermata Home . +
    3. +
  3. + Conferma toccando Aggiungi in alto a destra. L'icona dell'app apparirà sul tuo schermo! +
    4. +
+
+
+
diff --git a/src/app/pages/settings/settings.page.ts b/src/app/pages/settings/settings.page.ts index 3c1e781..44d550e 100644 --- a/src/app/pages/settings/settings.page.ts +++ b/src/app/pages/settings/settings.page.ts @@ -37,9 +37,18 @@ export class SettingsPage { public version = VERSION; public contactEmail = environment.contactEmail; + public showIosInstructions = false; constructor() {} + async installApp() { + await this.settingsService.installPwa(); + } + + toggleIosInstructions() { + this.showIosInstructions = !this.showIosInstructions; + } + onModeChange(event: any) { this.settingsService.setShowChordsDefault(event.detail.value === 'chords'); } diff --git a/src/app/services/settings.service.ts b/src/app/services/settings.service.ts index 141d94c..81ebff0 100644 --- a/src/app/services/settings.service.ts +++ b/src/app/services/settings.service.ts @@ -49,7 +49,41 @@ export class SettingsService { private wakeLock: any = null; + // PWA installation signals + public deferredPrompt = signal(null); + public showInstallButton = signal(false); + public isStandalone = signal(false); + public isIos = signal(false); + constructor() { + // Detect PWA status + try { + this.isStandalone.set( + window.matchMedia('(display-mode: standalone)').matches || + (window.navigator as any).standalone === true + ); + this.isIos.set( + /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream + ); + } catch (e) { + console.warn('Browser environment does not support display-mode media query'); + } + + window.addEventListener('beforeinstallprompt', (e: any) => { + // Prevent the mini-infobar from appearing on mobile + e.preventDefault(); + // Stash the event so it can be triggered later. + this.deferredPrompt.set(e); + // Update UI notify the user they can install the PWA + this.showInstallButton.set(true); + }); + + window.addEventListener('appinstalled', () => { + this.deferredPrompt.set(null); + this.showInstallButton.set(false); + this.isStandalone.set(true); + console.log('PWA was installed'); + }); const savedChords = localStorage.getItem('show-chords-default'); if (savedChords !== null) { this.showChordsDefault.set(savedChords === 'true'); @@ -298,4 +332,19 @@ export class SettingsService { this.enableAcousticAutoscroll.set(newValue); localStorage.setItem('enable-acoustic-autoscroll', newValue.toString()); } + + async installPwa() { + const promptEvent = this.deferredPrompt(); + if (!promptEvent) { + return; + } + // Show the install prompt + promptEvent.prompt(); + // Wait for the user to respond to the prompt + const { outcome } = await promptEvent.userChoice; + console.log(`User response to the install prompt: ${outcome}`); + // We've used the prompt, and can't use it again, discard it + this.deferredPrompt.set(null); + this.showInstallButton.set(false); + } } diff --git a/src/app/version.ts b/src/app/version.ts index 9094611..bd32f35 100644 --- a/src/app/version.ts +++ b/src/app/version.ts @@ -1 +1 @@ -export const VERSION = '2026.05.20.1602'; +export const VERSION = '2026.05.20.1624';