OneSignal을 통해 웹 사이트에push 알림 기능 설치

OneSignal
제가 W3C Push API 사용법을 찾아봤어요.
Rebuild.나는 fm의 서비스 워커가 힌트라고 생각한다. 크롬의 컨트롤러를 열어 보니 OneSignral라는 제3자의 프로그램 라이브러리를 사용했다.

일본어는 정보가 적지만 무료로 사용할 수 있고 문서도 충실해서 해보기로 했어요.
푸시API는 SSL에서만 받을 수 있지만 원시그널을 사용하면 SSL이 아닌 사이트에서도 푸시 알림을 보낼 수 있다.
(이 경우 ~.onesignal.com에서 알림)
우선 강좌에 따라 해 보세요.
구글 클라우드 메시지 등록
크롬 브라우저에 푸시 알림을 보내려면 Google Cloud Message의 APIKey가 필요하므로 먼저 Google Developer Constore로 프로그램, API Key, 프로젝트 번호 (프로젝트 ID가 아님) 를 만듭니다.탭
이 부근의 다른 사람들의 보도는 비교적 상세하니 저쪽을 참조하시오.
첫 번째 Service Worker(Push API 편)
OneSignal 자습서
HTTP를 통해 알림을 푸시하는 방법은 ↓의 튜토리얼입니다.
Dashboard에서 트위터 알림을 편집하려는 프로그램에 로그인하고, 몇 줄 코드를 "}"에 편집합니다.
Web Push SDK Installation (HTTP)
OneSignal 애플리케이션에 로그인
Dashboard 에서 Adda new app 를 선택합니다.
응용 프로그램 이름을 등록합니다.

모바일 애플리케이션도 지원하는 것 같지만 이번에는 웹시트 푸시를 선택했다.

사파리한테 알리려면 시간이 좀 걸릴 것 같은데.이번엔 크롬.

localhost에서 시도한 섹션에서 Site URL에 "*"로 로그인합니다.
Google Server API Key에 Google Developer Consiole 릴리즈의 APIKey를 입력합니다.
비 HTTPS 웹 사이트에서 "My Site is not fully HTTPS"알림을 받고 싶어서요.구문을 사용합니다.

"Choose Subdomain"은 임의의 값입니다.HTTP의 경우 하위 도메인이 포함된 URL에서 알림을 보냅니다.
Google Project Number는 Google Developer Console에서 발행하는 프로젝트 번호입니다.

항목 번호는 모든 활동 표시를 클릭한 페이지에서 참조할 수 있습니다.


마지막에 APPID가 나오니까 적어두세요.

그리고 원래의 강좌에 따라 아래의 스크립트를 >의 헤드에 기술합니다.
응용 프로그램 등록 시 발행되는 APPID는 여기에 있습니다.

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
<script>
  var OneSignal = OneSignal || [];
  OneSignal.push(["init", {
    appId: "YOUR_APP_ID",
    subdomainName: 'PushAPI',
    notifyButton: {
        enable: true // Set to false to hide
    }
  }]);
</script>

페이지를 열면 오른쪽 아래에 원 signral 아이콘이 표시되며, 클릭하면subscribe에 표시됩니다.
알림 보내기
Dashboard에서 알림을 보냅니다.

나는 사용자의 단추로 알림 추이를 누르고 싶지만, 만약 API Reference의 느낌을 읽었다면, SDK push에서 하는 방법은 없을 것 같다.
이 근처 좀 더 알아볼게요.
2016.5.9
문서를 자세히 읽어보니 알림용 API가 이미 공개되어 있었다.
/notifications (Create Notification)
jsx에서 온 POST는 npmsuperagent을 사용합니다.

import request from "superagent"

~

pushNotify(){
    var api_url = "https://onesignal.com/api/v1/notifications";
    var api_key = "my_api_key";
    var json = {
      "app_id": "my_app_id",
      "contents": {"en" : "Hello! this is " + this.props.name},
      "included_segments": ["All"]
    };

    request.post(api_url)
      .send(JSON.stringify(json))
      .set("Content-Type", "application/json")
      .set("Authorization", "Basic " + api_key)
      .end((err, res) => {
        console.log(res);
        console.log(err);
      });
  },

해보면 몇 분이면 되니까 꼭 해보세요.