Einfachere Installation von Discourse als PWA

[John_Lehmann]

Wow, egal was ich tue, diese in PNG konvertierte Datei wird als JPEG angezeigt. Zuerst dachte ich, dass die Vorschau eine schlechte Konvertierung durchgeführt hat, aber dann habe ich Affinity Photo verwendet, das vertrauenswürdig sein sollte.

Ich glaube nicht, dass ich diese Einstellung geändert habe, da sie keine Option zum Zurücksetzen daneben hat.

Wenn ich ein anderes Bild hochlade, das ein PNG ist, bleibt der Typ bestehen. Bei dieser Datei scheint es etwas zu geben, das Discourse wirklich konvertieren möchte. Ideen?

[jamie.wilson]

FIX: should_alter_quality should respect png_to_jpg_quality (#12055)

Du bist auf einen bekannten (wenn auch seltenen!) Fehler gestoßen, der durch den obigen Commit behoben wurde. Dieser Commit ist jedoch noch nicht in einer stabilen Version von Discourse enthalten.

Durch temporäres Setzen von recompress original jpg quality auf 100 sollte die Konvertierung verhindert werden.

(…oder du könntest versuchen, die Qualität des PNGs, das du exportierst, unter den Wert der Einstellung recompress original jpg quality zu senken.)

Stelle nur sicher, dass du diese Einstellung nach dem Hochladen deines Logos wieder auf den vorherigen Wert zurücksetzt!

[John_Lehmann]

Ich glaube, ich sollte eine Auszeichnung dafür bekommen, dass ich in einer Woche auf zwei Discourse-Fehler gestoßen bin.

Dennoch habe ich beide Schritte durchgeführt, und die Datei wird trotzdem noch in JPEG konvertiert. Ich habe die Einstellung auf 100 % gesetzt und mein Bild als JPG mit 92 % gespeichert und dann als PNG exportiert (ich konnte die Qualität direkt beim PNG nicht ändern?). Gibt es noch andere Workaround-Ideen oder habe ich vielleicht etwas falsch gemacht?

[jamie.wilson]

@John_Lehmann

Ich habe beide Schritte durchgeführt, und doch wird die Datei weiterhin in JPEG konvertiert.

Nach dem Wechsel auf den stable-Branch kann ich das (bekannte) Problem reproduzieren:

Aber ich kann das Problem mit dem vorgeschlagenen Workaround nicht reproduzieren:

Ich bin ehrlich gesagt etwas ratlos!

[anon82467725]

@JQ331

Wie mir bekannt ist, gibt es auf Macs in Safari keine Option zur Installation als PWA.

Sie erscheint auch nicht in Mozilla Firefox.

@Falco

Discourse macht das standardmäßig, sofern ein Benutzer beide Chrome-Kriterien erfüllt und TL1+ ist.

Gibt es einen Grund, warum das Installations-Banner auf iOS-Geräten nicht erscheint (besonders jetzt, wo sie PWAs unterstützen)?

@codinghorror

Ich kann bestätigen, dass PWA zumindest auf meinem Chromebook hervorragend funktioniert! Ich habe PWA sowohl für Meta als auch für unser internes Discourse eingerichtet

Ja, es funktioniert auf meinem Pixelbook Go fantastisch. PWAs sind unter Chrome OS ein Muss.

[Falco]

@anon82467725

Gibt es einen Grund, warum das Installationsbanner auf iOS-Geräten nicht erscheint (besonders jetzt, wo sie PWAs unterstützen)?

Weil der iOS-Browser diese Funktion nicht hat und keine Pläne hat, sie hinzuzufügen.

[John_Lehmann]

Was ich vorhin vorgeschlagen habe, ist: Warum sollte es nicht irgendwo auf der Website eine Schaltfläche oder einen Link zum Installieren der PWA geben, wie in diesem Artikel erläutert?

[Falco]

Das haben wir schon seit Jahren:

Encourage members to install WebApp

We already have a PWA install promotion banner built-in. It is triggered after a logged in user hits Trust Level 1, and shows a banner at the top promoting the install. [Screenshot_20200107-173403]

[John_Lehmann]

Entschuldigung, ich spreche von einem weniger auffälligen, persistenten Button/Link, vielleicht in einem Menü, für Benutzer ohne PWA.

Der Grund, warum ich das als nützlich erachte, ist folgender: Wenn wir einen Benutzer haben, der die App installieren möchte, wissen wir nicht, in welchem Zustand er sich befindet, und eine Q&A kostet viel Energie. Es wäre großartig, wenn es einen absolut zuverlässigen 2-Schritte-Prozess gäbe, den wir ihnen anbieten könnten: z. B. zum Hamburger-Menü gehen > App installieren. Dann müssen wir uns keine Gedanken mehr über ihre TL machen, wie viele Besuche sie hatten, ob sie ein Banner zuvor abgelehnt oder die App deinstalliert haben, welchen Browser sie verwenden oder wie dieser die Installationsoption formuliert.

[Falco]

@John_Lehmann

Es wäre toll, wenn es einen absolut zuverlässigen Zwei-Schritte-Prozess gäbe, den wir ihnen anbieten könnten.

Das ist genau der bestehende Workflow

@John_Lehmann

Zum Hamburger-Menü gehen

@John_Lehmann

App installieren

[JQ331]

@Falco

Das ist doch genau der bestehende Arbeitsablauf

Viel der Verwirrung hier (auch bei mir) rührt wahrscheinlich daher, dass es je nach Browser eine unterschiedliche Option zur Installation einer PWA gibt:

1. Android Chrome (d. h. Standardbrowser): Ich gehe davon aus, dass Sie die Screenshots, die Sie gepostet haben, von dort haben. Es sieht also so aus, als gäbe es hier eine „App installieren“-Option im Hamburger-Menü. Es wäre großartig, wenn dies bei allen Browsern verfügbar wäre, aber es scheint, als sei das derzeit nicht möglich.

2. iPhone Safari (Standardbrowser): Es gibt keine Schaltfläche zum Installieren im Hamburger-Menü. Um zu installieren, müssen Sie auf das Teilen-Symbol (Quadrat mit Pfeil nach oben) tippen und nach unten scrollen, bis Sie „Zum Startbildschirm hinzufügen“ sehen. Ich nehme an, basierend auf der Diskussion hier, dass es nicht möglich ist, die Schaltfläche zum Hamburger-Menü hinzuzufügen. Dies speichert die App zwar auf dem Startbildschirm, aber ich bin mir nicht sicher, ob das allein die PWA-Funktionalität bietet, wie etwa das Speichern des vorherigen Zustands.

3. Desktop Chrome: Ich habe die Installations-Schaltfläche im Hamburger-Menü meines Mac-Chrome-Browsers nicht. Sollte sie dort sein? Könnte sie dort hinzugefügt werden?

4. Desktop Safari: Ich habe die Installations-Schaltfläche im Hamburger-Menü meines Mac-Safari-Browsers ebenfalls nicht. Sollte sie dort sein? Könnte sie dort hinzugefügt werden?

[John_Lehmann]

Ja, genau das sagt @JQ331.

Die Lösung von Falco ist das Chrome-Menü. Mit Hamburger-Menü meine ich das Discourse-Menü, nicht das des Browsers. Da einige oben darauf hingewiesen haben, dass es in Safari oder Firefox nicht funktioniert, ist diese Option browserabhängig. Unter der Annahme, dass es dort installiert werden kann, wird die Option einfach nicht angeboten; eine Discourse-Menüoption scheint daher am besten zu sein. Außerdem erinnert dies den Nutzer daran, dass diese Option existiert, da er möglicherweise nie sein Chrome-Menü durchsucht.

[Falco]

Du kannst keine Installationsbuttons auf Elementen hinzufügen, die von Apple kontrolliert werden. Apple hat mehrfach betont, dass sie Entwicklern nicht erlauben wollen, solche Buttons zu erstellen.

@JQ331

Desktop Chrome: Ich habe im Hamburger-Menü meines Mac-Chrome-Browsers keinen Installationsbutton. Soll er dort sein? Könnte er dort hinzugefügt werden?

Bei mir ist er vorhanden:

Er befindet sich auch in der Adressleiste auf dem Desktop.

Du siehst ihn auf deiner Website nicht wegen des Problems mit dem JPG-Logo. PWA ist ein sich schnell entwickelndes Ziel, und die Kriterien ändern sich ständig. Ich empfehle dir, unseren Standard-Release-Kanal zu verwenden, wenn du maximale PWA-Kompatibilität erreichen möchtest.

[JQ331]

@Falco

Bei mir ist es vorhanden:

Ich habe mich auf das Discourse-Hamburger-Menü bezogen (nicht das Chrome-Menü). Tatsächlich stammen die Android-Bildschirmaufnahmen jetzt auch vom Chrome-Menü, nicht vom Discourse-Hamburger-Menü.

Es wäre schön, den Button im Discourse-Hamburger-Menü zu haben – der Nutzer würde ihn öfter sehen, und es wäre etwas klarer, wie man Benutzern die Installation als PWA erklären kann. Wahrscheinlich ist der Aufwand für die Entwickler nicht groß, aber es wäre eine hilfreiche Ergänzung.

[anon82467725]

@John_Lehmann

Da einige Personen oben darauf hingewiesen haben, dass es in Safari oder Firefox nicht funktioniert, hängt diese Option vom Browser ab.

Chromium-Browser scheinen die einzigen zu sein, die die Installationsaufforderung anzeigen. Mozilla Firefox und Safari basieren auf unterschiedlichen Rendering-Engines.

[surajmpatel (Suraj Patel)]

Ich habe den Button einfach durch Erstellen eines Theme-Komponenten hinzugefügt.

Erstellen Sie einfach eine neue Theme-Komponente.

Fügen Sie den folgenden JS-Code beispielsweise im Header hinzu:

<script>
    let deferredPrompt; // Ermöglicht das Anzeigen der Installationsaufforderung
const installButton = document.getElementById("install_button");

window.addEventListener("beforeinstallprompt", e => {
  console.log("beforeinstallprompt ausgelöst");
  // Verhindert, dass Chrome 76 und älter automatisch eine Aufforderung anzeigen
  e.preventDefault();
  // Speichern des Ereignisses, damit es später ausgelöst werden kann.
  deferredPrompt = e;
  // Installationsbutton anzeigen
  installButton.hidden = false;
  installButton.addEventListener("click", installApp);
});
function installApp() {
  // Aufforderung anzeigen
  deferredPrompt.prompt();
  installButton.disabled = true;

  // Auf die Antwort des Benutzers auf die Aufforderung warten
  deferredPrompt.userChoice.then(choiceResult => {
    if (choiceResult.outcome === "accepted") {
      console.log("PWA-Setup akzeptiert");
      installButton.hidden = true;
    } else {
      console.log("PWA-Setup abgelehnt");
    }
    installButton.disabled = false;
    deferredPrompt = null;
  });
}
window.addEventListener("appinstalled", evt => {
  console.log("appinstalled ausgelöst", evt);
});
</script>

Platzieren Sie den folgenden HTML-Code dort, wo Sie den Installationsbutton benötigen:

<button id="install_button" hidden>Installieren</button>

Er ist standardmäßig ausgeblendet und erscheint, wenn die PWA nicht installiert ist.

Ich habe es für Chrome getestet.

[nathank (Nathan Kershaw)]

@surajmpatel

Erstellen einer Theme-Komponente.

Brillant! Würden Sie in Erwägung ziehen, daraus eine formale Theme-Komponente zu machen? Oder noch besser: die Theme-Komponente für Hamburger-Links so anzupassen, dass sie diese enthält? Denn genau dort möchte ich sie haben!

[john_scalton]

Könntest du bitte den modifizierten Code hochladen, durch den der Install-App-Button im Hamburger-Menü angezeigt wird???

[bengrover]

Ich kann das irgendwie nicht zum Laufen bringen. Zugegebenermaßen bin ich neu in all dem.

Ich habe die Komponente geladen, das JS zum Header hinzugefügt und die Komponente auf das Standardthema gesetzt.

Aber dann das HTML-Skript – ist es möglich, HTML in einem Beitrag zu haben? Es scheint nicht so. Wenn nicht, wo kann ich es sinnvoll einsetzen?

Danke! Ich hoffe wirklich, dass mir das helfen könnte.

[th21]

Ich schätze, das funktioniert nur unter Android?