Добавить на главный экран (iOS, iPadOS)

[Discourse]

| |
| - | - | - |
| | Резюме | Добавить на главный экран (iOS, iPadOS) добавляет всплывающее окно для пользователей устройств iOS. Это окно можно закрыть, и оно не будет отображаться, если вы просматриваете форум Discourse через PWA.
| | Репозиторий | GitHub - discourse/discourse-apple-add-to-homescreen · GitHub |
| | Новичок в темах Discourse? | Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Поскольку это #официальный компонент темы, поддерживаемый командой Discourse, запросы на #поддержку, сообщения об #ошибках, предложения по улучшению ux и запросы на новые #функции можно отправлять в соответствующие категории здесь, на Meta, с тегом соответствующего компонента темы. Нажмите на ссылку ниже, чтобы начать.

 Поддержка  Ошибка  UX  Функция

Возможности

Этот компонент добавляет всплывающее окно для пользователей устройств iOS. Это окно можно закрыть, и оно не будет отображаться, если вы просматриваете форум Discourse через PWA.

iPhone

iPad

Настройки

Название	Описание
таймер всплывающего окна	Как долго должно ждать всплывающее окно перед появлением? (в миллисекундах)

Перевод	Значение по умолчанию
pwa_text	Установите %{siteTitle} на ваше устройство iOS. Нажмите на значок «Поделиться», а затем «Добавить на главный экран».

Эта тема включает две настройки: одну для отображаемого текста и одну для таймера, определяющего, как долго ждать до появления всплывающего окна. Эти настройки имеют значения по умолчанию.

Это всплывающее окно будет отображаться только для пользователей iOS на iPhone или iPad, которые не используют PWA для просмотра форума Discourse. Оно не появится снова, если пользователь нажмет на значок x.

Редактирование отображаемого текста

При редактировании этого раздела обратите внимание на следующее:

Если вы хотите изменить этот текст и сохранить siteTitle, обязательно оставьте %{siteTitle} в тексте в любом удобном для вас месте.

Размещено нами? Компоненты тем доступны для использования на наших тарифах Standard, Business и Enterprise.

[merefield (Robert)]

Отличная идея! Спасибо! Проблема всегда заключалась и будет заключаться в том, как найти эту функцию.

[Falco]

@Джордан Видрин

один для таймера, чтобы решить, сколько ждать до появления всплывающего окна

В ядре для Android мы используем проверку trust level >= 1 для отображения всплывающего окна, что работает как таймер, но, на мой взгляд, лучше:

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

Интересно, стоит ли этому компоненту использовать то же самое

Также я бы с радостью объединил баннеры установки PWA для Android и iOS в единый компонент в ядре!

[dfabulich (Dan Fabulich)]

Я предлагаю, чтобы текст по умолчанию упоминал push-уведомления и избегал упоминания «устройства».

Например, что-то вроде:

«Добавьте %{siteTitle} на главный экран, чтобы подписаться на push-уведомления! Нажмите «Поделиться», а затем «Добавить на главный экран»».

Особенно полезно было бы, если бы команда Discourse провела A/B-тестирование этого текста, чтобы найти формулировку, которая с наибольшей вероятностью побудит пользователей подписаться на push-уведомления.

Вот вопросы, которые у меня есть:

• Что лучше: сказать «Добавить» или «Установить»?
• Лучше ли упоминать push-уведомления здесь или отложить это упоминание?
• Если мы упоминаем установку, стоит ли говорить, что устанавливается «приложение»? Или «веб-приложение»?
• На iPad больше места. Лучше ли использовать больше слов?

[dfabulich (Dan Fabulich)]

На iPad этот баннер не очень хорош. Баннер появляется в нижней части экрана, но кнопка «Поделиться» находится вверху. Я вижу маленькую стрелку вверх , как будто она говорит: «Эй, кнопка в заголовке», но сомневаюсь, что этого будет достаточно. (Вы проводили пользовательское тестирование этого? Видели ли вы, как это работает для неопытных пользователей iPad?)

Также не помогает то, что мы просим пользователя «нажать «Поделиться», но кнопка явно не называется «Поделиться». Это маленький квадрат со стрелкой.

Много лет назад я использовал https://github.com/cubiq/add-to-homescreen, который отображал всплывающее окно вроде этого:

Мне бы очень хотелось, чтобы Discourse сделал что-то подобное.

Теперь всплывающая подсказка довольно хрупкая (что если кнопка переместится?), но, думаю, тоже нормально, если кнопка находится не точно там, куда указывает подсказка, главное, чтобы она была примерно в нужном месте.

Исторически было также рискованно, что кнопка может выглядеть по-разному от одной версии iOS к другой. Но кнопка «Поделиться» не меняла свой вид с iOS 7, и нет особых причин полагать, что она изменится в iOS 17, поэтому я думаю, что такой подход будет работать на iPad: с небольшой всплывающей подсказкой, указывающей на то место, где, вероятно, находится кнопка «Поделиться» в строке заголовка.

[jordan.vidrine]

Это хороший отзыв, Дэн.

Я вижу пользу от отображения этого всплывающего окна в верхней части страницы при использовании iPad.

Если быть совсем откровенным, мы не включили эту иконку в эту версию компонента, потому что она доступна только в Font-Awesome 6, а Discourse пока не поддерживает эту версию.

[jordan.vidrine]

Именно поэтому я сделал этот текст редактируемым администратором. У каждого может быть своё мнение о том, что должно быть написано в этом всплывающем окне, так что не стесняйтесь изменить его на своё усмотрение.

[dfabulich (Dan Fabulich)]

Я не думаю, что у меня есть возможность провести A/B-тестирование на моём форуме. Не могли бы вы это сделать?

[Stephen]

Сообщает ли это пользователю, почему ему может быть полезно это сделать?

[jordan.vidrine]

Не совсем уверен, что понял ваш вопрос. Если они уже есть на форуме, причина установки на их устройство iOS, вероятно, очевидна.

[Stephen]

Моя мысль в том, что пользователи Apple привыкли устанавливать приложения только через App Store. Очень немногие понимают, что такое PWA. Ещё меньше знают о потенциальных преимуществах установки.

Размещение браузерных уведомлений за функцией A2HS — отличное решение со стороны Apple. Это полностью решает ранние проблемы с уведомлениями на десктопе.

Как мы можем объяснить пользователям, что они получат взамен, помимо ещё одной иконки на главном экране?

[Jonathan5]

@Jordan Vidrine

Причина установки этого на их устройство iOS очевидна

Я полностью (но, надеюсь, вежливо) не согласен. Я управляю форумом Discourse, и добавил его и другие приложения на главный экран. Я подумал об этом только после обсуждений здесь, но не увидел никаких преимуществ (уведомления не работают), поэтому продолжил использовать приложение Hub.

[jordan.vidrine]

@Stephen

Моя мысль в том, что пользователи Apple привыкли устанавливать приложения только через App Store. Очень немногие понимают, что такое PWA.

Думаю, мы оба делаем предположения, не получив обратной связи от администраторов, которые уже установили это.

Тем не менее, текст на 100% настраиваемый, поэтому, если администратор сочтет необходимым дать дополнительные пояснения, он сможет легко это сделать.

[Stephen]

@Джордан Видрин

Думаю, мы оба здесь просто делаем предположения, не собрав обратной связи от администраторов, которые уже установили это.

Моя обратная связь получена конкретно от клиентов после того, как я упомянул, что PWA — это необходимый шаг для включения уведомлений.

Это может различаться в зависимости от сообщества, но в эпоху, когда пользователи выбирают «запретить приложению отслеживать», они с меньшей вероятностью будут слепо следовать инструкциям без видимой выгоды. Объяснение пользователю как установить PWA без пояснения зачем определённо скрывает суть дела.

[ClawdiaWolf (Claudia)]

@Jonathan5

Я подумал об этом только после обсуждений здесь и не заметил никаких преимуществ (уведомления не работают), поэтому продолжил использовать приложение Hub.

У меня была эта проблема с несколькими моими самохостинговыми экземплярами, и изменение push notification time window mins на 0 исправило это для меня и большинства моих пользователей. Как побочный эффект это также делает поведение более похожим на то, как работают уведомления приложения Hub по времени.

[Andrew_Bond]

Мне пришлось добавить этот плагин вручную.

При запуске установщика у меня был пустой репозиторий.

[Stephen]

Извините, это должно быть исправлено сейчас.

[awesomerobot (Kris)]

Отличный компонент! Мне нравится, что он реализован рядом с кнопками общего доступа. Согласен, что мы должны интегрировать это в ядро и баннер для Android.

У меня есть старый не реализованный макет, сделанный некоторое время назад, который может решить некоторые из упомянутых здесь вопросов:

Идея с текстом здесь заключалась в том, чтобы четко показать «что это мне даст» — и буквально отобразить логотип сайта в стиле приложения, чтобы было немного понятнее, о чём речь.

Этот макет был создан для Android, что упрощает задачу, так как можно добавить кнопку, которая напрямую добавляет PWA на устройство.

К сожалению, в iOS всё ещё требуется пройти через меню общего доступа, чтобы выполнить это действие… но, я думаю, мы можем добавить кнопку, которая вызывает варианты общего доступа? (мы уже делаем это при нажатии на значок общего доступа в постах в iOS…)

[dfabulich (Dan Fabulich)]

@awesomerobot

Но, я думаю, мы можем добавить кнопку, которая открывает меню «Поделиться»?

На iOS это невозможно. Вы можете открыть меню «Поделиться» с помощью navigator.share(), но в нём нет кнопки «Добавить на главный экран». Чтобы добавить сайт на главный экран (A2HS), пользователю нужно вручную нажать маленькую кнопку «Поделиться», поэтому и возникает необходимость в чём-то вроде этого.

[Jonathan5]

@Клаудия

У меня была эта проблема с несколькими моими самохостинговыми экземплярами, и изменение параметра «Временное окно push-уведомлений (мин)» на 0 решило её для меня и большинства моих пользователей.

Оказалось, что я всё ещё использовал старую версию iOS (до 16.4): Live notifications: "Notifications are not supported on this browser. Sorry."