질문/조언팁/리소스 공유

제목 없음.png

제목 없음1.png

 

 

 

크롬(삼성 브라우저)에서 페이스북이나 유튜브와 같은 형태의 댓글 알림을 표시해주는 모듈입니다.

웹소켓, SSE를 사용하는게 아닌, 구글 FCM(GCM)을 사용하여 알림을 전송합니다.

사실 파이어폭스에서도 되게 할려고 하였으나 여러가지 걸림돌이 많아서 파이어폭스는 일단 keep 하였습니다.

 

알림이 어떤 형태로 오는지 확인하고 싶으시다면 https://gauntface.github.io/simple-push-demo/ 에서 확인 가능합니다.

 

 

https://github.com/huhani/xe-noti

 

설치 방법

   1. 모듈 파일은 모듈에 복사, manifest.json, service-worker.js파일은 무.조.건. 사이트 최상단 디렉토리에다 복사.

 

   2. https://console.firebase.google.com 에서 서버 키(Server key)와, 발신자 키(Sender ID) 발급. 발급 방법은 https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web 참조.


   3. 발급받은 서버 키는 /index.php?module=admin&act=dispNotiAdminConfig 의 "Google FCM API Key"에 입력, 발신자 키는 아까 복사한 사이트 최상위 디렉터리에 있는 manifest.json의 "gcm_sender_id" 항목에다 적기. 그 외 name, short_name 등.. 항목들도 적당히 입력.


   4. /index.php?act=dispNotiDeviceList 들어가서 알림 테스트. 새 단말기가 등록되었다는 메세지가 뜨지 않는다면 위 과정중 하나라도 잘못되었을 가능성이 큼.

 

잘 사용하신다면 깃허브에 별이라도 눌러주시면 매우 감사하겠습니다 ㅠㅠ

 

+ https://github.com/huhani/xe-comment-without-refresh/tree/master/addons/board_extender

해당 애드온도 설치할 것을 권장합니다만, 만약 사용하기 싫으시다면

/noti/noti.controller.php 파일의 cpage_detect 항목을 지워주세요.

 

 

=============

 

P.S.1

  기본적으로 PC에서 알림이 뜬 후 20초 뒤에 자동으로 닫히는데, service-worker.js 파일의 requireInteraction 값들을 true로 해놓는다면 10분이 지나던 1시간이 지나던 자동으로 닫히지 않습니다.

 

P.S.2

  안드로이드에선 브라우저를 닫아도 알림이 옵니다. 모듈 설정에서 "FCM 메세지 우선 순위"를 "높은 우선순위" 로 설정해놓으면 절전 모드에서도 알림이 옵니다. 기본값은 "보통 우선순위"이지만 "높은 우선순위"로 설정할 것을 권장합니다.

 

P.S.3

  안드로이드에선 PC와는 달리 알림이 와도 자동으로 닫히지 않습니다. 알림은 최대 50개까지 쌓이고(현재까진 그렇다만 추후 브라우저 업뎃으로 인해 정책이 바뀐다면 달라 질 수도 있습니다) 그 이후로부턴 아마 알림이 오지 않을겁니다. 알림을 자동으로 닫히게 하고 싶어도 이게 브라우저 버그인가봅니다 ㅠㅠ

 

P.S.4

  모듈 설정의 "자동 로그인시 사용" 사용 설정시 자동 로그인(로그인 유지)을 사용할 경우 자동으로 알림 사용을 유도합니다. 알림 사용중 클라이언트가 로그아웃 할 시, 알림도 자동 해제됩니다.

  하지만 유저가 수동으로 알림사용을 설정하였을 시, 로그아웃하여도 알림 사용 설정은 유지됩니다.

 

P.S.5

  모듈 설정의 "알림 발송 닉네임" 항목은 아직 신경쓸 필요가 없습니다. 현재까진 그저 아무런 가치도 없는 쓰레기 항목일 뿐입니다. 미래에 쓸 일이 있을까봐 만들어는 뒀지만 아마 쓸 일이 없을 것 같습니다.

 

P.S.6

  service-worker.js 파일이 ServiceWorker로 등록이 된 상태인 경우 서버에서 service-worker.js 파일을 수정하여도 반영이 되지 않습니다. 등록된 ServiceWorker를 uninstall 한 뒤, 다시 install한다면 수정된 부분이 반영될 것입니다.

 

P.S.7

  슈퍼 캐시 모듈을 사용하시는 경우 슈퍼 캐시 모듈의 "기타 설정" 탭의 "캐시 예외 쿠키에 "_noti" 를 추가하여 주세요.

  • ?
    와 정말 감사합니다!! 혁명이네요 ㅎㅎ
  • ?

    헐 ; ( _ _ ) 

  • ?
    기다리고 있었습니다..!

    현재는 댓글만 알림이 가능한거죠?
  • profile
    바로 추천눌렀습니다. :)
  • profile
    페이스북의 웹알림처럼 정말유용하겠네요ㅎ
  • profile

    혹시 전체 유저에게 알림을 보내는 방법도 있나요?

    ++ 파폭이랑 크롬에서도 ischorme 항목을 지워서 테스트해봤는데 정상적으로 작동하더라구요. 이 부분의 지원여부는 왜 빠져있는지 왜 크롬에서만 허용하고 잇는지 알 수 있을까요?ㅎㅎ

  • profile ?

    1. 현 프로그램 구조에선 전체 유저에게 알림을 보내기엔 부적합한 시스템이라 전체 알림 기능은 넣지 않았습니다 ㅠㅠ

    2. 제가 테스트한 서버 환경들에선 이상하게 파이어폭스에서 알림을 보내면 크롬에선 바로 이전 알림들이 뜨더군요. 이게 php버그인지 캐싱쪽에서 문제가 생긴건지 알 수가 없어서 일단 keep하였습니다. (알림을 크롬, 파이어폭스 둘 다 사용할 때)
    또한 모바일 파이어폭스 같은 경우 showNotification에서 data 변수가 넘어가질 않아 알림을 클릭하여도 이동할 url가 정상적으로 작동되지 않는 문제가 있습니다.

     

    야후나 페이스북 같은 사이트들은 크롬에서만 이런 HTML5알림을 사용하던 것 같아서 저도 그냥 크롬 이외의 브라우저는 일단 제외하였습니다.

  • profile ?

    그리고 파이어폭스같은 경우 한 개의 단말기당 요청을 일일이 하나씩 보내야 해서 만약(현 구조에선 그럴일이 없겠지만) 수십 수백명에게 알림을 전송한다면 수십-수백초 정도의 시간이 소요될 수 있습니다.

    크롬(구글)같은 경우 한번에 최대 1000개씩 쏘기가 가능합니다.

  • ? profile
    크롬중에 크롬 기반 웨일이랑 크롬정도만 지원하도록 하면될것 같아요. (웨일 크롬에서 정상적으로 댓글 알림오는것을 확인.)

    그리고 전체회원에게 보내는건.. 하나하나 일일이 디비쿼리를 하는방법말고 푸시알림서버에서 혹시 지원은 안해주고 잇는지요
  • profile ?

    아직은... 없는 것 같습니다.
    알림 전송하는 방법 중 payload방식이 있긴 한데 이건 일부 구 브라우저에선 지원을 하지 않고 무엇보다도 괜히 여러모로 복잡해져서 ==;

  • ? profile
    pushNotificationToGoogle 에서 보면,

    registration_ids에 쌓아둔 $reg_ids array값만 잘 이용하면될거같아요.
    이거를 cache 파일으로 따로 계속 만들도록 해보세요. 몇천명이 되어도 디비가져와서 반복 돌필요없이 해당 캐시파일 하나로만.. 가능하니[email protected][email protected]
  • profile ?
    굿 아이디어!
  • ? profile
    혹시, dispNotiAdminList 에서 나타나는 목록에 저장되는 데이터가 쌓이는 구조가 아니라 업데이트 형태로 되는 구조인가요?
    계속 두개만 뜨는거 같아서요.
  • profile ?
    네 업데이트되는 구조입니다.
  • ? profile
    유저들이 브라우저 알림을 등록하는걸 바로 메인페이지 접속해도 할 수 있도록 가능한가요?
  • profile ?

    가능합니다.
    모든 페이지에서 /modules/noti/tpl/js/noti.js를 불러오게끔 되어있는데
    noti.js랑 login.js에 있는 함수 적절히 조절하여 사용하시면 될 것 같습니다.

  • profile ?

    + window.notiFunc.uninstallSW(); 함수는 가급적이면 사용하지 말아주세요.
    serviceWorker 설치후 새로고침을 하지 않고 같은 페이지에서 자꾸 지웠다 설치했다 반복하니 한번씩 에러가 나더군요.

  • ? profile
    기본 트리거에서 옵션에서 그냥 아무페이지나 등록할 수 있는 알림 알럿이 뜨도록 추가해주는건 어떨까요? 어차피 display트리거를 쓰고 잇던데..
  • profile ?
    사실 저게 PC같은 경우 오직 크롬이 열려있기만 하면 알림이 뜨는거라 너무 쉽게 등록을 했다간 문제가 생길 것 같고 해서 자동로그인때만 한 번 물어보게 하였습니다.
    특히나 공용 PC에선 ㅠㅠ
  • profile
    저희는 /xe 폴더에 사이트가 설치되어 있어 말씀하신 상위폴더에 넣으라는 파일은 /xe 폴더에 넣었습니다.
    그런데 /index.php?act=dispNotiDeviceList 에서 등록을 따로 해주고 해야 알림이 오긴 하는데요. 안드로이드 단말기 상단에 앱 알림처럼 푸시가 옵니다. 모링월드 처럼 아래에 뜨지 않구요.

    일단 댓글이 달려도 그냥은 오지 않는거 같고 위에 테스트하는 곳에서 등록을 해주는 과정이 필요한데요. 푸시도 하단에 우측에 뜨는 형식이 아니구요.
  • profile ?

    /xe가 있는 환경은 테스트를 하지 못했습니다.
    sercive-worker.js가 제가 기억하기론 해당 사이트의 루트 디렉터리에 있지 않으면 설치되지 않는걸로 압니다.

    아니면 설치는 되어도 브라우저 알림 구독 활성화쪽에서 에러가 날겁니다.

  • ? profile
    /index.php?act=dispNotiDeviceList

    에서 알림켜기로 알림을 활성화가 됩니다.
  • ? profile

    aa.png

  • profile ?
    모바일은 알림센터, PC는 우측 하단에 뜰거에요.
    저게 알림 강제 활성화 해버리면 여러모로 프라이버시쪽에 문제가 생겨서 ㅠㅠ
  • ? profile
    저건 제가 어쩔수 없이 강제로 활성화를 시킨거구요.
    그냥 알림이 오지 않아요. 현재 모바일밖에 테스트환경이 없어서 모바일에서 확인하고 있습니다.
  • profile ?

    수신은 되었지만 알림이 오지 않는건가요?

    브라우저 설정에서 알림이 비활성화 되어있는지 확인해보세요.

  • ? profile
    일단 관리자 페이지에 단말기목록에 안드로이드폰이 자동으로 나타나지가 않습니다.
  • ? profile
    아니요. 강제로 알림을 활성화 해줘서 저렇게 단말기 목록에 나오는거구요. 저상태에서는 알림이 옵니다만... 안으로이드푸시처럼 옵니다. 좀 쓰기 곤란한 알림...

    그리고 저렇게 활성화해주지 않으면 단말기가 등록 자체가 안되요.
  • profile ?
    사실 모바일에선 사용하기 곤란할 수도 있긴 합니다 ㅠㅠ
    강제로 활성화 했다는것이 /index.php?act=dispNotiDeviceList 에서 알림 사용 설정했다는건가요?
  • ? profile
    네. 위에 댓글에 적어드린 내용이 바로 그 내용입니다. 모바일에서 위 주소로 접근하면 PC레이아웃에서 알림활성화를 시킬수 있는 페이지가 뜹니다.

    거기서 알림활성화를 해주면 디바이스가 강제로 알림 활성화가 되는 듯 합니다.
  • ? profile
    모링월드에서는 사이트 안쪽에 하단 즈음에 레어어처럼 떠서 모바일에서도 쓰기 좋던데요.
    지금 제가 강제로 활성화해서 그런지 알림 자체가 사이트 이용중에 오는 알림이 아닌 푸시처럼 오니 앱을 운영하는 사이트에는 여러 푸시가 오기 때문에....
  • profile ?
    그럼 강제라는 말 보단 사용자 의도하에 동작한 것 같은데..
  • ? profile
    그럼 단말 등록페이지에 가서 등록을 하지 않으면 로그인을 해도 댓글 알림을 받을 수 없는 것이고

    지금 처럼 안드로이드 OS에서 발생되는 푸시 형태로 받게 되는게 현재 상태이고 모링월드는 따로 개조를 하신건지 궁금하네요.
  • profile ?
    모링월드 같은 경우 별개의 웹소켓을 사용한 알림을 사용하는데 레이어처럼 뜬다면 그 알림인 것 같습니다.
    PC같은 경우 본문의 사진처럼 오른쪽 하단에 뜨게 되어있습니다.
  • ? profile
    그럼 저희 사이트 문제는 사용자가 등록하는 페이지를 제공해서 등록시키지 않으면 알림을 받을 수 없는 상황이고

    모바일에서는 푸시처럼 오는게 정상이란 말씀 이시군요.
    (모링월드는 모바일에서 이 알림이 안뜬다는 말씀 이시네요. 모바일에서 오른쪽 아래 레이어처럼 살짝 뜨는게 웹소켓이신 듯 합니다.)
  • profile ?
    1. 모듈 설정에서 "자동 로그인시 사용" 설정후 자동 로그인(로그인 유지)기능을 사용으로 체크하고 로그인 한다면 알림 사용을 자동으로 유도하게끔 되어는 있습니다

    2. 모링월드는 크게 따로 튜닝을 한 부분은 없는걸로 기억합니다.
  • profile ?
    네 모바일에선 푸시처럼 오는게 정상입니다.
    push를 중점으로 두고 만든 모듈이기에..
  • ? profile
    하... 그럼 제가 모링월드에서 본건 전혀 다른 알림이어서 그것과 계속 비교를 했네요.

    모링월드,저희 사이트 모두 일반 로그인을 했기때문에 이 알림이 연동되지 않았을거구요.

    그래서 저희 사이트도 제가 따로 알림활성화를 해야 했던 것이고...
    모바일에서 모링월드처럼 나타나는게 아닌 푸시로 기기 자체에 알림이 오는 방식인거군요.

    이제 파악이 되었습니다. 모바일에서 사용시 푸시앱알림과 함께 오는 애로사항이 좀 있을 수 있겠습니다.

    구조를 파악했으니 특성을 알고 사용할 수 있겠습니다. 아마 저희가 사용한다면 모바일에서는 끄는 방법이 연구가 되어야 할 것 같네요.
  • ?
    자료 너무 감사드립니다 ㅠ_ㅠ

    혹시 알림센터의 모든 알림을 전송할 수는 없을까요?
  • ? ?
    모든 알림을 전송한다면 여러가지 문제가 생길 것 같은데 음..
  • ? ?
    음 뭔가 알림센터의 알림을 그대로 받아와서 뿌려주는 방식으로는 수정할 수 있는 방법이 혹시 있을까요??
  • ? ?
    가능이야 한데 상당히 많은 부분을 고쳐야 할걸로 예상됩니다.
  • profile
    {
    "455275921973": "숫자형식의 FCM(GCM) ID",
    "SARUP": "사이트 이름",
    "SARUP": "site name",
    "https://sarup.kr": "/index.php",
    "standalone": "standalone",
    "#2e3aa1": "#2e3aa1",
    "#ffffff": "#ffffff"
    }
    혹 제가적은것중에 문제있는게 있나요...?등록중입니다.잠시만 기다려 주세요. 에서 넘어 가질않습니다.
  • profile ?
    https://www.moringworld.com/manifest.json
    참고하시면 좋을듯 합니다.
  • ? profile
    감사합니다!
    제가 잘못 적었군요....
  • ? profile
    자동로그인기능은 IP가 바뀔때마다 해제되는데 그럼 알림을 못받는데 해결방법 없나요...?
  • profile ?
    제가 알기론 자동로그인 기능은 IP바껴도 유지되지 않나요?
  • ? profile
    로그인유지를 켜도 자동로그인이랑 무관하지 않나요...?와이파이가 바뀔경우 로그인이 풀리네요..
  • profile ?
    자동로그인이랑 로그인 유지 기능이랑 같은걸로 알고있는데
  • profile
    개인적인 의견입니다.
    1.자동로그인이 아닌 로그인시 알림을 허용할것인지 결정할 수 있게 해주어 보다 쉬운 접근이 이루어졌으면합니다.

    2.모바일에서 사용을 하지 않도록 옵션이 있었으면 합니다.
  • profile ?
    두 사항 추후 고려해보겠습니다 ㅎㅎ
  • ? profile
    두가지 고민해주세요~ 저희 사용 하고싶어요 ㅠㅜ
  • ?
    아이패드에서 해보니 지원하지 않는 브라우저라네요..혹시 iOS는 안되는건가요?
  • ? ?
    MAC OS X는 지원하지만 iOS는 미지원하는 것 같습니다 ㅠㅠ
  • ? ?
    정말 iOS가 여러모로 발목을 잡네요...ㅠㅠ
  • profile
    어렵네요. 역시 전문가의 세상은 범접할 수 없는 세상인듯해요. ㅜ.ㅜ
  • ?
    으음..xe에서 매우 적용이 힘들군요 ㅠㅠ
  • ?
    익명게시판에서는 푸시알림이 가지 않는군요 ㅠㅠ
  • ? ?
    noti.controller.php 파일에서

    if($doc_member_srl < -1) { // 익명게시판 사용시
    return new Object();
    }

    이 부분을 지워보세요.
  • ? ?
    게시판을 익명 게시판으로 전환 전에 제가 작성했던 글에 (제 닉네임이 그대로 노출)

    익명 게시판으로 전환 후 익명 사용자가 댓글을 달면 저에게 푸시알림이 가지만

    제가 익명으로 작성한 글에 익명 사용자가 댓글을 달면 저에게 푸시알림이 가지 않습니다
  • ? ?
    주말쯤 수정해놓겠습니다.
  • ? ?
    noti.controller.php에서 member_srl과 상위 댓글 작성자의 member_Srl을 받아오는 코드에 abs()로 감싸주니까 해결되었습니다~
  • profile

    감사합니다. 잘 되네요^^ (참고로 댓글을 보다 생각난 건데, 모바일의 경우 브라우저의 설정에서 알림수신을 선택할 수 있던 것 같은데...그것으로 설정을 대신할 수 있지 않을까 문득 생각이 들어서요. 테스트는 하지 못했지만 ㅎㅎ)

  • profile ?
    해당 기능 고려해보겠습니다
    감사합니다 ㅎㅎ
  • profile
    CloudFlare의 SSL을 사용하고 있습니다. ^^.

    SSL을 적용할때의 다른 애드온은 켜지않고 그냥 기본도메인과 진입을 https:// 로 하구 있는데요.
    모듈 설치랑 SenderID와 API모두 제대로 입력했는데에도 불구하고, 작동을 하지 않고 있는데
    어디가 문제일까요?

    권한은 707로도 줘보고 777로도 줘봐도 작동이 되지 않네요 ㅠㅠ
  • profile ?
    혹시 서버에서 cURL 사용이 가능한가요?
  • ? profile
    네 사용이 가능합니다 ㅠ
    모두 설정이 되어있고 큰 문제는 있어보이지 않네요.

    아파치 + php7 사용중입니다.
  • profile ?
    service-worker.js랑 manifest.json 파일이 제대로 설치되었는가요?
  • ? profile
    웹 서버의 XE루트 최상위에 두었습니다.
    ID와 각종 API도 맞게 적어두었구요
  • profile

    20170508_010719.png

     

    이런 메세지가 나옵니다.SSL 설치 해야 하나요?

  • profile ?
    브라우저 정책상 도청방지 때문에 https환경에서만 알림 사용이 가능합니다 ㅠㅠ
    http는 오직 localhost만 되어서 ㅠㅠ
  • ? profile
    ㅠㅠ
  • ?
    404에러가 뜨는데 무슨 문제일까요? index.php?mid=community&document_srl=12381370#comment_1370 알림을 클릭하면 이런식으로 주소가 되는데 제가 짧은주소를 사용해서 그런걸까요? 404가 뜨네요...
  • ? ?
    말로만 들어선 어디가 문제인지 파악이 어렵습니다 ㅠㅠ
  • ? ?
    아, 무슨 문제인지 알았습니다. document_srl 맨뒤 숫자 4자리가 붙어서 404가 뜨는거였네요. 뒤 4자리를 지운링크로 들어가면 제대로 가네요... 이게 어디가 문제일까요... ? 보니까 코멘트 넘버를 그대로 도큐멘트에 붙이는거같은데 음... 또 혹시 짧은 주소 옵션도 가능할까요?
  • profile
    저희 현재 모듈 기능으로 서비스를 시작해보려고 하는데요.

    다른 문제보다는

    댓글 알림이 올때
    #닉네임 &lt;p&gt; 댓글내용 &lt;p&gt;

    이런 형태로 와서 댓글 가독성이 조금 떨어지는데요. &lt;p&gt; 이부분이 왜 나타나는 걸까요?
  • profile
    일단 htmlspecialchars(cut_str(strip_tags($content, 20)));

    이런식으로 해 보니 댓글내용만 출력이 잘되네요.
  • profile profile

    혹시 어떤파일에서 수정해야하는지 알 수 있을까요?

    아아 찾았습니다 ㅎㅎ

  • profile
    자료 대단히 감사합니다.

    /index.php?act=dispNotiDeviceList 들어가서 알림 테스트 까지 떳는데
    어떠한 상황에 알림이 뜨는건가요?
    제가 작성한 글에 제가 댓글을 달기만 해도 알림이 뜨는건가요?

    유저들이 알림이 뜨도록 설정하는페이지가 /index.php?act=dispNotiDeviceList 여기 이페이지 일까요?
  • profile

    웹페이지 접속시 알림을 허용하시겠습니까 버튼을 뜨게한다거나
    알림 허용 버튼 링크를 일반페이지에 삽입 할 수있을까요?
    혹은 알림이 활성화되었을땐 알림켜기 버튼이 숨겨지는 IF 문이 있으면 더욱 더 좋을 것 같습니다.

     

    sdd.png

    &lt 값등이 뜨는데 지울 수 있는 방법도 궁금합니다.

  • profile
    사이트가 열려 있을 경우 알림을 클릭했을때 현재창에서 이동하게 할 수 없을 까요?
  • profile
    이 자료 사용시 안드로이드 4.4.2의 버전의 사이트에서 메뉴클릭등 사이트 자체가 먹통이 되는 것을 확인했습니다.
  • profile

    sdfdf.jpg

    이런식으로 사이트 접속만해도 허용할껀지 물어보게끔 가능할까요?

  • profile
    설정법 한가지 궁금한게 있습니다.
    xe를 다른 폴더에 설치했으면 위 설정법 그대로 적용하면 되는지 궁금합니다.
  • profile

    배포해주신 자료 감사합니다! 덕분에 ssl도 적용하고 모바일 푸시까지! 여러모로 도움이 되었습니다만...
    한가지, 크롬 기반인 네이버 웨일에서는 작동이 안되는지 'push 알람을 지원하지 않는 브라우저'라고 뜨네요 :(

  • ?
    브라우저를 닫아도 알림을 올수 있게 하는 방법이 없을까요???
  • profile
    와 정말 감사합니다!
  • profile

    감사합니다!
    제대로 설정 한 거 같은데 알림이 전혀 안오네요 ㅠㅠ
    모듈 설정에서 서버키 입력 해 주었고, 루트 디렉토리의 manifest.json 에도 발신자 ID와 이것저것 입력 해 줬습니다.
    등록된 단말기는 목록에 나오는데 알림이 오질 않아요.

    아파치2.4 php7.0 curl 지원 합니다.

    라이믹스 1.9.6 사용중입니다.

  • profile ?
    예전엔 알림 API로는 구글 GCM을 사용하였는데 올해 초인가 구글FCM으로 API가 바뀐걸로 알고 있습니다.
    그래서 모듈을 수정해야 작동하는데..
    시간나면 수정하겠습니다.
  • ? profile
    감사합니다!

서버에 요청 중입니다. 잠시만 기다려 주십시오...