Svelte

웹 푸시 구현 예제

패키지 설치

npm install @nativify/notifications firebase

Store 생성

1단계 notificationStore.js

// stores/notificationStore.js
import { writable } from 'svelte/store';
import { getNotificationService } from '@nativify/notifications';

// Writable Stores
export const notifications = writable([]);
export const token = writable(null);
export const permission = writable('default');

let service = null;

// Firebase 설정
function initFirebase() {
  window.firebaseConfig = {
    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
    appId: import.meta.env.VITE_FIREBASE_APP_ID,
    vapidKey: import.meta.env.VITE_FIREBASE_VAPID_KEY
  };
}

// 메시지 수신 처리
function handleMessage(message) {
  notifications.update(items => [{
    id: Date.now(),
    title: message.notification?.title || '알림',
    body: message.notification?.body || '',
    timestamp: new Date()
  }, ...items]);
}

// 서비스 초기화
export async function initializeNotifications() {
  try {
    initFirebase();
    service = getNotificationService();
    await service.initialize();
    
    // 메시지 리스너 등록
    service.onMessageReceived(handleMessage);
  } catch (error) {
    console.error('초기화 실패:', error);
  }
}

// 권한 요청
export async function requestPermission() {
  if (!service) return;
  
  try {
    const perm = await service.requestPermission();
    permission.set(perm);
    
    if (perm === 'granted') {
      const fcmToken = await service.getToken();
      token.set(fcmToken);
      console.log('FCM Token:', fcmToken);
      
      // 서버에 토큰 등록
      await service.registerUserToken(
        'delivery_app_001',
        'user123',
        'https://your-server.com/api/notifications'
      );
    }
  } catch (error) {
    console.error('권한 요청 실패:', error);
  }
}
            

컴포넌트 구현

2단계 App.svelte

<script>
  import { onMount } from 'svelte';
  import { 
    notifications, 
    token, 
    permission, 
    initializeNotifications, 
    requestPermission 
  } from './stores/notificationStore';
  
  // 컴포넌트 마운트 시 초기화
  onMount(async () => {
    await initializeNotifications();
  });
</script>

<div class="app">
  <h1>웹 푸시 알림 데모</h1>
  
  <!-- 권한 요청 버튼 -->
  {#if $permission !== 'granted'}
    <button on:click={requestPermission} class="btn-primary">
      알림 권한 요청
    </button>
  {/if}
  
  <!-- FCM 토큰 표시 -->
  {#if $token}
    <div class="token-display">
      <strong>FCM Token:</strong>
      <code>{$token}</code>
    </div>
  {/if}
  
  <!-- 알림 목록 -->
  <div class="notifications">
    <h2>받은 알림</h2>
    {#if $notifications.length === 0}
      <p class="empty">받은 알림이 없습니다.</p>
    {:else}
      {#each $notifications as notif (notif.id)}
        <div class="notification-item">
          <h3>{notif.title}</h3>
          <p>{notif.body}</p>
          <small>{notif.timestamp.toLocaleString()}</small>
        </div>
      {/each}
    {/if}
  </div>
</div>

<style>
  .notification-item {
    background: #f7fafc;
    border-left: 4px solid #ff3e00;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
  }
  
  .token-display {
    background: #ebf8ff;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
  }
  
  .btn-primary {
    background: #ff3e00;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .btn-primary:hover {
    background: #f1411c;
  }
</style>
            

환경 변수 설정

.env 파일 생성:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_FIREBASE_VAPID_KEY=your_vapid_key
            

실행 방법

Firebase 프로젝트 생성 및 VAPID 키 발급
.env 파일에 Firebase 설정 입력
static/firebase-messaging-sw.js 생성
npm install - 패키지 설치
npm run dev - 개발 서버 실행
"알림 권한 요청" 버튼 클릭

모든 프레임워크 예제를 확인했습니다!

← Angular 웹 푸시 가이드로 →