web 을 app 으로 구현하기 위해서는 홈화면 추가( add to homescreen ) 와 Push Notifications(푸쉬 알람) 구현하기가 필요한데, 홈화면 추가( add to homescreen ) 관련 plugin에는 괜찮은 것이 없습니다. 

OneSignal의 Push Notifications(푸쉬 알람) 에서 혹시 홈화면 추가( add to homescreen )가 있는지 기대해봅니다.  물론 OneSignal의 Push Notifications(푸쉬 알람) 는 위대합니다. 

Push Notifications(푸쉬 알람) 구현하기

 

Onesignal.com 외 푸쉬 알림 서비스들

https://batch.com 

https://www.wonderpush.com 

https://parse.com/ 

https://www.pushwoosh.com/ 

http://pushpia.com/ 

https://www.fingerpush.com 

http://developers.sktelecom.com/resource/sdk/ 

https://github.com/pushwing/pushwing 등 다양한 Push 알림 서비스가 있습니다. ( 출처 : PUSH 알림 서비스 MBaaS )

Onesignal 이 만족스럽지 않으시면 이들 서비스들을 알아보세요. 

OneSignal – Web Push Notifications

 워드프레스에 OneSignal – Web Push Notifications 을 적용하는 것에 관한 관련 게시글로는 아래의 게시글이 있습니다. 

https://moongtaeng.net/wp/2017/02/06/3033

Website Push Platform
- Google Chrome and Mozilla Firefox
- Apple Safari (macOS)

NativeApp Platform
- Apple iOS
- Google Android
- Windows Phone 8.0
- Windows Phone 8.1+
- Amazon Fire
- Mac OS X
- Google Chrome Apps & Extensions

갈수록 많아지는 것 같습니다.

OneSignal ( https://onesignal.com/ )

개요

OneSignal은 푸시 알림에 사용할 수있는 WordPress 알림 플러그인입니다. 이 솔루션(플러그인)을 사용하시면 방문자를 격려하고 정기적으로 다시 방문하도록 할 수 있습니다. 예를 들어, 새로운 기사를 게시하면 OneSignal을 사용하여 모든 구독자(사용자)사람에게 푸시 알림을 보낼 수 있습니다.  OneSignal은 웹에서 수행중인 작업과 관계없이 화면에 표시되며 OneSignal은 오프라인 사용자도 사용할 수 있습니다.(출처 : 2019 년 최고의 WordPress 알림 플러그인 )

OneSignal은 모바일(Apple iOS, Google Android, Amazon Fire)은 물론 Chrome, Safari(Mac OS의 Safari만 지원됨), Edge, Opera 및 Firefox와 같은 주요 브라우저를 완벽하게 지원합니다.(데스크톱/PC/노트북으로도 알람을 보낼 수 있습니다. 저는 이 부분이 특히 만족스럽습니다.) 자동으로 알림을 보내도록 설정할 수 있지만 필요한 경우 일정을 예약 할 수도 있습니다. 또한 초기 설정에서 다양한 사용자 정의를 할 수 있어 한국어로 깔끔하게 재구성할 수 있습니다. 무료 버전의 플러그인은 최대 3만 명의 가입자를 지원합니다.

참고 : Windows의 Safari는 웹 푸시 알림을 지원하지 않습니다. Mac OS의 Safari만 지원됩니다. 

           Apple은 아직 iOS에서 웹 푸시 알림을 지원하지 않습니다.( Apple iOS에서 푸시 알림이 지원되는지는 확인이 필요합니다. OneSignal 에서 지원하는 플랫폼으로 등록되어 있는 것으로 보아서는 OneSignal에서는 기술적으로는 지원이 가능하나 apple 의 정책으로 인해 지원이 되지 않는 것 같습니다. )

참고 : 아래의 글에서 같은 의미로 보고 알람(Alarm)과 알림을 혼영해서 사용했습니다. 

OneSignal 사이트에서 워드프레스 세팅(app 추가. app 의 형태로 워드프레스에 추가하기 위한 설정입니다.)

((참고)) 워드프레스용 onesignal 세팅문서는 WordPress Setup (영문)에 완벽하게 설명되어 있습니다. 

1. 사이트( https://onesignal.com/ )를 방문하여 무료계정([Get Free Account]) 또는 [Start for free]을 선택하여 무료 계정을 얻습니다. 

GitHub, Google, Facebook 또는 e-mail로 계정을 만들 수 있습니다. -> [Creat Account]

2. 로그인을 한 뒤에 “Add a new app”을 눌러 진행한다.

3. App Name 을 입력하고.

4. platform 선택시 “Web push ” 를 선택를 선택 -> [Next] -> 

   참고 : Apple iOS, Google Android, Amazon Fire, Windows, MacOS를 플랫폼도 지원합니다.

5. Configure Web Push

    가. Choose Integration

     [Wordpress Plugin or Website Builder] -> [Wordpress]

      :  일반 웹사이트(Typical websites. Select this if you are unsure.)도 지원하고 , WordPress, Blogger, Shopify ,Magento, Drupal, SquareSpace, Joomla, Weebly, Wix 등(WordPress Plugin or Website Builder)도 지원합니다. 우리는 워드프레스이므로 [Wordpress Plugin or Website Builder]를 선택합니다. 

 

    나. WordPress Site Setup

자동 재구독( Auto Resubscribe )

My site is not fully HTTPS

이 기능은 HTTPS 사이트에만 사용되며 “내 사이트가 완전 HTTPS가 아닙니다(My site is not fully HTTPS)”인 경우=http로 구성된 사이트인 경우, 선택하지 마십시오. 
이를 통해 사용자는 브라우저 캐시를 지우거나 다른 푸시 공급자로부터 OneSignal로 전송할 것인지 묻지 않고 사이트로 돌아와 자동으로 다시 가입 할 수 있습니다.

DEFAULT ICON URL

푸쉬 알람을 보낼때 사용할 아이콘을 업로드하는 기능입니다.

아이콘이 있는 url 을 입력해주거나 로컬 컴퓨터에서도 업로드할 수도 있고, 구글 드라이브, 원박스 등 매우 다양한 소스를 통해 업로드시킬 수 있습니다. 

참고

사이트에서 WordPress 기술을 사용하지만 WordPress가 추천하는 호스팅 제공 업체(BlueHost, SiteGround, DreamHost)외에 호스팅업체(예:카페24 등)를 이용하는 경우 사이트에서 HTTPS를 완벽하게 지원하는지 확인해야합니다 . 웹 푸시는 HTTPS 를 완벽하게 지원하는 사이트에서 가장 잘 작동하며 가능한 경우 웹 푸시용 HTTPS 를 사용하는 것이 좋습니다. 사이트가 HTTPS를 완벽하게 지원하는지 확인하려면 다음을 찾으십시오. 사이트 URL은 https://로 시작해야 하며 브라우저의 주소창에 녹색 자물쇠 아이콘이 표시 되어야합니다. 사이트에서 모든 http://요청을 https://요청으로 리디렉션해야 합니다. 즉, HTTP를 통해 사이트에 액세스하는 사용자는 HTTPS 버전으로 리디렉션되어야 합니다. 사이트가 HTTPS를 완전히 지원하지 않는 경우 ‘내 사이트가 완전 HTTPS가 아닙니다(My site is not fully HTTPS)’를 선택하세요. (무료 SSL 를 이용하는 경우와 같이 일부만 https 인 경우, 선택하세요. )

    다. Configure WordPress Plugin

APP ID와 API KEY를 볼 수 있습니다. 이것은 워드프레스에서 OneSignal 플러그인 설치후 설정(Configuration section)할 때에 사용됩니다. 복사해주세요.

5. wordpress 관리자 페이지(예 : www.example.co.kr/wp-admin) 로그인을 하고 플러그인 추가에서 “onesignal” 검색하여 설치 및 활성화해줍니다. 

OneSignal – Web Push Notifications

• 버전 :1.17.1
• 최종 업데이트 :1 일 전
• 운영중인 설치 :100,000+
• 워드 프레스 버전 :3.8 이상
• 최대 테스트 :5.1.1

워드프레스내 onesignal 플러그인 설정

onesignal 사이트에서 워드프레스 세팅 및 워드프레스에서 OneSignal  플러그인을 설치 및 활성화해주셨으면 아래의 글을 참조하시어 워드프레스내 onesignal 플러그인 설정을 해주세요. 

자습서 URL 은 https://documentation.onesignal.com/docs 입니다. 영문이지만 이것이 기본이고 필수 자습서입니다. 

기본 설정 방법은 아래의 동영상이 좋은 자료가 됩니다. 

onesignal 플러그인은 [Setup]와 [Configuration]으로 구성되어 있습니다.  먼저, [Configuration] 에서  [Account Settings]를 설정해주셔야 작동합니다.

[Setup]

  [Overview]

위에서 설명드린 “OneSignal 사이트에서 워드프레스 세팅(app 추가. app 의 형태로 워드프레스에 추가하기 위한 설정입니다.)”를 간단하게 설명한 부분입니다. OneSignal 에서 app 을 추가하지 않고 워드프레스에서 플러그인을 먼저 설치한 분들은 이 Overview 를 참조하여 따라하세요.

  [Prompts]

     prompt 는 귀하의 사이트를 방문한 사용자가 귀하의 사이트의 알람을 구독신청=알람 받기 신청을 할 수 있도록 prompt 와 Subscription Bell 이 어떻게 보여지와 그 것을 변경하려면 어디서 할 수 있는지 설명해 줍니다. 

Slide Prompt

Browser Permission Request HTTPS Only

Subscription Bell

  [Result]

    HTTP 와 HTTPS 모드에서 Chrome, Safari, and Firefox 별로 푸쉬 알람이 어떻게 보여지는지 예시를 보여줍니다. 

[Configuration]

[Configuration] 은 [Account Settings], [Sent Notification Settings], [Prompt Settings & Subscription Bell], [HTTP Pop-Up Settings], [Welcome Notification Settings], [Automatic Notification Settings] 등으로 이루어집니다. 

[Account Settings]

참고 : [Account Settings] 을 안해주시면, 워드프레스 알림판 상단에 OneSignal Push: Your setup is not complete. Please follow the Setup guide to set up web push notifications. Both the App ID and REST API Key fields are required. 와 같은 경고메세지가 나옵니다. 

Safari를 제외한 모든 브라우저들의 App Id, API key 설정

wordpress plugin 설정에서 [Configuration] -> [Account Settings] 으로 이동하여 https://app.onesignal.com/ 에서 복사해드었던 APP ID와 API KEY를 App ID , REST API Key 부분에 붙여넣기 해줍니다.

이것으로 Safari를 제외한 모든 브라우저들의 App Id, API key 설정은 끝났습니다. 

Safari Web ID 설정
아래의 동영상을 보시면 쉽게 가능합니다. Windows의 Safari는 웹 푸시 알림을 지원하지 않습니다. Mac OS의 Safari만 지원됩니다. 

WordPress Safari Setup 동영상(0:46)

Safari에 웹 푸쉬를 추가하는 방법

[Prompt Settings & Subscription Bell]

Enable the Subscription Bell 을 선택하시면 아래와 같은 옵션창이 활성화됩니다. 

[HTTP Pop-Up Settings]

Onesignal 이 표시되는 브라우저( Website Push Platform ) 는  Google Chrome,  Mozilla Firefox, Apple Safari (macOS), 마이크로소프트 엣지(window 10의 기본 브라우저)입니다. (인터넷 익스플로어는 보여지지 않습니다.) 

아래의 이미지는 크롬에서 푸쉬 알림 구독 버튼이 표시된 화면입니다. 

<테스크톱 이미지>

<스마트폰 이미지>

[신청하기]를 하시면 다시 한번 모바일에서는” www.aiforu.kr에서 알림을 보내려고합니다.  차단/허용”하고 나옵니다. 데스크톱에서는 좌측상단에 “www.aiforu.kr에서 다음 권한을 요청합니다. 허용/차단”으로 표시됩니다. 

<테스크톱 이미지>

 <스마트폰 이미지>

[Welcome Notification Settings]

신청을 하고 나면 데스크톱 하단과 모바일 알람에 환영메세지가 표시되는데, 이것을 설정하는 부분입니다. 

<스마트폰 이미지>

[Automatic Notification Settings]

 

푸쉬 알림 보내기(Sending Push Messages)

워드프레스에서 알람 보내기

Onesignal 은 3만건까지 알람이 무료이지만 사용자나 구독신청 기기가 많으면 3만건도 쉽게 넘어가므로 Automatically send a push notification when I create a post from the WordPress editor 을 선택하셔도 자동으로 보내지지는 않습니다. 게시글을 작성하고 편집창 우측 상단에 있는 Onesignal Push Notification 을 체크하셔야 알람이 보내집니다. 

 

 

아래의 사용자 매뉴얼도 같이 수정해주시면 이 게시글을 수정해세요.

Onesignal 푸쉬알람 사용자 매뉴얼

test 보내기 기능이 따로 있으나 푸쉬 알림 보내기는 User(구독자)가 1명 이상있어야 확인이 쉽습니다. 

참고로 아래는 User에 관한 상세내역입니다. 분홍색은 e-mail 구독 신청을 한 경우이고, 파란색은 웹으로 구독신청을 한 것입니다. Linux armv81(74) 는 스마트폰 운영체제가 linux arm 이고 크롬 74버전으로 구독신청하였다는 의미이고 Win32(74) 는 32bit 컴퓨터에서 크롬 74 버전으로 신청하였다는 의미입니다. 데스크톱이건 스마트폰이건 web 으로 신청한 것은 푸쉬 알람이 잘 보내집니다. e-mail 은 안 보내집니다. 

대시보드를 방문하니 드디어 메세지를 보내는데 성공하였고 4개가 보내졌다고 나옵니다. 

사용자(user, 구독자)의 분류

OneSignal 에서 푸쉬 알람을 보내려면 사용자(user, 구독자)를 구별해야 하는데, 특정 사용자가 누구인지 알 수가 없습니다. 이메일마케팅에서 e-mail 주소를 식별자로 사용하는데, OneSignal 은 PlayerID 를 식별자로 사용합니다. 

OneSignal 은 PlayerID를 주된 식별자로 LAST ACTIVE, FIRST SESSION(첫 방문시간), DEVICE, SESSIONS(반복방문횟수), COUNTRY(국가), IP ADDRESS 을 식별자로 하여 세그먼트(세분화)로 PlayerID 를 분류하고 태그를 사용하여 ( Using Data Tags ) 하여 푸쉬 알람을 보내야 합니다.  세그먼트(세분화) 와  Using Data Tags 에는 문서도 좋지만 동영상 자료가 많으니 활용하세요. 

OneSignal PlayerID 플레이어 ID

OneSignal PlayerID는 모바일 앱을 사용하거나 사이트를 구독하는 모든 기기에 OneSignal이 제공하는 UUID (Unique Universal Identifier)입니다. 형식은 소문자 및 숫자 8 문자 -4 문자 -4 문자 -4 문자 12 문자

On

eSignal Player ID는 언제 변경됩니까?

OneSignal은 할당 된 모든 장치에 동일한 플레이어 ID를 유지하기 위해 최선의 노력을 다합니다. 일부 상황으로 인해 변경 될 수 있습니다.

웹 푸시 – 사용자가 사이트의 쿠키 데이터를 지울 때 발생합니다.

ANDROID – 사용자가 Google Ad ID를 선택하지 않은 경우 앱을 제거하고 다시 설치합니다.

iOS – IFV (공급 업체 식별자)가있는 다른 앱을 사용자가 설치하지 않은 경우 앱을 제거하고 다시 설치하면 새로운 플레이어 ID가 부여됩니다.

IFV는 완전히 다시 설치 한 후에도 ID를 동일하게 유지하는 데 사용되지만 사용자가 다른 앱을 설치 한 경우에만 사용됩니다.

Onesignal Trouble shooting(문제해결)

워드프레스를 사이트빌더로 이용하고 있고 테마로는 Betheme 를 사용하는데 Prompt가 표시되지 않는 문제

betheme 의 [Theme Opiton] -> [Global] -> [Navigation & share]로 이동하시면 Options으로 Header arrows, Sticky arrows, Show all posts가 있습니다.

Sticky arrows의 경우, AI챗봇 창을 열리지 않도록 하거나 OneSignal과 같은 Push Notification의 대화창을 막습니다. 이런 경우, 꼭 Sticky arrows를 사용 안 함으로 변경해주세요.

Onesignal 분석

구글 애널리틱스와 구글 태그 관리자를 이용하여 분석이 가능합니다. 아래의 게시글을 참조하세요. 

Onesignal 분석 : 구글애널리틱스, 구글태그관리자 이용하여 분석하기

Onesignal 대체재(솔루션)

subscribers( https://subscribers.com/ )

neilpatel 이 How I Drove 231,608 Visitors to My Site Using This New Channel 게시글을 통해 소개한 푸쉬알람 솔루션입니다. onesignal 에 비해 직관적이고 사용하기가 쉬울 것입니다. 가격도 저렴한 것 같습니다. neilpatel 이 onesignal 의 시장을 침입하기 위해 저가 정책을 펴는 것 같습니다. 가격을 고려할때, 푸쉬알람 건수가 월 3만건 이상일 경우, 이 솔루션을 살펴보시길 권합니다. 월 3만건이하인 경우에는 onesignal 은 무료이므로 onesignal 을 추천합니다. 

shopify는 app으로 자동설치할 수 있으며 워드프레스는 플러그인으로 설치할 수 있습니다. Google Tag Manager tag로 설치하는 방법이 있으며 이것도 어려우면 수동으로 설치하는 방법이 있습니다. 

워드프레스에 설치하는 상세방법은 WordPress Plugin Installation Guide 을 따라 하시면 됩니다.  쉽습니다.  

가격 

$29이면 10,000 명에게 1번만 보내고 $29을 지불한다고 할때 3.5원 정도합니다. 이것을 광고비와 비교한다면, 상당히 저렴한 것 같습니다. 

바이앱스( http://byapps.co.kr/ ) : 매우 뛰어남. 여기서 사업 모델을 찾으세요. 

워드프레스로 홈화면 추가( add to homescreen )

((결론)) Official Add to Homescreen plugin 과 Add To Home Screen plugin 모두 사이트 접속시 스마트폰 홈화면 바로가기가 보여지기는 하나 실제로 스마트폰 홈 화면에 바로가기가 생성되지는 않습니다.

아래의 플러그인은 홈화면 추가가 잘 됩니다. 아래의 게시글을 통해 브라우저별로 홈화면 추가가 어떻게 생성되는지 홈화면 추가 버튼을 생성 조건등을 상세 설명하였습니다. 

https://www.aiforu.kr/progressive-wordpress-pwa-%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8/

Official Add to Homescreen plugin

Official Add to Homescreen

((사용후기))동일한 장치로 처음 사용했을 때 홈화면에 추가하라는 메시지(callout)가 한 번만 작동했습니다. “홈화면에 추가하라는 메시지(callout)”이 더 자주 표시되도록 설정을 변경했으나 결코 변경되지 않았습니다. 

삼성의 인터넷(갤러시 크롬)에서도 홈화면에 추가하라는 메시지(callout)은 보여집니다. 설치된 앱 리스트에서 확인하고 다시 스마트폰의 홈으로 옮겨야 합니다.

Add to Homescreen 은 Matteo Spinelli가 개발 한 오픈 소스 프로젝트로, 웹 사이트 소유자가 모바일 장치에 홈 화면 콜 아웃 추가 기능을 포함시킬 수 있습니다. Javascript 플러그인은 독립적이고 종속성이 없으며 종종 권장됩니다. Spinelli는 공식 WordPress 플러그인 을 출시하였는데 이것이 이 플러그인입니다.  

현재 iOS 및 모바일 Chrome에서 지원됩니다. 다른 기기는 웹 사이트를 홈 화면에 북마크만 할 수 있지만 iOS 및 모바일 Chrome만에서는 직접 홈화면 추가를 할 수 있습니다.

• Version:1.1.3
• Last updated:5 years ago
• Active installations:2,000+
• WordPress Version:3.5 or higher
• Tested up to:4.0.26

[설치] 및 [활성화]하시면 [설정] -> [Add to Homescreen]으로 이동하시어 설정하실 수 있습니다. 

Homescreen 플러그인에 추가하면 [기본(basic)] 및 [고급 구성 옵션(advanced )], [디버깅(debugging)] 및 사용자 홈 화면에 사이트가 추가되는 빈도에 대한 [통계(statistics)]를 설정할 수 있습니다. 

 

기본(basic)

Presets(사전 설정) 

• 익명 – 홈화면에 추가하라는 메시지(callout)를 표시하지만 사용자를 추적하지 않음( Anonymous – Displays the message but never tracks the users )
• 일단 디스플레이 – 한 번만 홈화면에 추가하라는 메시지를 표시하고 추가되면 통계에 반영됨) Display Once – Displays the callout only once and tracks when added )
• 항상 표시 – 사용자가 홈 화면에 웹 사이트를 추가 할 때까지 24 시간마다 한 번씩 홈화면에 추가하라는 메시지(callout)를 표시함( Always Show – Displays the callout once every 24 hours until the user has added the website to the homescreen )
• 침묵 함 – 사용자에게 홈화면에 추가하라는 메시지를 (callout)을 표시하지 않고 추적합니다.( Silent – Never show the callout but track when users add the application to the homescreen )

통계(statistics)

기본 제공 통계 기능을 사용하면 홈 화면에 추가를 보여진 수와 실제로 추가된 수를 추적 할 수 있습니다.

( 이미지 출처 : Official WordPress Plugin for the Add to Homescreen Javascript Plugin )

통계는 좋은 옵션이지만 다른 플러그인과의 충돌이있는 경우 사용하지 않는 것이 좋습니다. Spinelli는 문제가 발생할 경우 익명 옵션 만 100 % 오류 방지 솔루션이라고 조언합니다.

플러그인에는 사용자 정의 응용 프로그램 아이콘을 업로드하는 기능도 포함되어 있으므로 그에 따라 웹 사이트에 브랜드를 지정할 수 있습니다. 

Add To Home Screen plugin

Add To Home Screen

((사용후기))이 플러그인은 믿을 수 있는 Mozilla 에서 제공하며 설치 및 활성화하면 워드프레스 알림판 [설정] -> [Add to Home Screen ] 에서 설정할 수 있고 설정을 완료하면 스마트폰/태블릿으로 해당 사이트 접속시 집 모양의 아이콘이 보이고 추가할 수 있다고 표시되는데, [Got it]을 눌러 실행하면 다시 집 모양으로 돌아가고 스마트폰/태블릿에는 추가되지 않습니다. 

홈 화면에 추가 기능을 사용하면 WordPress 설치를 독자가 좋아하는 응용 프로그램 중 모바일 홈 화면에 표시 할 수 있습니다. 이것은 귀하의 사이트에 대한 북마크가 아니며, 홈 화면에 추가는 귀하의 사이트가 완전한 앱과 같은 경험을 활용할 수있는 첫 번째 단계입니다.

홈 화면에 추가 플러그인은 특정 브라우저 기술 과 함께 W3C 웹 응용 프로그램 매니페스트 및 서비스 작업자 API 를 사용하여 WordPress를 기본 응용 프로그램의 동일한 위치에 배치합니다.

푸시 알림 , 즉석로드 및 오프라인 콘텐츠 를 제공하여 완벽한 기본 환경을 제공 합니다 .

• 버전: 0.3.1
• 글쓴이: Mozilla
• 최근 업데이트: 3 년 전
• 요구되는 워드프레스 버전: 3.5 또는 이상
• 호환되는 버전: 4.4.18
• 활성 설치: 200+
• WordPress.org 플러그인 페이지 »
• 플러그인 홈페이지 »
• 기여자

• delapuente
• Mozilla Web Apps

Add to home screen WP Plugin

https://wordpress.org/plugins/add-to-home-screen-wp/

활성설치가 많은 것은 Add to home screen WP Plugin 으로 4,000+인데 iPhone/iPod touch, iPhone4, iPhone 4S, iPhone 5, iPhone 5S, iPhone 6s, iPhone 6s+, iPhone7, iPhone 7s+ and iPad와 같이 아이폰과 아이패드에서만 지원됩니다. 

• Version:1.6
• Last updated:5 months ago
• Active installations:5,000+
• WordPress Version:5.0 or higher
• Tested up to:5.2.5

이 플러그인은 훌륭한데 iPhone/iPod touch, iPhone 5, iPhone 6, iPhone 7, iPhone 8, iPhone X, iPhone XR and iPad과 호환되면 안드로이드폰에는 호환되지 않아 더 알아보지 않았습니다.

---

참고자료 : 1. Official WordPress Plugin for the Add to Homescreen Javascript Plugin

2. WordPress Setup

3. 2019 년 최고의 WordPress 알림 플러그인