Discourse を PWA としてインストールしやすくする

ええと、何をしてもPNGに変換したファイルがJPEGとして表示されてしまいます。最初はプレビューアプリの変換が不適切だったのかと思いましたが、その後、信頼できるAffinity Photoでも試しました。

その設定は「リセット」オプションがないため、変更した覚えはありません。

PNGの別の画像をアップロードすると、タイプが固定されていることがわかります。このファイルには、Discourseが変換したくなる何らかの要素があるようです。何かアイデアはありますか?

「いいね!」 3

既知(ただしあまり知られていない)バグに遭遇しました。これは上記のコミットで修正されています。ただし、そのコミットはまだ Discourse の安定版リリースには含まれていません。

「元の JPG の再圧縮品質」を「100」に「一時的に」設定することで、変換が発生するのを防ぐことができます。

(あるいは、エクスポートする PNG の品質を「元の JPG の再圧縮品質」設定の値より低くしてみることもできます。)

ロゴをアップロードした後、その設定を元の値に戻すことを忘れないでください!

「いいね!」 3

1週間で Discourse のバグを 2 つも見つけてしまったので、バッジをもらえるべきだと思います :slight_smile:

しかし、その 2 つの手順を踏んだにもかかわらず、ファイルは依然として JPEG に変換されてしまいます。設定を 100% にし、画像を 92% の品質で JPG として保存した後、PNG としてエクスポートしました(PNG の品質を直接変更できないのでしょうか?)。他に回避策や、私が何か間違っている可能性のある点はありますか?

「いいね!」 1

stable ブランチに切り替えた後、既知の問題を再現できました:

ただし、提案された回避策では問題を再現できませんでした:

正直なところ、少し困惑しています!

Mozilla Firefox でも表示されません。

なぜ iOS デバイス(特に PWA をサポートするようになった現在)でインストールバナーが表示されないのでしょうか?何か理由があるのでしょうか?

はい、私の Pixelbook Go でも非常にうまく動作します。Chrome OS において PWA は必須です。

iOS のブラウザにはこの機能が含まれておらず、追加する予定もないためです。

「いいね!」 2

以前提案したように、ウェブサイトにPWAをインストールするためのボタンやリンクをどこかに設置するのはなぜでしょうか。詳しくはこの記事をご覧ください。

これは何年も前からあります:

申し訳ありませんが、PWA を持っていないユーザー向けに、より目立たない恒久的なボタンやリンク(例えばメニュー内など)についてお話ししています。

これが有用だと考える理由は、アプリのインストールを希望するユーザーがいた場合、そのユーザーの現在の状態が不明であり、Q&A に多大な労力を要するためです。もし、以下のようにはっきりとした 2 段階のプロセスを提供できれば大変助かります。つまり、「ハンバーガーメニューへ移動 → アプリをインストール」です。こうすれば、ユーザーの言語設定、訪問回数、過去にバナーを閉じたかどうか、アンインストールの有無、使用しているブラウザやそのブラウザがインストールオプションをどう表現しているかといった点を気にする必要がなくなります。

「いいね!」 3

それはまさに既存のワークフローそのものです😂

ここでの混乱の多く(私自身の混乱も含めて)は、ブラウザによって異なる PWA インストールオプションが存在することにあると思います。

  1. Android Chrome(デフォルトのブラウザ):あなたが投稿したスクリーンショットはおそらくここから取得されたものと思われます。ここではハンバーガーメニューに「アプリをインストール」が表示されているようです。すべてのブラウザで利用可能であれば素晴らしいのですが、現時点ではそれは不可能なようです。

  2. iPhone Safari(デフォルトのブラウザ):ハンバーガーメニューにはインストールボタンはありません。インストールするには、共有アイコン(上矢印の四角)をタップし、下にスクロールして「ホーム画面に追加」を選択する必要があります。ここでの議論から、ハンバーガーメニューにボタンを追加することは不可能だと推測されます。これでアプリがホーム画面に保存されますが、それだけで前の状態を保存するなどの PWA 機能が得られるかどうかはわかりません。

  3. デスクトップ Chrome:私の Mac の Chrome ブラウザでは、ハンバーガーメニューにインストールボタンがありません。そこに表示されるべきでしょうか?追加することは可能でしょうか?

  4. デスクトップ Safari:私の Mac の Safari ブラウザでも、ハンバーガーメニューにインストールボタンはありません。そこに表示されるべきでしょうか?追加することは可能でしょうか?

「いいね!」 1

はい、@JQ331 の言うとおりです。

Falco の提案は Chrome のメニューです。ここでいう「ハンバーガーメニュー」とはブラウザのものではなく、Discourse のメニューを指します。上記でも指摘されている通り、この機能は Safari や Firefox では動作しないため、ブラウザに依存します。もしそれらのブラウザでもインストール可能だとしても、そのオプションが提供されていないのであれば、Discourse のメニューオプションとして実装するのが最善でしょう。さらに、ユーザーが Chrome のメニューを全く確認しない可能性もあるため、このオプションの存在をユーザーに思い出させるという点でも、Discourse のメニューに含めるのが適切です。

「いいね!」 1

Appleが管理する任何东西にインストールボタンを追加することはできず、Appleは開発者がそうしたボタンを作成することを許可したくないと複数回述べています。

私の環境では表示されています:

また、デスクトップ版ではアドレスバーにも表示されます。

JPG ロゴの問題により、あなたのウェブサイトでは表示されません。PWA は急速に変化する分野であり、基準も常に変更されています。PWA との互換性を最大化したい場合は、デフォルトのリリースチャンネルを使用することをお勧めします。

「いいね!」 3

私が言及していたのは、Discourse のハンバーガーメニュー(Chrome メニューではありません)です。実際、今気づいたのですが、Android のスクリーンショットも Chrome メニューからのもので、Discourse のハンバーガーメニューからのものではありませんでした。

Discourse のハンバーガーメニューにそのボタンがあれば良いのですが、ユーザーはより頻繁にそれを目にするようになり、PWA としてインストールする方法をユーザーに案内する際にも、より明確になるでしょう。大規模な開発者の努力を要するものではないかもしれませんが、ちょっとした親切な配慮になると思います。

インストールのプロンプトが表示されるのはChromium系ブラウザのようです。Mozilla FirefoxとSafariは異なるレンダリングエンジンに基づいています。

「いいね!」 1

テーマコンポーネントを作成するだけで、ボタンを追加できます。

新しいテーマコンポーネントを作成し、以下のような JavaScript コードをヘッダーなどに追加してください。

<script>
    let deferredPrompt; // インストールプロンプトを表示するための変数
    const installButton = document.getElementById("install_button");

    window.addEventListener("beforeinstallprompt", e => {
      console.log("beforeinstallprompt fired");
      // Chrome 76 以前で自動的にプロンプトが表示されるのを防ぐ
      e.preventDefault();
      // イベントを保存して後でトリガーできるようにする
      deferredPrompt = e;
      // インストールボタンを表示
      installButton.hidden = false;
      installButton.addEventListener("click", installApp);
    });

    function installApp() {
      // プロンプトを表示
      deferredPrompt.prompt();
      installButton.disabled = true;

      // ユーザーの応答を待つ
      deferredPrompt.userChoice.then(choiceResult => {
        if (choiceResult.outcome === "accepted") {
          console.log("PWA setup accepted");
          installButton.hidden = true;
        } else {
          console.log("PWA setup rejected");
        }
        installButton.disabled = false;
        deferredPrompt = null;
      });
    }

    window.addEventListener("appinstalled", evt => {
      console.log("appinstalled fired", evt);
    });
</script>

また、インストールボタンを表示したい場所に以下の HTML を配置してください。

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

このボタンはデフォルトでは非表示で、PWA がインストールされていない場合にのみ表示されます。

Chrome 上でテスト済みです。

「いいね!」 6

素晴らしいですね!これを正式なテーマコンポーネントとして公開するご検討はなさいますか?あるいは、もっと良い案として、ハンバーガーリンクのテーマコンポーネントにこれを追加して修正していただけませんか?なぜなら、私がそれを置きたいのはまさにその場所だからです!

「いいね!」 2

インストールボタンをハンバーガーメニューに表示できるようにする修正済みのコードをアップロードしていただけますか?

「いいね!」 1

これを機能させることができません。確かに、これらすべてに慣れていません。

コンポーネントをロードし、ヘッダーにjsを追加し、コンポーネントをデフォルトテーマに設定しました。

しかし、HTMLスクリプトはどうでしょうか?投稿にHTMLを含めることは可能ですか?そうではないようです。そうでない場合、どこに実際に役立つように配置できますか?

ありがとうございます!これが私を助けることを本当に願っています。

これはAndroidでしか動作しないと思いますか?