출처:
https://product.kyobobook.co.kr/detail/S000001817978
소스
https://github.com/codedesign-webapp
https://github.com/codedesign-webapp/pwa-about
푸쉬 프로젝트 ex13
https://github.dev/codedesign-webapp/pwa-example
★★ 웹 푸시 알림(Web Push Notification ★
★파이어베이스 공식 문서
=>
https://firebase.google.com/docs/web/setup?authuser=0&hl=ko
=>
https://firebase.google.com/docs/cloud-messaging/js/client?hl=ko
https://console.firebase.google.com/project/my-project-49bf8/messaging/onboarding?hl=ko
Vuefire
Realtime bindings between Vue/Vuex and Firebase
공시문서 반드시 참조 할것
1.푸시 알림 서비스 구경하기
푸시알림이란 공지가 필요한 메시지를 발송하여 사용자가 모바일 기기에서 확인 할 수 있는 서비스입니다. 전톡적으로 네이티브 모바일 앱에서 고객 관리를 목적으로
중요하게 활용되고 있습니다. PWA 에서도 이러한 푸시 알림 기능을 지원하며 웹 푸시 알림 이라는 명칭으로 구분합니다.
웹 푸시 알림은 네이티브 앱과 똑같은 방식으로 모바일 기기뿐만 아니라 데스크톱에서도 제공함으로써 플랫폼 종류를 더욱 확장하고 사용자의 편의석을 높입니다.
그리고 웹 푸시 알림은 운영체제 차원에서 지원하므로 웹 브라우저 활성화 여부와 관계없이 언제든지 알림을 전달합니다.
따라서 네이티브 앱과 같은 경험을 제공할 수 있습니다.
푸시 알림 서비스의 실행 구조
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=dilrong&logNo=221532597601
구독자의 수신 주소라 할 수 있는 종단점(endpoint) 정보를 관리하는 DB 서버와 푸시 알림을 발송하도록 푸시 서비스에 요청하는 애플리케이션 서버를 파이어베이스 DB,
파이어베이스 함수로 각각 구축할 것입니다. 푸시 서비스는 웹 브라우저에서 자동으로 지원하는데 크롬 브라우저는 자동으로 FCM 을 사용하므로 별도로 구축할 필요는
없습니다.
공개 키와 비공개 키
공개 키와 비공개 키는 하나의 쌍으로 생성되며 인증받은 사용자만 중요한 데이터에 접근할 수 있습니다.
공개 키는 일반적으로 신뢰할 수 있는 기관에 제공하며 열려 있으므로 누구나 열람하고 사용할 수 있습니다. 반면에 비공개 키는 암호화된 데이터를
해독할 때 공개 키와 함께 사용해야 합니다. 그러므로 절대로 외부에 유출되어서는 안 되는 중요한 키입니다.
또한 두 키의 역할을 보면 차이점을 이해 할 수 있습니다. 공개 키가 있다는 것은 신뢰할 만한 외부 기관에 데이터를 보관하고 있다는 의미입니다.
그리고 비공개 키가 있다는 것은 데이터를 소유한 주인이라는 의미입니다. 공개 키와 비공개 키를 함께 사용한다는 것은 데이터의 주인이 신뢰할 만한
기관을 통해 데이터에 접근하고 있다는 뜻이므로 데이터를 해독해 사용해도 됩니다.
다음 그림은 이러한 관계를 친구 사인
이러한 관계를 이번 예제에 적용하면 비공개 키를 소유한 것은 푸시 알림 PWA 가 되고, 공개키는 신뢰할 수 있는 알림 서비스인 FCM 에서만 관리합니다.
다음 그림은 푸시 알림 서비스에서 공개 키와 비공개 키가 어떻게 사용되는지 정리한 것입니다. 종단점에는 어떤 푸시 서버를 이용해서 어떤 사용자
기기에 발송할 것인지에 관한 정보가 담겨 있습니다.
$ npm install $ npm rub build $ server dist
먼저 윈도우 검색창에 "알림 및 작업" 입력후 알림이 켜져 있는지 확인해 보자.
완성된 프로젝트 파일 ex13 에서 첫 화면에서 알림 허용을 클릭해서 푸시 알림을 등록합니다. 그러면 웹 브라우저 위쪽에 팝업 메뉴가 나타나서
알림 표시 여부를 묻습니다. 여기서 <허용> 을 클릭하면 푸시 알림 서비스에 등록됩니다. 즉, 이 컴퓨터는 지금부터 푸시 알림 서비스를 받습니다.
구글 계정에 로그인 된 브라우저만 적용이 된다.
구글 계정에 로그인 되어 있지 않으면 다음과 같이 콘솔창에 푸시 창에 푸시알림 기능이 허용되지 않았다는
메시지가 나온다.
알림 버튼을 클릭하면 잠시 후 컴퓨터 바탕화면 오른쪽 아래에 알림 서비스 등록을 환영하는 메시창이 나타난다.
푸시 알림을 허용한 후 보이는 알림 창에서 아래쪽에 커피 아이콘이나 <커피를 좋아하시면 링크를 클릭하세요.> 를 클릭하면 스타벅스 홈페이지가 나타납니다.
이 처럼 푸시 알림은 링크를 사용해 정보를 전달하는 웹 사이트에 연결할 수도 있다.
알림을 해제하고 싶다면 언제든 알림해제를 누르면 됩니다.
이어서 푸시 알림 메시지를 보내겠습니다. 햄버거 아이콘(=)을 눌러 메뉴 목록을 표시하고 , [푸시 알림 메시지 보내기]를 선택해서 운영자 화면으로 변경합니다.
제목과 내용에 발송할 내용을 입력하고 발송을 클립합니다.
그러면 등록된 사용자에게 메시지가 발송되므로 현재 컴퓨터로 확인할 수 있습니다. 알림창이 뜨면 <이 링크는 상세 정보페이지로 이동합니다.>를
클릭해 봅니다. 그러면 새로운 웹 브라우저 창이 열리면서 CODE-DESIGN 웹 앱' 사이트에 접속하는 것을 알 수 있습니다.
또한 안드로이드 기기로드 테스트해 보면 화면이 잠겨 있어도 메시지를 잘 받고 아이콘에는 메시지 개수에 따라 배지 숫자도 표시되는 것을 확인할 수 있습니다.
크롬 브라우저에서 푸시 알림 해제하기
크롬 브라우저에서 오른쪽 위에 메쥬 버튼을 누르고 [설정]을 선택합니다. 설정 화면이 보이면 오른쪽 위에 돋보기 아이콘을 누르고 "알림" 을 입력합니다.
검색 결과 중[사이트 설정]을 클릭합니다.
사이트 설정 화면에서 [알림]을 선택합니다. 이어서 허용 목록에서 "http://localhost:3000" 오른쪽에 메뉴 버튼을 누르고[삭제]를 선택합니다.
또한, 안드로이드폰에서는 [설정 -> 사이트 설정 -> 알림] 메뉴를 선택한 후 등록된 해당 사이트를 삭제합니다.
2.매니페스트 작성하기
운영자로서 푸시 알림 메시지를 보내려면 먼저 공개 키와 비공개 키가 있어야 합니다. web-push 모듈의 web-push 명령을 사용하면 되는데, 먼저 package.json 의 scripts 항목에
"web-push" : "web-push" 를 추가합니다.
package.json
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"web-push" : "web-push"
},
다음으로 web-push 를 포함해 이 프로젝트에서 사용하는 모듈들을 설치하고 공개키와 비공개 키를 생성합니다.
4개의 모듈 설치
$ npm install web-push firebase vuefire firebase-tools
공개키와 비공개키
$ npm run web-push generate-vapid-keys
생성된 키는 web-push-key.txt 파일을 만들어서 임시로 저장
Public Key: BLq3ycYqetXwk3qCkK-rF-------샘플-----------hs51tze3TGqe6gwcTB0dsad9wbTBnac_sdfsdfsdfFPMnTvsAr2ZaJxrK8JaR2AZiB77bCJ4XI Private Key: 7cvGgYJVsfds--------샘플----------d352r32PR1WgVsE6fM-fsdfBUk8CwoAL4
매니페스트 작성하기
public/manifest.json
{
"name": "푸시알림 서비스",
"short_name": "푸시알림 서비스",
"icons": [
{
"src": "./img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"orientation": "portrait",
"background_color": "#ffffff",
"theme_color": "#ffffff"
}
3.파이어베이스 준비하기
실전용 푸시 알림 서비스를 제공하려면 구독자를 관리하는 DB 서버, 푸시 알림을 보내는 애플리케이션 서버를 구축해야 합니다. 이러한 백엔드 서버는
파이어베이스를 활용하면 강력한 서비스를 쉽게 제공할 수 있습니다. 어떻게 연결하여 사용하는지 살펴보겠습니다.
파이어베이스 프로젝트를 만들고 웹앱에 등록 후 데이터베이스 생성까지 과정은 앞에서 다루었으니 생략합니다. 다음 과정을 참고해
pwa-notification-push 라는 이름으로 새로운 프로젝트를 만듭니다.
1. firebase.google.com 에 접속해서 pwa-notification-push 라는 이름으로 새프로젝트를 만들기
2.파이어베이스 프로젝트 설정 화면에서 웹앱에 파이어베이스 추가하기 (닉네임 pwa-notification-push 로 등록)
3.파이어베이스 SDK 추가에서 databaseURL 값을 복사해서 기록해 두기
4.Realtime Database 만들기 -> 테스트 모드로 시작
src/datasource/firebase.js
댓글 ( 4)
댓글 남기기