워드프레스에서 Push Notifications(푸쉬 알림) 구현하기와 홈화면 추가(add to homescreen) : OneSignal

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

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

 

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

 

OneSignal – Web Push Notifications

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

OneSignal – WebPushNotification

 

 

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 Setup (영문)에 완벽하게 설명되어 있습니다. 

 

1. 사이트를 방문하여 무료계정(Get Free Account)을 얻습니다. 

onesignal

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

onesignal_Get Free Account

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

3. App Name 을 입력하고.

onesignal_add app_app name
4. platform 선택시 “Website Push” 를 선택.(web push ?? )

onesignal_web push

4. Configure Web Push

    가. Choose Intergration

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


onesignal_choose interattion

 

    나. WordPress Site Setup

onesignal_choose interattion_2

자동 수신 거부( Auto Resubscribe )

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

 

DEFAULT ICON URL

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

 

사이트에서 WordPress 기술을 사용하지만 WordPress가 아닌 호스팅 제공 업체에서 호스팅(예:카페24 등)되는 경우 사이트에서 HTTPS를 완벽하게 지원하는지 확인해야합니다 .

웹 푸시는 HTTPS 를 완벽하게 지원하는 사이트에서 가장 잘 작동하며 가능한 경우 웹 푸시용 HTTPS 를 사용하는 것이 좋습니다 . 사이트가 HTTPS를 완벽하게 지원하는지 확인하려면 다음을 찾으십시오.

  • 사이트 URL은 https://로 시작해야 하며 브라우저의 주소창에 녹색 자물쇠 아이콘이 표시 되어야합니다.
  • 사이트에서 모든 http://요청을 https://요청으로 리디렉션해야 합니다. 즉, HTTP를 통해 사이트에 액세스하는 사용자는 HTTPS 버전으로 리디렉션되어야 합니다.

사이트가 HTTPS를 완전히 지원하지 않는 경우 ‘내 사이트가 완전 HTTPS가 아닙니다(My site is not fully HTTPS)’를 선택하세요. (무료 SSL 를 이용하는 경우와 같이 일부만 https 인 경우, 선택하세요. )

APP ID와 API KEY를 볼수 있습니다. 이것은 워드프레스 플러그인 설치후 설정에 사용됩니다.

onesignal_choose interattion_3_Configure Web Push
5. wordpress 로그인을 하고 플러그인 추가에서 “onesignal” 검색하여 설치해줍니다. 

OneSignal – Web Push Notifications

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


8. 워드프레스 알림판 상단에 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. 와 같은 경고메세지가 나옵니다. 

wordpress plugin 설정에서 [Configuration]으로 이동하여 App ID , REST API Key, 를 입력해줍니다. 

 

onesignal plugin_configuration

 

자습서 URL 은 https://documentation.onesignal.com/docs 입니다.

Sending Push Messages

 

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

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

 

Official Add to Homescreen plugin

Official Add to Homescreen

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

삼성의 인터넷(갤러시 크롬)에서도 홈화면에 추가하라는 메시지(callout)은 보여집니다. 그러나 이 플러그인도 아래의 Add To Home Screen plugin 처럼 스마트폰 홈화면 바로가기가 생성되지는 않습니다. 

 

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)]를 설정할 수 있습니다. 

Add to Homescreen Settings

  • 익명 – 홈화면에 추가하라는 메시지(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 )

 

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

add-to-homescreen 통계 stats( 이미지 출처 : 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를 기본 응용 프로그램의 동일한 위치에 배치합니다.

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

 

Add to home screen WP Plugin

Add to home screen WP Plugin

 

활성설치가 많은 것은 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와 같이 아이폰과 아이패드에서만 지원됩니다. 

 

 

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

2. WordPress Setup