ChatGPT와 FCM 개발 - Subscription

75. 푸시 알림 구독

ChatGPT 에게 FCM 기능 구현을 위해 질문을 하면서 알게된 몇가지를 정리하여 봅시다.

1. 앱이나 웹사이트에서 알림을 보내려면 사용자가 권한을 부여해야 합니다. 이는 일반적으로 Notification.requestPermission() 메서드를 사용하여 수행됩니다.
2. 웹 애플리케이션에서 푸시 알림은 서비스 워커를 사용하여 메시지를 수신하고 표시합니다.
3. 서비스 워커는 푸시 알림 구독 프로세스에 참여합니다. 사용자가 알림 수신에 동의하면 서비스 워커는 브라우저의 'PushManager'와 상호작용하여 구독 관리를 돕습니다
4. 사용자가 푸시 알림을 구독하는 데 사용되는 PushManager.subscribe() 메서드는 일반적으로 서비스 워커가 등록되고 준비되면 호출됩니다. 이 메서드는 엔드포인트, 공개 키 및 FCM이 해당 특정 사용자에게 푸시 메시지를 보내는 데 필요한 기타 정보를 포함하는 구독 개체를 생성합니다.

ChatGPT에게 물었습니다.

Create a push notification subscription feature.

푸시 알림 구독 기능을 만들어 줘.

ChatGPT

 

Creating a push notification subscription feature involves a few key steps. Below is a detailed guide for implementing this feature in a web application, using a combination of JavaScript, a Service Worker, and an application server to manage subscriptions and send notifications.

푸시 알림 구독 기능을 생성하려면 몇 가지 주요 단계가 필요합니다. 다음은 구독을 관리하고 알림을 보내기 위해 JavaScript, 서비스 워커 및 애플리케이션 서버의 조합을 사용하여 웹 애플리케이션에서 이 기능을 구현하는 방법에 대한 자세한 가이드입니다.

1. Set Up the Service Worker

1. 서비스 워커 설정

The Service Worker will handle push notifications in the background, even when the user is not actively using the web app.
서비스 워커는 사용자가 웹 앱을 적극적으로 사용하지 않는 경우에도 백그라운드에서 푸시 알림을 처리합니다.

Create a Service Worker File (sw.js):

서비스 워커 파일(sw.js)을 생성합니다:

 

This file should be placed in the root directory or the public directory if you're using a framework like Vue.js.
이 파일은 Vue.js와 같은 프레임워크를 사용하는 경우 루트 디렉터리나 'public' 디렉터리에 있어야 합니다.

// public/sw.js

self.addEventListener('push', function(event) {
  const data = event.data.json();
  console.log('[Service Worker] Push Received.', data);

  const title = data.title || 'Notification Title';
  const options = {
    body: data.body || 'Notification Body',
    icon: '/icon.png', // Customize with your app icon
    badge: '/badge.png' // Customize with a smaller icon (optional)
  };

  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

self.addEventListener('notificationclick', function(event) {
  console.log('[Service Worker] Notification click Received.');

  event.notification.close();

  event.waitUntil(
    clients.openWindow('https://your-website.com') // Replace with your app's URL
  );
});

 

2. Register the Service Worker

2.서비스워커 등록

In your main JavaScript file, register the Service Worker and create the function to subscribe the user to push notifications.
기본 JavaScript 파일에서 서비스 워커를 등록하고 사용자가 푸시 알림을 구독하도록 하는 기능을 만듭니다.

// src/main.js or another main entry point

if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('/sw.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(error) {
      console.error('Service Worker registration failed:', error);
    });
} else {
  console.warn('Push messaging is not supported');
}

 

3. Create the Push Notification Subscription Function

3. 푸시 알림 구독 기능 생성

This function will ask the user for permission to send notifications, subscribe them to the push service, and send the subscription details to your server.
이 기능은 사용자에게 알림 전송, 푸시 서비스 구독, 구독 세부정보를 서버로 보내기 위한 권한을 요청합니다.

// src/notifications.js

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }

  return outputArray;
}

export async function subscribeUserToPush() {
  try {
    const registration = await navigator.serviceWorker.ready;
    const permission = await Notification.requestPermission();

    if (permission === 'granted') {
      console.log('Notification permission granted.');

      const subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('YOUR_VAPID_PUBLIC_KEY') // Replace with your VAPID public key
      });

      console.log('User is subscribed:', subscription);

      // Send subscription to server to store it
      await sendSubscriptionToServer(subscription);

      return subscription;
    } else {
      console.warn('Notification permission not granted.');
    }
  } catch (error) {
    console.error('Failed to subscribe the user: ', error);
  }
}

async function sendSubscriptionToServer(subscription) {
  try {
    const response = await fetch('/api/subscribe', {
      method: 'POST',
      body: JSON.stringify(subscription),
      headers: {
        'Content-Type': 'application/json'
      }
    });

    if (!response.ok) {
      throw new Error('Failed to send subscription to server.');
    }

    console.log('Subscription sent to server successfully.');
  } catch (error) {
    console.error('Failed to send subscription to server:', error);
  }
}

 

4. Use the Subscription Function in Your Web Application

4. 웹 애플리케이션에서 구독 기능을 사용하세요

You can now use the subscribeUserToPush function in a component or directly in your application's JavaScript code to allow users to subscribe to push notifications.
이제 구성 요소에서 또는 애플리케이션의 JavaScript 코드에서 직접 subscribeUserToPush 함수를 사용하여 사용자가 푸시 알림을 구독하도록 허용할 수 있습니다.

<template>
  <div>
    <h1>Push Notifications</h1>
    <button @click="subscribeToNotifications">Subscribe to Notifications</button>
  </div>
</template>

<script>
import { subscribeUserToPush } from './notifications';

export default {
  name: 'NotificationButton',
  methods: {
    async subscribeToNotifications() {
      const subscription = await subscribeUserToPush();
      if (subscription) {
        console.log('User subscribed successfully:', subscription);
      }
    }
  }
};
</script>

 

5. Backend Endpoint to Handle Subscriptions

5. 구독 처리를 위한 백엔드 엔드포인트

On the server side, create an endpoint to handle and store the subscriptions. This is typically done using a backend framework like Node.js/Express.
서버 측에서 구독을 처리하고 저장하는 엔드포인트를 만듭니다. 이는 일반적으로 Node.js/Express와 같은 백엔드 프레임워크를 사용하여 수행됩니다.

// server.js or routes.js (Node.js with Express)
app.post('/api/subscribe', (req, res) => {
  const subscription = req.body;

  // Store subscription in your database (e.g., MongoDB, PostgreSQL, etc.)

  res.status(201).json({});
});

// Later, you can send push notifications using this stored subscription.

 

6. Sending Push Notifications

6. 푸시 알림 보내기

Once users are subscribed, you can send push notifications using a push service like Firebase Cloud Messaging (FCM) or directly using the Web Push Protocol.
사용자가 구독하면 FCM(Firebase Cloud Messaging)과 같은 푸시 서비스를 사용하거나 웹 푸시 프로토콜을 직접 사용하여 푸시 알림을 보낼 수 있습니다.

Here’s an example of sending a push notification with a Node.js script: 다음은 Node.js 스크립트를 사용하여 푸시 알림을 보내는 예입니다.

const webpush = require('web-push');

// VAPID keys should be generated only once
const vapidKeys = {
  publicKey: 'YOUR_VAPID_PUBLIC_KEY',
  privateKey: 'YOUR_VAPID_PRIVATE_KEY'
};

webpush.setVapidDetails(
  'mailto:your-email@example.com',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

// Assuming you have stored the subscription object in your database
const pushSubscription = /* Retrieve subscription from database */;

const payload = JSON.stringify({
  title: 'New Notification!',
  body: 'This is a push notification.',
  icon: '/icon.png'
});

webpush.sendNotification(pushSubscription, payload)
  .then(response => console.log('Notification sent successfully', response))
  .catch(error => console.error('Error sending notification', error));

 

Summary 요약

This guide walks you through the steps to create a push notification subscription feature in a web application. The main steps include setting up a Service Worker to handle notifications, registering the Service Worker in your application, and creating a function to subscribe users to push notifications. Additionally, you’ll need a backend endpoint to store subscriptions and a method for sending push notifications. This setup enables you to keep users engaged with timely and relevant notifications even when they are not actively using your application.

 

이 가이드는 웹 애플리케이션에서 푸시 알림 구독 기능을 생성하는 단계를 안내합니다. 주요 단계에는 알림을 처리하기 위한 서비스 워커 설정, 애플리케이션에 서비스 워커 등록, 사용자가 푸시 알림을 구독하도록 하는 기능 생성이 포함됩니다. 또한 구독을 저장하기 위한 백엔드 엔드포인트와 푸시 알림을 보내는 방법이 필요합니다. 이 설정을 사용하면 사용자가 애플리케이션을 적극적으로 사용하지 않을 때에도 시기적절하고 관련성이 높은 알림을 통해 사용자의 참여를 유지할 수 있습니다.