Cambia il colore della barra inferiore del cellulare

Dovrei mettere il sito online ufficialmente oggi, inviare email e far installare la PWA alle persone :rofl::rofl::rofl:

Capisco la tua frustrazione, ma questa non è una risposta molto utile.

Tutto quello che posso dire al momento è che sembra che qualcosa stia modificando il comportamento normale.

Puoi controllare quali plugin o componenti del tema hai installato? Hai aggiunto altre personalizzazioni?

Non è solo il mio sito. È qualsiasi sito di discourse???

Ho già spiegato perché questo è il caso su Discourse ma non su altri siti.

Poiché sei un cliente, possiamo già vedere a quale sito sei associato. I colori dei pulsanti sono esattamente gli stessi dello screenshot che ho condiviso in precedenza. Non sono chiari come i tuoi.

È lo stesso sul tema predefinito senza personalizzazioni o componenti

1 Mi Piace

Il problema dei pulsanti che appaiono molto chiari sulla barra inferiore bianca è specifico del tuo dispositivo/sistema operativo. Su altri dispositivi che ho testato, la barra inferiore è effettivamente bianca quando il sistema operativo è in modalità chiara, ma i pulsanti sono grigi e rimangono visibili. Pertanto, il comportamento che stai riscontrando non è tipico e non influisce sugli altri utenti.

S ultra 22

Huawei mate20 pro

Detto questo, comprendiamo che l’esperienza non sia ideale quando si utilizza la PWA con un tema scuro di Discourse mentre il sistema operativo Android è in modalità chiara. Come ho detto, apriremo una discussione interna con i nostri sviluppatori e designer per esplorare come potremmo migliorare questo scenario nei futuri aggiornamenti.

1 Mi Piace

Beh, questo è strano e contraddice quello che hai detto. È un po’ un terno al lotto, ahah.

Questo è un Samsung S24 in modalità chiara

Questo è un Google Pixel in modalità chiara

Un iPhone non ha caricato affatto la barra, simile al problema che @chapoi ha avuto.

Un Samsung S22 più vecchio si è caricato correttamente con una barra inferiore bianca e icone più scure. Ho altre 10 persone che faranno un test più tardi e aggiornerò ulteriormente.

1 Mi Piace

Penso che il browser Chrome possa gestirlo in alcuni casi, a seconda della versione di Android, del dispositivo, ecc…

In una PWA, il <meta name="theme-color"> cambia in modo affidabile il colore della barra degli indirizzi in alto in Chrome su Android. Il theme_color in manifest.json influisce sulla barra di stato e talvolta su altre parti dell’interfaccia utente, ma il comportamento varia a seconda del dispositivo, del browser e della versione di Android.

La barra di navigazione nativa in basso di solito non può essere controllata da un’app web. Alcuni browser potrebbero applicare il colore del tema, ma non è garantito.

:up_arrow: Questo è uno dei motivi per cui ho convertito il mio sito in una TWA, utilizzando Bubblewrap, che può anche gestire i colori della barra di navigazione in basso.

Quindi con una PWA, puoi stilizzare la barra in alto, ma il controllo della barra di navigazione in basso è incoerente.


L’iPhone non caricherà questa barra di navigazione perché si tratta di un elemento nativo del sistema operativo Android.

2 Mi Piace

È solo strano, non ho mai riscontrato questo problema prima. Ho usato il super pwa di WordPress su 9 siti e non ho mai avuto problemi. Solo quello di discourse. Come dici tu, hai riscontrato lo stesso problema di incoerenza, spero che possano rendere lo stile della barra inferiore uguale a quella superiore poiché funziona come previsto su ogni dispositivo.

@dax @chapoi ancora più strano. Se installo la PWA sul mio telefono tramite Firefox funziona perfettamente. Almeno ora vedo i pulsanti in basso.

Questa è in modalità chiara

1 Mi Piace

Il motivo per cui funziona su Firefox ma non su Chrome dipende da come ogni browser gestisce le PWA su Android, perché Chrome guarda solo a theme_color nel Web App Manifest per colorare la barra di sistema. Se il manifest non viene servito dal dominio principale del sito o non ha il colore giusto, Chrome torna semplicemente al bianco. Firefox è più flessibile e prende i colori dalla pagina stessa, quindi la barra appare corretta anche senza un manifest personalizzato.

Quindi, procedendo, ho un sito Discourse ospitato che ha una palette scura, abbiamo disabilitato tutte le altre palette in modo che gli utenti non possano scegliere, il che è in linea con il nostro marchio. Abbiamo un tema abilitato che gli utenti non possono modificare.

Come possiamo rendere la barra inferiore #121212 nella PWA su Chrome poiché avere un’app installabile è importante per noi?

Il sito scuro e una barra inferiore chiara sono così distraenti e hanno un aspetto orribile.

Come ho detto prima, ho aperto una discussione interna per esplorare possibili miglioramenti per questo scenario. Tuttavia, con il prossimo incontro globale di Discourse, il team non sarà in grado di apportare modifiche nell’immediato e, sfortunatamente, non esiste una soluzione alternativa che possa garantire che la barra inferiore appaia sempre scura in questo momento.

Seguito rapido. Questo è stato ora assegnato a un ingegnere per la revisione. Tuttavia, tieni presente che l’incontro annuale di Discourse è imminente, quindi non credo che ci saranno aggiornamenti nel breve termine (per breve termine intendo “giorni”).

5 Mi Piace