Wow, non importa cosa faccio, questo file che ho convertito in PNG viene visualizzato come JPEG. All’inizio pensavo che Anteprima avesse fatto un lavoro di conversione scadente, ma poi ho usato Affinity Photo, che dovrebbe essere affidabile.
Non credo di aver modificato quell’impostazione, dato che non ha l’opzione ‘reset’ accanto.
Quando carico un’immagine diversa che è un PNG, vedo che il tipo rimane quello. C’è qualcosa in questo file che Discourse vuole davvero convertire. Idee?
Hai incontrato un bug noto (sebbene oscuro!), che è stato corretto dal commit sopra. Tuttavia, quel commit non è ancora presente in una versione stabile di Discourse.
Impostare temporaneamente “recompress original jpg quality” a 100 dovrebbe impedire che avvenga la conversione.
(…e/o potresti provare a ridurre la qualità del PNG che stai esportando a un valore inferiore rispetto a quello dell’impostazione “recompress original jpg quality”.)
Assicurati solo di riportare quell’impostazione al valore precedente dopo aver caricato il tuo logo!
Credo di meritare un badge per aver scoperto due bug di Discourse in una settimana. 
Tuttavia, nonostante abbia seguito entrambi i passaggi, il file viene comunque convertito in JPEG. Ho impostato la qualità al 100%, ho salvato l’immagine come JPG al 92% e poi l’ho esportata in PNG (non sono riuscito a modificare direttamente la qualità del PNG?). Avete altre idee per soluzioni alternative o potrei aver commesso un errore?
Dopo essere passato al ramo stable, riesco a riprodurre il problema (noto):
Ma non riesco a riprodurre il problema con la soluzione alternativa suggerita:
Sono un po’ confuso, temo!
Non appare nemmeno su Mozilla Firefox.
C’è un motivo per cui la barra di installazione non appare sui dispositivi iOS (specialmente ora che supportano le PWA)?
Sì, funziona in modo incredibile sul mio Pixelbook Go. Le PWA sono indispensabili su Chrome OS.
Perché il browser iOS non dispone di questa funzione e non prevede di aggiungerla.
Quello che ho suggerito prima è: perché non dovrebbe esserci un pulsante o un link da qualche parte sul sito web per installare la PWA, come spiegato in questo articolo.
Lo abbiamo già da anni:
Scusa, mi riferisco a un pulsante/collegamento persistente meno visibile, forse in un menu, per gli utenti senza PWA.
Il motivo per cui lo ritengo utile è che, quando abbiamo un utente che desidera installare l’app, non sappiamo in che stato si trovi e richiedere un Q&A richiede molta energia. Sarebbe fantastico se potessimo fornire loro un processo infallibile in due passaggi: ad esempio, vai al menu hamburger > Installa app. In questo modo non dovremo preoccuparci della loro lingua, del numero di visite, se hanno chiuso un banner o disinstallato in passato, o di quale browser stiano utilizzando e di come questo presenti l’opzione di installazione.
Probabilmente gran parte della confusione qui (inclusa la mia) deriva dal fatto che l’opzione di installazione PWA varia a seconda del browser:
Chrome su Android (cioè il browser predefinito): Immagino che sia lì che hai ottenuto gli screenshot che hai pubblicato. Quindi sembra che qui ci sia un “Installa app” nel menu hamburger. Sarebbe ottimo se fosse disponibile su tutti i browser, ma sembra che al momento non sia possibile.
Safari su iPhone (browser predefinito): Non c’è un pulsante per installare dal menu hamburger. Per installare, devi andare sull’icona Condividi (quadrato con freccia verso l’alto) e scorrere fino a “Aggiungi alla schermata Home”. Immagino, dalla discussione qui, che non sia possibile aggiungere il pulsante al menu hamburger. Questo salva comunque l’app sulla schermata Home, anche se non sono sicuro che questo da solo le conferisca la funzionalità PWA, come il salvataggio dello stato precedente.
Chrome su desktop: Non ho il pulsante di installazione nel menu hamburger sul mio browser Chrome per Mac. Dovrebbe esserci? Potrebbe essere aggiunto lì?
Safari su desktop: Non ho nemmeno il pulsante di installazione nel menu hamburger sul mio browser Safari per Mac. Dovrebbe esserci? Potrebbe essere aggiunto lì?
Sì, concordo con quanto dice @JQ331.
La soluzione di Falco è il menu di Chrome. Con “menu hamburger” mi riferisco a quello di Discourse, non a quello del browser. Dato che alcuni utenti sopra hanno fatto notare che non funziona su Safari o Firefox, questa opzione dipende dal browser. Supponendo che possa essere installata anche lì, l’opzione semplicemente non viene proposta; sembra quindi meglio un’opzione nel menu di Discourse. Inoltre, ricorda all’utente che questa opzione esiste, anche se potrebbe non guardare mai nel menu di Chrome.
Non è possibile aggiungere pulsanti di installazione su anything controllato da Apple, e Apple ha dichiarato più volte di non voler permettere agli sviluppatori di creare tali pulsanti, mai.
Per me c’è:
È anche presente nella barra degli indirizzi su desktop.
Non lo vedi sul tuo sito a causa della questione del logo JPG. PWA è un bersaglio in rapida evoluzione e i criteri cambiano continuamente. Ti consiglio di utilizzare il nostro canale di rilascio predefinito se desideri la massima compatibilità con PWA.
Mi riferivo al menu hamburger di Discourse (non al menu di Chrome). In realtà, ora vedo che gli screenshot di Android provenivano anch’essi dal menu di Chrome, non dal menu hamburger di Discourse.
Sarebbe bello avere il pulsante nel menu hamburger di Discourse: l’utente lo vedrebbe più spesso e sarebbe un po’ più chiaro per quanto riguarda le istruzioni per l’installazione come PWA. Probabilmente non vale la pena di un grande sforzo di sviluppo, ma sarebbe un tocco utile.
I browser Chromium sembrano essere gli unici a mostrare il prompt di installazione. Mozilla Firefox e Safari si basano su motori di rendering diversi.
Ho semplicemente aggiunto il pulsante creando un componente del tema.
Basta creare un nuovo componente del tema..
aggiungi il seguente codice JS, ad esempio nell’header
<script>
let deferredPrompt; // Consente di mostrare il prompt di installazione
const installButton = document.getElementById("install_button");
window.addEventListener("beforeinstallprompt", e => {
console.log("beforeinstallprompt attivato");
// Previene la visualizzazione automatica del prompt in Chrome 76 e versioni precedenti
e.preventDefault();
// Salva l'evento per poterlo attivare in seguito.
deferredPrompt = e;
// Mostra il pulsante di installazione
installButton.hidden = false;
installButton.addEventListener("click", installApp);
});
function installApp() {
// Mostra il prompt
deferredPrompt.prompt();
installButton.disabled = true;
// Attendi che l'utente risponda al prompt
deferredPrompt.userChoice.then(choiceResult => {
if (choiceResult.outcome === "accepted") {
console.log("Configurazione PWA accettata");
installButton.hidden = true;
} else {
console.log("Configurazione PWA rifiutata");
}
installButton.disabled = false;
deferredPrompt = null;
});
}
window.addEventListener("appinstalled", evt => {
console.log("appinstalled attivato", evt);
});
</script>
E inserisci il seguente HTML ovunque desideri il pulsante di installazione
<button id="install_button" hidden>Installa</button>
è nascosto per impostazione predefinita e apparirà se la PWA non è installata.
L’ho testato su Chrome.
Brillante! Non pensi di volerlo rendere un componente tema formale? O, ancora meglio, di modificare il componente tema dei link Hamburger per includerlo? Perché è lì che lo vorrei!
Puoi caricare il codice modificato in modo che il pulsante ‘Installa app’ venga visualizzato nel menu hamburger???
Non riesco a far funzionare questo. Ammetto di essere nuovo a tutto questo.
Ho caricato il componente, aggiunto il js all’header, impostato il componente sul tema predefinito.
Ma poi lo script HTML – è possibile avere HTML in un post? Non mi sembra. Se no, dove posso inserirlo in modo utile?
Grazie! Spero davvero che questo possa aiutarmi.
Immagino che questo funzionerà solo su Android?