Fast and Service Worker를 사용하여 밀어넣기 알림 보내기
14748 단어 Express.jsServiceWorkerVue.js추식 통지
입문
PC의 브라우저에 slack 같은 푸시 알림을 보내고 싶은 상황에서 SSR 구조라면 응용 서버, 클라이언트, 푸시 서버만 있으면 가능하다.
푸시 서버는 각 클라이언트 브라우저를 위해 준비할 수 있는지, Chrome Firefox Edge 등을 지원합니다.
추식 알림을 보내기 전의 절차는...
현재 업무 중에 채팅 시스템을 개발하여 특정 사용자에게 구성원을 보낼 때 해당 사용자의 장치에 추식 알림을 보내는 시스템을 개발하였기 때문에 그 절차를 소개한다.
나는 slack의 화장수를 만들고 싶다.
프로비저닝
서버
서비스 종사자 등록
시스템을 로그인제로 설정해 보세요. 채팅에서 다른 사용자에게 구성원을 던질 수 있습니다.
이 때, 나는 서비스Worker의 기능을 이용하여 로그인한 사용자의 단말기에 추식 알림을 보내려고 한다.
Vue에서 PWA를 가져오는 절차는 Nuxt로 개발할 것인지 vue-cli로 개발할 것인지에 따라 다릅니다.이번에는 vue-cli를 이용했기 때문에 그쪽 방법을 소개해 드릴게요.
vue add @vue/pwa
registerServiceWorker.js가 있지만 브라우저에 서비스워커를 등록한javascript 파일입니다.
registerServiceWorker.js
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}
또한 vue는 개발 모드에서 서비스워커를 실행하는 것을 추천하지 않기 때문에 실제 등록도 생산에서 진행해야 한다.
ServiceWorker가 성공적으로 등록되었는지 여부는 개발자 도구의 응용 프로그램 탭을 보고 Source에서 파일을 등록하면 됩니다. 푸시 알림 권한 부여 구현 웹에서 자주 볼 수 있는 밀어넣기 알림을 허용하는 단추를 설치합니다.허용하면 각 브라우저에 대해 설정된 푸시 서버에서 끝점으로 사용할 URL과 키를 보냅니다.서버는 밀어내기 알림을 보낼 때 키와 함께 밀어내기 알림으로 표시된 내용을 이 끝에 보낼 수 있습니다. https://developer.mozilla.org/ja/docs/Web/API/PushManager/getSubscription
PushManager.getSubscription().then(subscription => {}) 중subscription 중null의 경우 이 사용자는 추식 통지를 허가하지 않으며, 추식 통지를 허가하는 경우subscription에 상기 정보를 저장한다.이러한 정보는 추식 알림을 허용하는 사용자에게 추식 알림을 보내기 위해 응용 서버에 저장되어야 합니다.registerServiceWorker.js
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
// 通知が購読されたかどうか
isSubscribed = !(subscription === null);
// もし購読されていれば、アプリケーションサーバーへ購読者情報の登録
if (isSubscribed) updateSubscriptionOnServer(subscription);
});
구현 서비스 워커
ServiceWorker에서 각 이벤트는 코드를 작성해야 합니다.
sw.js
// push通知を受け取ったときの挙動
self.addEventListener("push", function(event) {
const data = JSON.parse(event.data.text());
const title = data.title;
// push通知のbody アイコンの情報を詰める。
const options = {
body: data.message, // 表示メッセージ
icon: "../thumbnail/pwa/android-chrome-192x192.png", // アイコン
badge: "../thumbnail/pwa/android-chrome-192x192.png", // バッチアイコン
};
event.waitUntil(self.registration.showNotification(title, options));
});
응용 서버에서 푸시 알림 자격 증명 수신
ServiceWorker에서 게시하는 밀어내기 알림에 필요한 정보는 다음과 같습니다.
{
"endpoint":"endpointURL",
"p256dh":"...",
"auth":"..."
}
WebPush를 사용하여 Push 알림 보내기
응용 서버에서 밀어넣기 알림을 보낼 때 Node.js 환경에서 사용web-push.
setVapidDetails로 설정합니다.auth, p256dh의 키, endpoint의 URL을 설정하면 밀어넣기 알림을 실행할 수 있습니다.const webpush = require('web-push');
// サーバー側の鍵情報を詰める
webpush.setVapidDetails(
'mailto:[email protected]',
vapidKeys.publicKey,
vapidKeys.privateKey
);
// Push通知を送るクライアント側の情報を詰める
const pushSubscription = {
endpoint: '.....',
keys: {
auth: '.....',
p256dh: '.....'
}
};
// Push通知を送る
webpush.sendNotification(pushSubscription, 'Your Push Payload Text');
화가 나는 것은 이 부근의 규격이 단점과 전혀 다른 구역이니 일일이 확인해야 한다는 것이다.
사용자가 푸시 알림 라이센스를 취소할 때의 HTTP 상태 코드
결국
이후 채팅의 통신에서 WebPush를 보내는 함수를 호출하면 채팅과 Push 알림 기능이 연결됩니다.구성원의 사용자가 밀어넣기 알림을 허용하면 브라우저에서 알림이 표시됩니다.
사실 세계 최고의 브라우저 Vivaldi에서 받은 구성원의 스냅샷
(개발 중인 시스템 이름과 아이콘이 보여서 수정했습니다) 참고 자료 웹 응용 프로그램에 푸시 알림 추가
추식 알림에 관한 클라이언트의 설정과 쓰기 방법을 크게 참고하였다.
@vue/cli-plugin-pwa
vue-cli에서 PWA 환경 구성에 필요한 모듈
web-push
Node.js 환경에서 밀어내기 알림을 보내는 NPM 패키지
Reference
이 문제에 관하여(Fast and Service Worker를 사용하여 밀어넣기 알림 보내기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tsrnk/items/a8c5be093e38a87a8d31텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
