알림 마이크로 꾸러미 조각

Single-Spa Parcel 구성

🛠️ 기술 스택

💁 소개

웹 브라우저에서 사용자에게 알림 권한을 요청하고, 승인된 사용자에게 OneSignal을 활용하여 실시간 브라우저 푸시 알림을 제공하는 기능을 제공합니다.
OneSignal SDK를 웹 애플리케이션에 통합하고, Service Worker에 등록함으로써 백그라운드에서도 안정적으로 알림을 수신하고 처리할 수 있도록 구성되어 있습니다. 이를 통해 페이지가 열려 있지 않아도 사용자에게 알림을 빠르게 전달할 수 있습니다.
사용자 경험을 향상시키기 위해 권한 요청 흐름과 알림 수신/처리 로직은 사용자 친화적으로 설계되어 있으며, 브라우저 환경에서 안전하고 효율적인 푸시 알림 서비스를 제공합니다.

💡 주요 기능

• Single-SPA 기반으로 모듈화되어 빌드됨
• MFA-Root에 삽입되어 통합 운영됨
• OneSignal 웹 SDK를 애플리케이션에 통합
• 푸시 알림 수신을 위한 Service Worker 등록
• 브라우저에서 사용자에게 알림 수신 권한 요청
• 사용자 식별 및 푸시 알림 설정 처리
• 브라우저가 닫혀 있어도 백그라운드에서 알림 수신 가능

🎨 스크린샷

📊 시퀀스 다이어그램

sequenceDiagram
    actor User
    participant Web
    participant ServiceWorker
    participant Server
    participant OneSignal

    User->>Web: 웹 서비스 접속
    Web->>OneSignal: OneSignal SDK 로드
    note over Web: OneSignal SDK는 웹에 알림 기능을 통합할 수 있게 해줍니다.

    Web->>User: 알림 권한 요청
    User-->>Web: 권한 승인 여부

    alt 권한 승인

        Web->>ServiceWorker: 서비스워크 등록
        note over ServiceWorker: Service Worker는 백그라운드에서 알림 수신을 담당합니다.

        Web->>OneSignal: 사용자 등록

        loop 푸쉬 알림 수신 과정
            Web->>Server: 알림 설정 등록
            Server->>OneSignal: 푸쉬 알림 요청
            OneSignal->>ServiceWorker: 푸쉬 알림 전송
            ServiceWorker->>User: 사용자 알림
        end
    end

Loading

📂 폴더 구조

PickMe-Reminder-Parcel
├─ .github
│  └─ workflows # 깃헙 액션 워크플로어 프로세스
│     ├─ deploy-aws-s3.yml # AWS S3로 페이지로 배포
│     ├─ deploy-gh-pages.yml # 깃헙 페이지로 배포
│     └─ vite-build.yml # Vite로 빌드
├─ index.html # 진입점
├─ src
│  ├─ api
│  │  └─ getUser.js # 사용자 Parcel 사용
│  ├─ app
│  │  ├─ index.js
│  │  └─ parcel.js # Single-SPA 라이프사이클 구성
│  ├─ services
│  │  └─ configureOneSignal.js # OneSignal 설정
│  └─ serviceWorkers # 서비스워커
│     └─ OneSignalSDKWorker.js # 임포트파일
├─ vite.config.js # Vite 설정 파일
└─ vite.single-spa.config. # Single-SPA용 Vite 설정 파일

🚀 실행 방법

개발 서버 실행

$ npm install
$ npm run dev

Single-SPA 주입 애플리케이션 빌드

$ npm install
$ npm run build:single-spa