💻 PWA 푸시 알림 구현하기

자, 이제 본격적으로 코드를 작성해볼 시간이에요! 차근차근 따라오시면 여러분도 PWA 푸시 알림 마스터가 될 수 있어요. 화이팅! 💪

1. 서비스 워커 등록하기

PWA의 심장이라고 할 수 있는 서비스 워커부터 등록해볼게요. 먼저 프로젝트 루트에 service-worker.js 파일을 만들고, 메인 JavaScript 파일에서 다음과 같이 등록해주세요:

// app.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('서비스 워커 등록 성공:', registration.scope);
      })
      .catch(error => {
        console.error('서비스 워커 등록 실패:', error);
      });
  });
}

이 코드는 브라우저가 서비스 워커를 지원하는지 확인하고, 지원한다면 service-worker.js 파일을 서비스 워커로 등록해요. 완전 기본 중의 기본이죠! ㅋㅋ

2. 푸시 알림 권한 요청하기

사용자에게 푸시 알림 권한을 요청하는 코드를 작성해볼게요. 보통은 사용자가 특정 버튼을 클릭했을 때 권한을 요청하는 게 좋아요. 갑자기 권한 팝업이 뜨면 사용자가 깜짝 놀라서 거부할 확률이 높거든요! 😱

// app.js
const requestNotificationPermission = async () => {
  try {
    const permission = await Notification.requestPermission();
    
    if (permission === 'granted') {
      console.log('알림 권한이 허용되었습니다!');
      // 여기서 푸시 구독 로직으로 넘어갑니다
      subscribeToPushNotifications();
    } else {
      console.log('알림 권한이 거부되었습니다.');
    }
  } catch (error) {
    console.error('알림 권한 요청 중 오류 발생:', error);
  }
};

// 버튼 클릭 이벤트에 연결
document.getElementById('enable-notifications').addEventListener('click', requestNotificationPermission);

사용자 경험(UX)을 위해서는 권한 요청 전에 왜 알림이 필요한지 설명하는 게 좋아요. "새 프로젝트 소식을 가장 빠르게 받아보세요!" 같은 문구로 가치를 전달하면 허용률이 훨씬 높아진답니다! 👌

3. 푸시 서비스 구독하기

이제 사용자가 권한을 허용했다면, 브라우저의 푸시 서비스에 구독을 신청해야 해요. 이 과정에서 VAPID 키가 필요한데, 이건 서버와 푸시 서비스 간의 인증을 위한 키예요.

// app.js
const subscribeToPushNotifications = async () => {
  try {
    const registration = await navigator.serviceWorker.ready;
    
    // VAPID 공개 키 (실제로는 서버에서 가져와야 합니다)
    const publicVapidKey = 'BLVy_xX-your-public-key-here-_xX_yzA';
    
    // 푸시 서비스 구독
    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,  // 항상 사용자에게 알림을 표시
      applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
    });
    
    console.log('푸시 서비스 구독 성공:', subscription);
    
    // 서버에 구독 정보 전송
    await saveSubscription(subscription);
    
  } catch (error) {
    console.error('푸시 서비스 구독 실패:', error);
  }
};

// Base64 문자열을 Uint8Array로 변환하는 유틸리티 함수
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;
}

여기서 userVisibleOnly: true는 모든 푸시 알림이 사용자에게 표시되어야 함을 의미해요. 숨겨진 푸시는 허용하지 않는다는 거죠! 투명한 관계가 중요하잖아요~ ㅋㅋㅋ

4. 구독 정보를 서버에 저장하기

이제 구독 정보를 서버에 저장해야 해요. 이 정보는 나중에 서버에서 푸시 알림을 보낼 때 사용돼요.

// app.js
const saveSubscription = async (subscription) => {
  const response = await fetch('/api/save-subscription', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(subscription),
  });
  
  if (!response.ok) {
    throw new Error('구독 정보 저장 실패');
  }
  
  return response.json();
};

이 코드는 구독 정보를 JSON 형태로 서버에 전송해요. 서버에서는 이 정보를 데이터베이스에 저장해두고, 필요할 때 푸시 알림을 보내는 데 사용하게 되죠.

5. 서비스 워커에서 푸시 이벤트 처리하기

이제 service-worker.js 파일에서 푸시 이벤트를 처리하는 코드를 작성해볼게요. 서버에서 보낸 푸시 메시지를 받아서 사용자에게 알림을 표시하는 역할을 해요.

// service-worker.js
self.addEventListener('push', event => {
  try {
    const data = event.data.json();
    
    const options = {
      body: data.body,
      icon: data.icon || '/images/notification-icon.png',
      badge: data.badge || '/images/badge-icon.png',
      data: data.data || {},
      actions: data.actions || [],
      vibrate: [100, 50, 100],
      requireInteraction: data.requireInteraction || false
    };
    
    event.waitUntil(
      self.registration.showNotification(data.title, options)
    );
  } catch (error) {
    console.error('푸시 이벤트 처리 중 오류 발생:', error);
  }
});

여기서 event.waitUntil()은 푸시 이벤트 처리가 완료될 때까지 서비스 워커가 종료되지 않도록 해주는 중요한 메서드예요. 이걸 빼먹으면 알림이 제대로 표시되지 않을 수 있으니 주의하세요!

6. 알림 클릭 이벤트 처리하기

사용자가 알림을 클릭했을 때의 동작도 정의해줘야 해요. 보통은 관련 페이지로 이동하거나 특정 액션을 수행하도록 구현해요.

// service-worker.js
self.addEventListener('notificationclick', event => {
  const notification = event.notification;
  notification.close(); // 알림 닫기
  
  // 알림 데이터에서 URL 가져오기
  const url = notification.data.url || '/';
  
  // 알림 클릭 시 해당 URL로 이동
  event.waitUntil(
    clients.matchAll({ type: 'window' }).then(windowClients => {
      // 이미 열린 탭이 있는지 확인
      for (let client of windowClients) {
        if (client.url === url && 'focus' in client) {
          return client.focus();
        }
      }
      
      // 열린 탭이 없으면 새 탭 열기
      if (clients.openWindow) {
        return clients.openWindow(url);
      }
    })
  );
});

이 코드는 사용자가 알림을 클릭하면 관련 URL로 이동하도록 해요. 이미 해당 페이지가 열려있다면 그 탭으로 포커스를 이동하고, 아니라면 새 탭을 여는 똑똑한 코드예요! 😎

7. 서버에서 푸시 알림 보내기

이제 서버 측 코드를 작성해볼게요. 여기서는 Node.js와 web-push 라이브러리를 사용할 거예요. 다른 언어를 사용하더라도 비슷한 라이브러리가 있으니 걱정 마세요!

// server.js (Node.js 예시)
const webpush = require('web-push');
const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

// VAPID 키 설정 (실제로는 환경 변수로 관리하는 것이 좋습니다)
const vapidKeys = {
  publicKey: 'BLVy_xX-your-public-key-here-_xX_yzA',
  privateKey: 'private-key-should-be-kept-secret'
};

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

// 구독 정보 저장 API
app.post('/api/save-subscription', (req, res) => {
  const subscription = req.body;
  
  // 여기서 데이터베이스에 구독 정보를 저장합니다
  // 예: saveToDatabase(subscription);
  
  res.status(201).json({ message: '구독 정보가 저장되었습니다.' });
});

// 푸시 알림 전송 API
app.post('/api/send-notification', async (req, res) => {
  const { subscription, title, body, icon, data } = req.body;
  
  const payload = JSON.stringify({
    title,
    body,
    icon,
    data
  });
  
  try {
    await webpush.sendNotification(subscription, payload);
    res.status(200).json({ message: '알림이 성공적으로 전송되었습니다.' });
  } catch (error) {
    console.error('알림 전송 실패:', error);
    res.status(500).json({ message: '알림 전송 중 오류가 발생했습니다.' });
  }
});

app.listen(3000, () => {
  console.log('서버가 포트 3000에서 실행 중입니다.');
});

이 서버 코드는 두 가지 주요 API를 제공해요:

1. /api/save-subscription: 클라이언트의 구독 정보를 저장하는 API
2. /api/send-notification: 저장된 구독 정보를 사용해 푸시 알림을 보내는 API

실제 서비스에서는 구독 정보를 MongoDB, MySQL 같은 데이터베이스에 저장하고, 필요할 때 조회해서 사용하면 돼요. 재능넷 같은 플랫폼에서는 새 프로젝트가 등록되거나 메시지가 왔을 때 이 API를 호출해서 알림을 보낼 수 있겠죠? 👍