¶ Web PUSH
¶ 개요
본 문서는 (주)유라클에서 제공하는 “MSP Push Platform”의 UPMC 연동 API 정의서를 설명하고 있다, 본 문서는 성능 개선, 기능 추가 등의 사항으로 내용이 변경될 수 있다.
¶ 목적
본 문서는 PUSH 서비스의 Web Push 연동을 위한 제반 사항을 기술한다.
¶ 제약 사항
사용하고자 하는 웹 사이트는 ServiceWorker의 동작을 위해 SSL(https)을 필수로 적용하여야 한다.
MPushSDK.min.js, MPushSW.min.js는 해당 웹사이트의 최상위 경로(/)에 위치하여야 한다.
¶ 설치
MPushSDK.min.js, MPushSW.min.js를 알림을 수신하고자 하는 웹 사이트 내에 설치하여 사용한다.
지원되는 브라우저에서는 MPushSDK.min.js를 불러왔을 때, window 객체 내에 window.M 오브젝트가 생성되어 Web Push관련 API를 사용할 수 있게 되며, 지원되지 않는 브라우저에서는 window.M 객체가 초기화 되지 않는다.
¶ 웹페이지 내 Script 삽입
<script language='javascript' src='./MPushSDK.min.js' />
<script language='javascript'>
var M = window.M || [];
M.push(function() {
M.init('[라이선스 APP ID]', '[UPMC 서버 URL]', '[PROVIDER 데몬에 설정한 공개키]', {
title: "Morphues Cloud Web Push SDK",
link: "http://localhost:3000",
icon: "https://ssl.gstatic.com/gb/images/v1_9886baa5.png"
});
});
// 서비스 등록
M.register("[사용자 아이디]", "[사용자 이름]").then(function() {
console.log("사용자 및 서비스를 등록 하였습니다.");
}).catch(function(e) {
console.log("사용자 및 서비스를 등록하는데 실패하였습니다. (사유 : " + e + ")");
});
</script>
위의 샘플 코드를 참고하여 설치 후 웹사이트에 접속 시 아래 그림과 같은 권한 요청 팝업이 노출되면 WEB PUSH를 수신할 수 있다.
¶ ServiceWorker를 최상위 경로에 두지 않는 경우
이 스크립트를 사용하는 페이지의 HTTP Response Header에
Service-Worker-Allowed항목을 아래와 같이 추가하고 MPushSDK 초기화 시 serviceWorker 옵션을 추가하여 MPushSW.min.js의 경로를 지정한다.
¶ HTTP Response Header
Service-Worker-Allowed : /
¶ 샘플코드
<script language='javascript' src='./MPushSDK.min.js' />
<script language='javascript'>
var M = window.M || [];
M.push(function() {
M.init('[라이선스 APP ID]', '[UPMC 서버 URL]', '[PROVIDER 데몬에 설정한 공개키]', {
title: "Morphues Cloud Web Push SDK",
link: "http://localhost:3000",
icon: "https://localhost/gb/images/v1_9886baa5.png",
serviceWorker: "/javascripts/MPushSW.min.js" // Service Worker 경로 지정
});
});
// 서비스 등록
M.register("[사용자 아이디]", "[사용자 이름]").then(function() {
console.log("사용자 및 서비스를 등록 하였습니다.");
}).catch(function(e) {
console.log("사용자 및 서비스를 등록하는데 실패하였습니다. (사유 : " + e + ")");
});
</script>
¶ API 명세
¶ PUSH 서비스 초기화
¶ M.init(String, String, String, Object)
Arguments
- APP_ID(String) - 설정 값 required
- Receiver_URL(String) - UPMC의 주소 (https 필수) required
- PUBLIC_KEY(String) - PROVIDER 데몬에 설정된 서비스 자가 서명 공개 키 (VAPID Public Key) required
- OPTIONS(Object) - 알림에서 사용되는 기본 값
- title(String) - 알림 제목
- url(String) - 알림 클릭 시 링크 URL
- icon(String) - 알림 표시 기본 아이콘 URL (https 필수)
Example:
var M = window.M || [];
M.push(function() { // 미지원 브라우저 대응 코드
M.init('[라이선스 APP ID]', '[UPMC 서버 URL]', '[PROVIDER 데몬에 설정한 공개키]', {
title: "Mobile No.1 - Morpheus",
url: "https://morpheus.kr",
icon: "https://www.morpheus.kr/layouts/morpheus_2013/img/common/logo.png"
});
});
¶ PUSH 서비스 등록
¶ M.register(String, String)
Arguments
- CUID(String) - 사용자 아이디 required
- CNAME(String) - 사용자 명 required
Return (Promise)
- APPID(String) - 어플리케이션 식별 정보
- AUTHKEY(String) - 전문 통신 인증 키
- PSID(String) - Endpoint URL
Example:
M.register("morpheus", "모피어스").then(function() {
console.log("웹 PUSH 알림이 등록 되었습니다.");
}).catch(function(e) {
console.log(e);
});
¶ PUSH 서비스 해제
¶ M.unregister()
Return (Promise)
Example:
M.unregister().then(function() {
alert("알림 서비스 등록이 해지 되었습니다.");
}).catch(function(e) {
alert("알림 서비스 해지 중 오류가 발생하였습니다.(" + e + ")");
});
¶ PUSH 서비스 확인
¶ M.isRegistered()
Return (Promise)
- result(boolean) - 서비스 등록 여부
Example:
M.isRegistered().then(function(r) {
if(r)
alert("알림 서비스가 등록되어 있습니다. ");
else
alert("알림 서비스가 등록되어 있지 않습니다.");
}).catch(function(e) {
alert("알림 서비스 해지 중 오류가 발생하였습니다.(" + e + ")");
});
¶ iOS에서 Web Push 사용
¶ 개요
iOS 단말기에서 Web Push를 사용하기 위해서는 대상 웹사이트에 PWA를 필수로 적용해야 하며, 사용자는 홈 화면에 해당 사이트를 추가해야 합니다.
¶ PWA 적용 예제
1. manifest.webmanifest 작성
{
"name": "Uracle Web Push Sample",
"short_name": "PUSH",
"start_url": ".",
"display": "fullscreen",
"background_color": "purple",
"description": "Using Morpheus Web Push on iOS and Android.",
"icons": [
{
"src": "icon/fox-icon.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
}
]
}
2. HTML 내 적용
<link rel="manifest" href="manifest.webmanifest" />
¶ iOS 단말기에서 Web Push 사용 시나리오
-
PWA 적용된 페이지로 접속 후 공유하기 버튼 클릭
-
"홈 화면에 추가" 클릭
-
홈 화면에 추가된 앱 선택
-
PWA로 실행
-
사용자 이벤트(클릭)을 통한 웹 푸시 등록
-
사용자 알림 허용
