モバイルのボトムバーの色を変更する

今日、サイトを正式に公開し、メールを送信して、人々がPWAをインストールするように促す予定でした:rofl::rofl::rofl:

お気持ちはわかりますが、それはあまり役に立つ回答ではありません。

現時点で申し上げられるのは、通常の動作を変更するような何かがあるように見えるということです。

インストールされているプラグインやテーマコンポーネントを確認していただけますか?他にカスタマイズを追加しましたか?

私のサイトだけではありません。すべてのディスコースサイトがそうですか???

Discourseで他のサイトとは異なる理由については、すでに説明しました。

お客様ですので、お客様が関連付けられているサイトはすでにわかります。ボタンの色は、先ほど共有したスクリーンショットとまったく同じです。あなたのものほど明るい色ではありません。

カスタマイズやコンポーネントがないデフォルトのテーマでも同じです。

「いいね!」 1

ボトムバーのボタンが非常に薄く表示される問題は、お使いのデバイス/OS固有のものです。私がテストした他のデバイスでは、OSがライトモードの場合、ボトムバーは白くなりますが、ボタンはグレーになり、表示されたままになります。したがって、お客様が見ている動作は一般的ではなく、他のユーザーには影響しません。

S ultra 22

Huawei mate20 pro

とはいえ、Android OSがライトモードのときにダークテーマのDiscourse PWAを使用する場合の体験が理想的でないことは理解しています。前述の通り、今後のアップデートでこのシナリオを改善する方法を検討するため、開発者およびデザイナーと内部で議論を開始します。

「いいね!」 1

これは奇妙で、あなたの言っていることと矛盾していますね。まるで当たって砕けろという感じです(笑)。

これはライトモードのSamsung S24です。

こちらはライトモードのGoogle Pixelです。

iPhoneの1台は、上記の@chapoiさんの問題と同様に、バーが全く読み込まれませんでした。

古いSamsung S22の1台は、白い下部バーと暗いアイコンで正しく読み込まれました。後ほどさらに10人にテストしてもらう予定で、さらにアップデートします。

「いいね!」 1

Chrome ブラウザは、Android のバージョンやデバイスなどによっては、場合によっては対応できると考えています。

PWA では、<meta name="theme-color"> は Android 版 Chrome の上部のアドレスバーの色を確実に変更します。manifest.jsontheme_color はステータスバーやその他の UI 部分に影響を与えることがありますが、動作はデバイス、ブラウザ、Android のバージョンによって異なります

ネイティブのボトムナビゲーションバーは、通常、Web アプリから制御することはできません。一部のブラウザはテーマカラーを適用する場合がありますが、保証はありません。

:up_arrow: これが、私がサイトを Bubblewrap を使用した TWA に変換した理由の 1 つであり、ボトムナビゲーションバーの色も処理できます。

したがって、PWA では上部バーをスタイル設定できますが、ボトムナビゲーションバーの制御は一貫性がありません


iPhone はこのナビゲーションバーを読み込みません。これは Android OS のネイティブ要素であるためです。

「いいね!」 2

これまでにこの問題に遭遇したことがないので、ただ奇妙です。WordPressのSuper PWAを9つのサイトで使用しましたが、問題はありませんでした。Discourseのものだけです。あなたが述べたように、あなたも同じ一貫性の問題を経験したとのことですが、彼らがボトムバーのスタイルをトップバーと同じようにしてくれることを願っています。それはすべてのデバイスで期待どおりに機能します。

@dax @chapoi さらに奇妙なことに、Firefox経由でPWAを携帯電話にインストールすると、完全に機能します。少なくとも、下のボタンが表示されるようになりました。

これはライトモードでの表示です。

「いいね!」 1

Firefoxで動作しChromeで動作しない理由は、各ブラウザがAndroidでPWAを処理する方法にあります。Chromeはシステムバーに着色するためにWebアプリマニフェストのtheme_colorのみを参照します。マニフェストがサイトのルートドメインから提供されていない場合や、正しい色を持っていない場合、Chromeは単に白にフォールバックします。Firefoxはより柔軟で、ページ自体から色を取得するため、カスタムマニフェストがなくてもバーは正しく表示されます。

そのため、今後、ダークパレットのホストされたDiscourseサイトがあり、ブランドに沿ってユーザーが選択できないように他のすべてのパレットを無効にしています。ユーザーが変更できないテーマが1つ有効になっています。

インストール可能なアプリがあることは私たちにとって重要なので、ChromeのPWAで下部バーを#121212にするにはどうすればよいですか?

ダークサイトと明るい下部バーは非常に気が散り、見栄えが悪いです。

前述の通り、このシナリオの改善策を検討するため、内部で議論を開始しました。しかし、Discourseのグローバルミートアップが間もなく開催されるため、チームは当面変更を加えることができません。残念ながら、現時点ではボトムバーが常に暗く表示されることを保証する回避策はありません。

迅速なフォローアップです。この件はエンジニアにレビューが割り当てられました。ただし、Discourseの年次ミートアップがすぐに開催されるため、短期的な更新(短期的な更新とは「数日」を意味します)はないと思いますのでご注意ください。

「いいね!」 5