javascript FCM SDK11 initializeApp, getToken, getMessage Config bundle Job

javascript FCM SDK11 initializeApp, getToken, getMessage을 운영황경에서 사용하기 위한 bundle 작업 정리.

 

1. 프로젝트 설정
먼저, Webpack을 설치하고 기본 프로젝트 구조를 설정합니다.

mkdir firebase-sdk
cd firebase-sdk
npm init -y
npm install --save-dev webpack webpack-cli
npm install firebase

2. Webpack 설정 파일 수정
webpack.config.js 파일을 생성하고 다음과 같이 설정합니다. 이 파일에서는 Firebase 관련 모듈만 포함하도록 설정합니다.

const path = require('path');

module.exports = {
    entry: './src/firebase.js', // Firebase 관련 JavaScript 파일
    output: {
        filename: 'firebase-bundle-api.js',
        path: path.resolve(__dirname, 'dist'), // 출력 디렉토리
        clean: true, // 이전 빌드 파일 삭제
    },
    mode: 'development', // 모드 설정
};

 

bundling 된 파일을 springboot의 static폴더로 잡아줄 경우 예시:

const path = require('path');

module.exports = {
    mode: 'production', // development or production
    entry: './src/firebase-sdk.js', // Firebase 관련 JavaScript 파일
    output: {
        filename: 'firebase-bundle.js',
        //windows에서의 경로: C:\sts4-expro\spring-boot-test2\src\main\resources\static\dist
        path: path.resolve(__dirname, '/sts4-expro/spring-boot-test2/src/main/resources/static/dist'), // 출력 디렉토리
        clean: true, // 이전 빌드 파일 삭제
    },
    mode: 'development', // 모드 설정
};

 

3. 소스 파일 생성
src 디렉터리를 만들고 firebase.js 파일을 생성합니다.

mkdir src
touch src/firebase.js

src/firebase.js 파일에 Firebase 초기화 및 메시징 코드 추가:

import { initializeApp } from 'firebase/app';
import { getMessaging, getToken } from 'firebase/messaging';

// Firebase 설정을 서버에서 가져옵니다.
fetch('/firebase-config.json', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    }
})
.then(response => response.json())
.then(firebaseConfig => {
    const app = initializeApp(firebaseConfig);
    const messaging = getMessaging(app);

    // 서비스워커 등록
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/firebase-messaging-sw.js', { type: 'module' })
            .then(function (reg) {
                console.log('서비스워커 등록 성공 :', reg);
                
                return getToken(messaging, { vapidKey: '' }); // VAPID 키 추가 필요
            })
            .then((currentToken) => {
                if (currentToken) {
                    console.log('FCM 토큰:', currentToken);
                    document.getElementById("fcmToken").value = currentToken;

                    return fetch('/sendFcmToken.json', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: new URLSearchParams({
                            'fcmToken': currentToken
                        })
                    });
                } else {
                    console.log('FCM 토큰을 생성할 수 없습니다.');
                }
            })
            .then(response => {
                if (response.ok) {
                    console.log('FCM 토큰이 성공적으로 서버에 전송되었습니다.');
                } else {
                    console.error('FCM 토큰 전송 실패:', response.status);
                }
            })
            .catch(function (error) {
                console.log('서비스워커 등록 또는 FCM 토큰 생성 중 오류 발생:', error);
            });
    }

    // 알림 권한 요청
    Notification.requestPermission().then((permission) => {
        if (permission === 'granted') {
            console.log('사용자가 알림을 허용했습니다.');
        } else {
            alert('브라우저 설정에서 알림을 허용해 주세요.');
        }
    }).catch((error) => {
        console.error('알림 권한 요청 중 오류 발생:', error);
    });
})
.catch(error => console.error('Firebase 설정을 가져오는 중 오류 발생:', error));

4. 빌드 스크립트 추가
package.json 파일에 빌드 스크립트를 추가합니다:

"scripts": {
    "build": "webpack"
}

5. 빌드 실행
다음 명령어를 실행하여 번들 파일을 생성합니다:

npm run build

이 명령을 실행하면 dist 디렉터리에 firebase-bundle.js 파일이 생성됩니다.

반응형

728x90

SMALL

# 빌드 완료 후 프로젝트 구조.

 

 

6. HTML(JSP) 파일 수정
이제 SpringBoot 프로젝트에 번든링된 파일을 배치 시키고 HTML(JSP) 파일을 수정하여 번들된 JavaScript 파일을 사용하도록 합니다. index.html(mainDashBoardV11.jsp) 파일을 다음과 같이 작성합니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="/manifest.json"> <!-- PWA 설치용 manifest -->
    <title>Spring Boot PWA</title>
    <script src="dist/firebase-bundle-api.js" type="module"></script>
</head>
<body>
    <h1>Welcome to My Spring Boot PWA</h1>
    <div>
        fcm-token:
    </div>
    <textarea style="width: 257px; height: 121px;" id="fcmToken" readonly></textarea>
</body>
</html>

 

7. 웹 서버 실행
생성된 firebase-bundle-api.js를 Spring Boot 애플리케이션에 통합해야 합니다. src/main/resources/static 디렉터리에 dist 폴더를 복사하거나 빌드 아티팩트를 자동으로 배치하도록 설정합니다.

Spring Boot 애플리케이션을 실행하고 브라우저에서 http://localhost:8080 또는 http://localhost:8080/dashBoard에 접속하면 Firebase 기능이 포함된 PWA가 정상적으로 동작하는 것을 확인할 수 있습니다.

이 과정을 통해 Firebase 관련 코드만 모듈 번들러를 사용하여 번들링 할 수 있습니다. 필요에 따라 코드를 수정하고 추가할 수 있습니다.