그랜파 개발자의 프론트엔드 공부

Vue로 PWA 개발 - 그랜파 개발자 CM 푸시 메시지를 수신할 때 사용자가 웹 페이지에 있을 때와 앱이 백그라운드에 있을 때 각 수신 방법이 다릅니다.사용자가 현재 웹페이지에 있을 때 들어오는 메시지를 처리하려면 FCM SDK의 'onMessage' 메서드를 사용하여 해당 메시지를 수신할 수 있습니다. 이것은 main.js에서 설정합니다.앱이 백그라운드에 있을 때 알림을 처리하려면 서비스 워커가 필요합니다. 앱이 시작할 때 서비스 워커를 등록합니다.1. 앱이 Foreground에 있을 때 푸시 메시지 받기// src/main.jsimport Vue from 'vue'import App from './App.vue'import './registerServiceWorker'import router fro..

Vue로 PWA 개발 - 그랜파 개발자 Cloud에서 알림을 전송하는 기능을 구현합니다. ChatGPT가 알려준 코드에서 사용된 sendToDevice API는 더 이상 사용하지 않는다고 합니다. 그래서 구글 검색을 통하여 찾은 sendEachForMulticast를 사용하여 푸시 메시지를 보내는 기능을 구현하였습니다.기능 구현은 다음과 같은 단계를 따릅니다.1. Firebase Cloud Functions를 설정firebase init functions2. Firebase admin SDK 설치'functions/' 디렉터리로 이동합니다.'functions/' 디렉터리 내에 Firebase Admin SDK를 설치합니다.cd functions npm install firebase-admin3. FCM을..

Vue로 PWA 개발 - 그랜파 개발자 구독자가 알림을 요청하였다면 firestore에 토큰이 저장되어 있습니다. 한사람의 구독자가 PC와 모바일 등을 사용할 수 있으므로 각 구독자는 여러 토큰이 있습니다. 구독자 또한 여러 사람입니다. 나의 여러 구독자에 대해 각 구독자의 저장된 토큰의 목록을 구하여 이들 토큰에 대해 알림을 전송할 수 있습니다. 푸시 알림은 여러 상황에서 보낼 수 있습니다. 마이로그 앱의 경우 마이로그를 작성하여 firestore에 저장할 때 모든 구독자에게 알림을 보내려고 합니다. 또, 푸시 알림은 마이로그를 저장할 때 구독자에게 보내는 것 뿐 아니라 여러 필요에 따라 전송할 수도 있습니다. 그러므로 우선 한사람의 회원에 대해 알림을 전송하는 기능을 먼저 구현해 봅시다.Create ..