웹앱에서 스마트폰 사용자에게 푸시 메시지를 보내려면 웹 푸시 API와 푸시 서비스(예: Firebase Cloud Messaging, FCM)를 사용해야 합니다. FCM은 Google에서 제공하는 서비스로, 크로스 플랫폼 푸시 알림을 쉽게 구현할 수 있습니다.

아래는 Firebase Cloud Messaging(FCM)을 사용하여 웹앱에서 스마트폰 사용자에게 푸시 메시지를 보내는 예제 코드입니다.

1. Firebase 프로젝트 설정

1. Firebase Console에서 새 프로젝트를 생성합니다.
2. 프로젝트 설정에서 클라우드 메시징 탭으로 이동하여 서버 키를 복사합니다.

2. 웹앱에 Firebase 추가

1. Firebase SDK를 웹앱에 추가합니다.
2. Firebase 초기 설정을 구성합니다.

3. 클라이언트 코드

먼저, 웹 클라이언트에서 사용자에게 푸시 알림 권한을 요청하고 FCM 토큰을 받아야 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Push Notifications</title>
  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-messaging.js"></script>
</head>
<body>
  <h1>Push Notifications with Firebase</h1>
  <button id="request-permission">Request Permission</button>


  <script>
    // Firebase 구성
    const firebaseConfig = {
      apiKey: "your-api-key",
      authDomain: "your-project-id.firebaseapp.com",
      projectId: "your-project-id",
      storageBucket: "your-project-id.appspot.com",
      messagingSenderId: "your-sender-id",
      appId: "your-app-id",
      measurementId: "your-measurement-id"
    };


    // Firebase 초기화
    firebase.initializeApp(firebaseConfig);


    const messaging = firebase.messaging();


    // 권한 요청 및 토큰 받기
    document.getElementById('request-permission').addEventListener('click', () => {
      messaging.requestPermission()
        .then(() => messaging.getToken())
        .then((token) => {
          console.log('Token received:', token);
          // 서버에 토큰을 저장하는 코드를 여기에 추가할 수 있습니다.
        })
        .catch((err) => {
          console.error('Permission denied or error occurred:', err);
        });
    });


    // 백그라운드 메시지 처리
    messaging.onMessage((payload) => {
      console.log('Message received. ', payload);
      // 사용자에게 알림을 표시하는 코드를 여기에 추가할 수 있습니다.
    });
  </script>
</body>
</html>

4. 서버 코드

서버에서 FCM을 사용하여 푸시 알림을 전송하는 예제입니다. Python Flask를 사용합니다.

from flask import Flask, request, jsonify
import requests


app = Flask(__name__)


FCM_API_KEY = 'your-server-key-from-firebase-console'


@app.route('/send_push', methods=['POST'])
def send_push():
    try:
        data = request.json
        token = data['token']
        message = data['message']


        headers = {
            'Content-Type': 'application/json',
            'Authorization': 'key=' + FCM_API_KEY,
        }


        payload = {
            'to': token,
            'notification': {
                'title': 'New Notification',
                'body': message,
            }
        }


        response = requests.post('https://fcm.googleapis.com/fcm/send', headers=headers, json=payload)
        return jsonify(response.json()), response.status_code
    except Exception as e:
        return jsonify({'status': 'failed', 'error': str(e)}), 500


if __name__ == '__main__':
    app.run(debug=True)

코드 설명

1. Firebase 설정 및 초기화: Firebase SDK를 웹 클라이언트에 추가하고 Firebase 프로젝트 설정으로 초기화합니다.
2. 권한 요청 및 토큰 받기: 사용자가 푸시 알림 권한을 승인하면 FCM 토큰을 받아옵니다. 이 토큰은 서버로 전송되어야 합니다.
3. 서버에서 푸시 메시지 전송: 서버는 FCM 토큰과 메시지를 받아 푸시 알림을 전송합니다. requests 라이브러리를 사용하여 FCM HTTP v1 API에 POST 요청을 보냅니다.

요청 예제

클라이언트에서 받은 토큰과 메시지를 서버에 POST 요청으로 전송합니다.

{
  "token": "user_device_token",
  "message": "Hello, this is a test push notification!"
}

이 예제는 Flask 서버에서 /send_push 엔드포인트로 POST 요청을 받아 FCM을 통해 푸시 알림을 전송합니다. 클라이언트에서는 사용자가 푸시 알림 권한을 허용하고 FCM 토큰을 얻어 서버로 전송합니다.