홈 화면에 추가 (iOS, iPadOS)

:discourse2: 요약 **홈 화면에 추가 (iOS, iPadOS)**는 iOS 기기 사용자에게 팝업을 표시합니다. 이 팝업은 닫을 수 있으며, PWA를 통해 Discourse 포럼을 보고 있는 경우 표시되지 않습니다.
:hammer_and_wrench: 저장소 GitHub - discourse/discourse-apple-add-to-homescreen · GitHub
:open_book: Discourse 테마를 처음 사용하시나요? Discourse 테마 사용 입문가이드

이 테마 컴포넌트를 설치하세요

기능

이 컴포넌트는 iOS 기기 사용자에게 팝업을 추가합니다. 이 팝업은 닫을 수 있으며, PWA를 통해 Discourse 포럼을 보고 있는 경우 표시되지 않습니다.

iPhone

iPad

설정

이름 설명
팝업 타이머 팝업이 표시되기까지 얼마나 오래 기다릴까요? (밀리초 단위)
번역 기본값
pwa_text %{siteTitle}을(를) iOS 기기에 설치하세요. 공유를 누른 다음 홈 화면에 추가를 선택하세요.

이 테마에는 표시될 텍스트와 팝업이 표시되기까지 기다릴 시간을 결정하는 타이머를 위한 두 가지 설정이 포함되어 있습니다. 이 설정들은 기본적으로 설정된 값이 제공됩니다.

이 팝업은 PWA를 사용하지 않고 iPhone 또는 iPad에서 Discourse 포럼을 보고 있는 iOS 사용자에게만 표시됩니다. 사용자가 x 아이콘을 클릭하면 다시 표시되지 않습니다.

표시되는 텍스트 편집

이 영역을 편집할 때 다음 사항을 유의해야 합니다:

이 텍스트를 편집하고 siteTitle이 여기에 유지되기를 원한다면, 원하는 위치에 %{siteTitle}을(를) 유지하세요.


:discourse2: 우리가 호스팅하고 있나요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.

27개의 좋아요

훌륭한 아이디어입니다! 감사합니다! 이 기능의 문제는 항상 발견 가능성(Discoverability)이었으며 앞으로도 그럴 것입니다.

8개의 좋아요

Android 코어에서는 팝업 표시를 위해 trust level >= 1 체크를 사용하는데, 이는 타이머와 비슷한 역할을 하지만 제 생각에는 더 좋습니다:

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

이 컴포넌트도 동일한 방식을 사용해야 하는지 궁금합니다. :thinking:

또한, Android와 iOS PWA 설치 배너를 코어에서 단일 컴포넌트로 통합하는 것을 정말 원합니다!

12개의 좋아요

기본 텍스트에 푸시 알림을 언급하고, "기기(device)"라는 표현은 피하는 것이 좋겠습니다.

다음과 같은 문장이 어떨까요:

%{siteTitle}을 홈 화면에 추가하여 푸시 알림을 받아보세요! 공유를 누른 다음 홈 화면에 추가를 선택하세요.”

Discourse 팀이 이 부분을 A/B 테스트를 통해 어떤 문구가 사용자의 푸시 알림 가입에 가장 효과적인지 찾아낸다면 특히 도움이 될 것입니다.

저는 다음과 같은 질문들을 가지고 있습니다:

  • "추가(Add)"라고 하는 것이 좋을까요, 아니면 "설치(Install)"라고 하는 것이 좋을까요?
  • 여기서 푸시 알림을 언급하는 것이 좋을까요, 아니면 언급을 늦추는 것이 좋을까요?
  • 설치를 언급한다면, 이것이 설치되는 것이 "앱"이라고 해야 할까요? "웹 앱"이라고 해야 할까요?
  • iPad는 화면 공간이 더 넓습니다. 더 많은 단어를 사용하는 것이 좋을까요?
6개의 좋아요

아이패드에서 이 배너는 만족스럽지 않습니다. 배너는 화면 하단에 표시되는데, 공유 버튼은 상단에 있습니다. "여보세요, 버튼은 헤더 위에 있습니다"라는 의미로 보이는 작은 위쪽 화살표(:up_arrow:)가 있긴 하지만, 그것만으로는 부족할 것 같습니다. (이 부분에 대해 사용자 테스트를 해보셨나요? 비전문 아이패드 사용자들에게 실제로 효과가 있는지 확인해 보셨나요?)

사용자에게 "공유를 탭하세요"라고 요청하고 있지만, 버튼에 "공유"라고 명확히 표시되지 않는 점도 도움이 되지 않습니다. 그냥 화살표가 있는 작은 상자일 뿐이니까요.

image

몇 년 전 저는 https://github.com/cubiq/add-to-homescreen를 사용했는데, 이 도구는 다음과 같은 팝업을 표시했습니다:

디스코어가 이런 방식에 더 가까운 것을 구현해 주었으면 좋겠습니다.

지금의 플로아웃(flyout)은 다소 취약합니다(버튼이 이동하면 어떻게 되나요?), 하지만 버튼이 플로아웃이 가리키는 정확한 위치에 있지 않더라도 대략적으로 올바른 곳에 있다면 괜찮다고 생각합니다.

역사적으로 버튼 모양이 iOS 버전마다 달라질 수 있다는 점도 위험했습니다. 하지만 공유 버튼의 모양은 iOS 7 이후로 변하지 않았고, iOS 17에서 바뀔 특별한 이유도 없으므로, 헤더 바에 공유 버튼이 아마도 있을 위치를 가리키는 작은 플로아웃을 사용하는 방식은 아이패드에서 잘 작동할 것이라고 생각합니다.

3개의 좋아요

좋은 피드백을 주셨네요, Dan.

iPad를 사용할 때 이 플라이아웃을 페이지 상단에 표시하면 유용할 것 같습니다.

솔직히 말씀드리면, 이 버전의 컴포넌트에 해당 아이콘을 포함하지 않은 이유는 이 아이콘이 Font-Awesome 6에서만 사용 가능하며, Discourse는 아직 해당 버전을 지원하지 않기 때문입니다.

2개의 좋아요

이런 욕구가 바로 이 텍스트를 관리자가 수정할 수 있도록 설정한 이유입니다. 각자 이 팝업에 어떤 내용을 담아야 하는지에 대한 생각이 다를 수 있으니, 마음에 드는 대로 자유롭게 수정해 주세요.

1개의 좋아요

제 포럼에서 A/B 테스트를 할 권한이 없는 것 같습니다. 혹시 여러분이 A/B 테스트를 해 주실 수 있을까요?

사용자가 왜 그렇게 해야 하는지 알려주나요?

1개의 좋아요

질문을 잘 이해하지 못하겠습니다. 만약 그들이 이미 포럼에 있다면, iOS 기기에 설치한 이유는 스스로도 분명할 것입니다.

제가 말하려는 핵심은, Apple 사용자들이 앱을 설치할 때 앱 스토어를 통한 방식에 익숙하다는 것입니다. PWA가 무엇인지 이해하는 사람은 극소수이며, 설치를 통해 얻을 수 있는 잠재적 이점을 아는 사람은 그보다도 더 적습니다.

Apple이 브라우저 알림을 A2HS(홈 화면에 추가) 기능 뒤에 배치한 것은 훌륭한 조치입니다. 이는 데스크톱에서 알림이 초기에 겪던 문제들을 완전히 해결해 줍니다.

홈 화면에 또 다른 아이콘이 추가되는 것 외에, 사용자에게 어떤 이점이 있는지 어떻게 알려줄 수 있을까요?

3개의 좋아요

전적으로 (그러나 정중하게) 동의하지 않습니다. 저는 디스코urses 포럼을 운영하며, 이 앱과 다른 앱들을 홈 화면에 추가해 두었습니다. 여기에서의 토론 후에야 그렇게 하려 생각했고, 실제로는 아무런 이점도 보지 못했습니다(알림이 작동하지 않으므로) 따라서 계속 허브 앱을 사용하고 있습니다.

2개의 좋아요

이것을 설치한 관리자분들의 피드백을 수집하지 않고 우리가 서로 추측만 하고 있는 것 같습니다.

그럼에도 불구하고, 해당 텍스트는 100% 커스터마이징할 수 있으므로 관리자가 추가 설명이 필요하다고 판단하면 매우 쉽게 수정할 수 있습니다.

제 피드백은 PWA가 알림을 활성화하기 위한 필수 단계라고 언급한 후에 클라이언트들로부터 받은 것입니다.

커뮤니티에 따라 다를 수 있지만, '앱에 추적을 요청하지 않음’이 강조되는 요즘, 사용자가 인지된 이점이 없으면 무조건적인 지시 따르기를 꺼리는 경향이 있습니다. PWA를 설치하는 방법만 알려줄 뿐 설치해야 하는지 설명하지 않는다면, 핵심 메시지를 놓치는 셈이 됩니다.

저는 자체 호스팅한 인스턴스 두 곳에서 이 문제를 겪었고, push notification time window mins 값을 0으로 수정하니 저와 대부분의 사용자에게 문제가 해결되었습니다. 부수적으로, 알림의 타이밍 측면에서 Hub 앱의 알림 동작 방식과 더 유사해집니다.

3개의 좋아요

이 플러그인을 수동으로 추가해야 했습니다.

설치 프로그램을 클릭했을 때 빈 저장소가 표시되었습니다.

죄송합니다. 이제 수정되었습니다.

1개의 좋아요

좋은 컴포넌트네요! 공유 버튼 근처에 구현되어 있는 방식이 마음에 듭니다. 코어와 안드로이드 배너에 이 기능을 통합해야 한다는 의견에 동의합니다.

며칠 전에 여기에서 언급된 몇 가지 아이디어를 다룰 수 있을 것 같은 오래된 미구현 목업이 하나 있습니다:

여기 텍스트 :point_up: 의 아이디어는 일종의 명확한 "나에게 어떤 이점이 있는가"를 보여주는 것이었습니다. 또한 앱처럼 사이트 로고를 표시하여 이것이 무엇에 관한 것인지 조금 더 명확하게 하려는 것이었습니다.

이는 안드로이드용으로 목업되었는데, 이렇게 하면 디바이스에 PWA를 바로 추가할 수 있는 버튼을 포함할 수 있어 더 쉬워집니다.

불행히도 iOS에서는 여전히 이 작업을 수행하려면 공유 시트를 거쳐야 합니다… 하지만 공유 옵션을 트리거하는 버튼을 만들 수 있지 않을까요? (iOS에서 게시물의 공유 아이콘을 클릭할 때 이미 이렇게 하고 있으니…)

4개의 좋아요

iOS에서는 불가능합니다. navigator.share()로 공유 시트를 열 수는 있지만, 그 안에는 “홈 화면에 추가” 버튼이 없습니다. A2HS(홈 화면에 추가)를 하려면 사용자가 작은 공유 버튼을 직접 클릭해야 하므로, 이와 같은 것이 필요합니다.

1개의 좋아요

결국 제가 여전히 구버전 iOS(16.4 이전)를 사용 중이었기 때문이었습니다: Live notifications: "Notifications are not supported on this browser. Sorry."