ホーム画面に追加 (iOS, iPadOS)

|||
|-|-|-|
| :discourse2: | 概要 | Add To Home Screen (iOS, iPadOS) は、iOS デバイスのユーザーにポップアップを表示します。このポップアップは閉じることもでき、PWA を介して Discourse フォーラムを表示している場合には表示されません。
| :hammer_and_wrench:|リポジトリ| GitHub - discourse/discourse-apple-add-to-homescreen |
| :open_book:|Discourse テーマは初めてですか?| Discourse テーマの使用に関する初心者ガイド

このテーマコンポーネントをインストール

機能

このコンポーネントは、iOS デバイスのユーザーにポップアップを表示します。このポップアップは閉じることもでき、PWA を介して Discourse フォーラムを表示している場合には表示されません。

iPhone

iPad

設定

名前 説明
popup timer ポップアップが表示されるまでどのくらい待つべきか? (ミリ秒単位)
翻訳 デフォルト
pwa_text iOS デバイスに %{siteTitle} をインストールします。共有をタップし、「ホーム画面に追加」をタップします。

このテーマには、表示されるテキスト用と、ポップアップが表示されるまでの待機時間を決定するためのタイマー用の 2 つの設定が含まれています。これらの設定にはデフォルト値が設定されています。

このポップアップは、PWA を使用せずに Discourse フォーラムを表示している iPhone または iPad の iOS ユーザーにのみ表示されます。ユーザーが x アイコンをクリックしても、再度表示されることはありません。

表示テキストの編集

この領域を編集する際は、次の点に注意してください。

このテキストを編集し、siteTitle をここに残したい場合は、どこにでも %{siteTitle} を含めるようにしてください。


:discourse2: 当社でホストしていますか? テーマコンポーネントは、Standard、Business、Enterprise プランでご利用いただけます。

「いいね!」 26

素晴らしいアイデアです!ありがとうございます!この機能における問題は、これまでも、そしてこれからも、発見可能性です。

「いいね!」 8

Android のコアでは、ポップアップを表示するために trust level >= 1 チェックを使用しています。これはタイマーのように機能しますが、IMO の方が優れています。

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/pwa-install-banner.js#L41-L46

このコンポーネントも同じものを使用すべきでしょうか?:thinking:

また、Android と iOS の PWA インストールバナーをコアの単一コンポーネントにマージしたいと考えています!

「いいね!」 12

プッシュ通知について言及し、「デバイス」という言葉を避けるようにデフォルトのテキストを変更することを提案します。

たとえば、次のようなものはいかがでしょうか。

「プッシュ通知にサインアップするには、\u003cb\u003e%{siteTitle}\u003c/b\u003e をホーム画面に追加してください!共有をタップし、\u003cb\u003eホーム画面に追加\u003c/b\u003e をタップします。」

Discourseチームがこの件についてA/Bテストを実施し、ユーザーがプッシュ通知にサインアップする可能性が最も高い言語を見つけることができれば、特に役立つでしょう。

以下に、私が抱いている質問を挙げます。

  • 「追加」と「インストール」のどちらが良いですか?
  • ここでプッシュ通知について言及する方が良いですか、それとも言及を遅らせる方が良いですか?
  • インストールについて言及する場合、「アプリ」がインストールされると言った方が良いですか?「Webアプリ」ですか?
  • iPadはより多くのスペースがあります。より多くの言葉を使う方が良いですか?
「いいね!」 6

iPadでは、このバナーはあまり良くありません。バナーは画面の下部に表示されますが、共有ボタンは上部にあります。「ボタンはヘッダーの上にある」ことを示すかのように小さな上向き矢印 :up_arrow: がありますが、これで十分かどうかは疑問です。(これについてユーザーテストは行いましたか?専門知識のないiPadユーザーでこれが機能するのを見たことがありますか?)

また、「共有をタップ」するようにユーザーに指示しているのに、ボタンに「共有」という文字が表示されていないことも役に立ちません。矢印の付いた小さなボックスです。

image

何年も前に、私は次のようなポップアップを描画するcubiq/add-to-homescreenを使用していました。

Discourseがこれにもっと近いことをしてくれると嬉しいです。

現在、フライアウトはやや壊れやすいですが(ボタンが移動したらどうなるか?)、フライアウトが指している場所と正確に一致していなくても、おおよそ正しい場所にあれば問題ないと思います。

歴史的には、iOSのバージョンによってボタンの見た目が異なる可能性があるという危険もありました。しかし、共有ボタンはiOS 7以降形状が変わっておらず、iOS 17で変わる理由は特にないため、このようなアプローチはiPadでも機能すると思いますが、ヘッダーバーにある共有ボタンの場所を指し示す小さなフライアウトが必要です。

「いいね!」 3

これは良いフィードバックですね、ダン。

iPadが使用されているときに、このフライアウトをページの上部に表示する利点が見えます。

率直に言って、このコンポーネントのこのバージョンにこのアイコンを含めなかった理由は、このアイコンがFont-Awesome 6でのみ利用可能であり、Discourseは現在そのバージョンをまだサポートしていないためです。

「いいね!」 2

このような要望があるからこそ、このテキストは管理者が編集できるように設定しました。ポップアップに表示される内容は人それぞれ異なる可能性があるため、自由に編集してください。

「いいね!」 1

フォーラムでA/Bテストを行う権限がないと思います。そちらでA/Bテストを行うことは可能でしょうか?

それを実行する理由をユーザーに伝えますか?

「いいね!」 1

ご質問の意味がよくわかりません。もし彼らがすでにフォーラムにいるなら、それをiOSデバイスにインストールする理由は自明でしょう。

私の言いたいのは、AppleユーザーはApp Store経由でアプリをインストールすることにしか慣れていないということです。PWAが何であるかを理解している人はほとんどいないでしょう。インストールによる潜在的なメリットを知っている人はさらに少ないでしょう。

ブラウザ通知をA2HSの背後に置くことは、Appleにとって素晴らしい動きです。デスクトップでの通知に関する初期の問題を完全に解決します。

ホーム画面のアイコンがもう一つ増える以上のメリットを、ユーザーにどのように伝えればよいでしょうか?

「いいね!」 3

私は完全に(しかし、丁寧であることを願っていますが)反対です。私はDiscourseフォーラムを運営しており、それと他のものをホーム画面に追加しています。ここで議論した後でなければ、そのようにすることを考えもしませんでしたし、メリットも見ていません(通知が機能しない)ので、Hubアプリを使い続けています。

「いいね!」 2

ここでは、これをインストールした管理者からのフィードバックを収集せずに、お互いに仮定しているだけかもしれません。

とはいえ、テキストは100%カスタマイズ可能なので、管理者がさらに明確にする必要があると感じた場合は、非常に簡単にそうすることができます。

私のフィードバックは、PWAが通知を有効にするために必要なステップであると述べた後、特にクライアントから寄せられたものです。

コミュニティによって異なりますが、「アプリに追跡しないように依頼する」という時代のユーザーは、何らかのメリットがない限り、指示に盲目的に従う可能性は低いです。ユーザーにPWAのインストール方法を説明するだけで、その理由を説明しないのは、明らかに本質を覆い隠しています。

私はセルフホストされたインスタンスのいくつかでもこの問題が発生しましたが、push notification time window mins を 0 に変更したところ、私とほとんどのユーザーで解決しました。副作用として、Hubアプリの通知のタイミングの動作にも近くなります。

「いいね!」 3

このプラグインは手動で追加する必要がありました。

インストーラーでクリックしたときに、リポジトリが空でした。

申し訳ありませんでした。修正されたはずです。

「いいね!」 1

Nice component! I like how it’s implemented close to where the share buttons are. Agree that we should integrate this into core and the android banner.

I have an old unimplemented mockup from a while ago that might address some thoughts mentioned here:

The idea with the text here :point_up: was to have some sort of clear “what’s in it for me” — and literally show the site logo in an app-like way to make it a little clearer what this is all about.

That was mocked up for Android, which makes things easier because you can include a button that directly adds the PWA to your device.

Unfortunately iOS still requires you to go through their share sheet to get to this action… but I think we can have a button that triggers the share options? (we already do this for clicking the share icon on posts in iOS…)

素晴らしいコンポーネントですね!共有ボタンの近くに実装されている点が気に入りました。これをコア機能とAndroidバナーに統合すべきであることに同意します。

以前作成した、ここで述べられたいくつかの考えに対処できるかもしれない、未実装のモックアップがあります。

ここのテキスト :point_up: のアイデアは、「自分にとって何が得られるのか」を明確に示すようなもので、サイトのロゴをアプリのように表示して、これが何であるかをもう少し明確にすることでした。

これはAndroid用にモックアップされたもので、PWAをデバイスに直接追加するボタンを含めることができるため、物事が容易になります。

残念ながら、iOSではこのアクションにアクセスするために、まだ共有シートを経由する必要があります…しかし、共有オプションをトリガーするボタンを設置できるのではないでしょうか?(iOSでは、投稿の共有アイコンをクリックするためにすでにこれを行っています…)

「いいね!」 4

iOSではできません。navigator.share()で共有シートを開くことはできますが、「ホーム画面に追加」ボタンは含まれていません。A2HS(Add to Home Screen)のためには、ユーザーが手動で小さな共有ボタンをクリックする必要があります。そのため、このようなものが必要になります。

「いいね!」 1

古いiOSバージョン(16.4より前)のままでした:Live notifications: "Notifications are not supported on this browser. Sorry."