feat: PWA, Push Notification 확인

[philosophy-engineer]

🔗 관련 이슈

• close: PWA 및 Push Notification 확인 #82

✅ 작업 내용

• Web Push Server 를 가볍게 만들기 위해 Express를 사용해서 만들었습니다.
  • apps 하위에 proto 라는 것을 위치시켜서 그냥 테스트하는 코드만 편하게 두고 사용하고자 했습니다.
  • 따라서 build 등의 설정을 따로 하지 않기 위해 js 로 코드를 작성했습니다.
  • push.js 는 사용자의 구독 정보를 Map에 저장하고 그 저장된 정보에 모두 발송하는 간단한 서버입니다.
• PushDebug 라는 컴포넌트를 만들어서 권한 및 구독을 하도록했습니다.
  • 코드가 많이 지져분한데, 주요한 함수는 requestPermission, subscribe 입니다.
  • 현재는 그 둘을 나누었지만 실제 구현할 때는 합칠 수 있을 거 같습니다.
  • 또 에러 처리와 에러 문구를 보여주기 위한 setState도 줄이면 가독성이 좋아질 것으로 생각됩니다.

📸 스크린샷 / 데모

안드로이드에서 푸시를 보냈을 때

안드로이드에서 PWA 로 설치한 웹을 통해 들어간 결과 주소창이 나타나지 않는 모습

IOS에서 PWA 로 설치한 웹을 통해 들어간 결과 주소창이 나타나지 않는 모습

IOS에서 PWA 로 설치되어서 하나의 앱처럼 표시되는 모습

docker를 명령어를 돌렸을 때 들어가야 하는 주소, 매번 달라짐

🧪 테스트 방법

1. pnpm run dev:push 실행
2. docker run --rm -it cloudflare/cloudflared:1800-17533b124c22 tunnel --url http://host.docker.internal:3001 명령어를 통해 https 가 적용된 주소로 접속
3. push 페이지로 이동해서 권한을 부여하고 구독함.
4. Postman 등을 통해 POST http://localhost/push/test 로 요청 보내면 웹브라우저에서 push notification이 받아짐
5. 노트북과 핸드폰에서 동일한 wi-fi 사용
6. 핸드폰의 웹브라우저를 통해 cloudflare에서 부여받은 https 가 적용된 주소로 접속
7. 바탕화면에 설치 하기를 통해 설치
8. 바탕화면에 설치된 아이콘을 통해 접속
9. 3과 4를 반복하면 웹브라우저와 핸드폰에 모두 push notification이 전달

💡 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (예: feature/login -> develop)
• 테스트는 잘 통과했나요?
• 빌드에 성공했나요?

💬 To Reviewers

• 제 아이폰의 IOS 버전이 15 인데, 16.4 이상의 버전에서만 PWA web push가 지원되서 테스트를 해보지 못했습니다.
  • 혹시 아이폰 사용자시면 테스트 한 번 해주시면 감사하겠습니다!!

[iyeeun]

푸시 알림 테스트 해봤는데 잘 됩니다! (iOS 26.1)
혹시 PWA가 아닌 환경에서는 푸시 알림이 아예 불가능한건가요?
수고하셨습니다!

[philosophy-engineer]

혹시 PWA가 아닌 환경에서는 푸시 알림이 아예 불가능한건가요?

대부분의 브라우저에서는 PWA(설치) 없이도 푸시 알림이 가능해서 일반적인 데스크탑이나 안드로이드 환경에서는 가능할 거 같습니다.

다만 iOS Safari는 '홈 화면에 추가된 웹앱'이라는 조건이 있어서 iOS에서 테스트를 하기 위해서는 사실상 PWA가 필요해지게 되어서 PWA 부분까지 최소한으로 설정을 했습니다.

vite.config.ts에서 mainifest 부분이 해당 부분입니다.

[philosophy-engineer]

@gemini-cli /review

[github-actions]

🤖 Hi @philosophy-engineer, I've received your request, and I'm working on it now! You can track my progress in the logs for more details.

[github-actions]

🤖 Hi @philosophy-engineer, I've received your request, and I'm working on it now! You can track my progress in the logs for more details.

[github-actions]

🤖 Hi @philosophy-engineer, I've received your request, and I'm working on it now! You can track my progress in the logs for more details.

[github-actions]

🤖 I'm sorry @philosophy-engineer, but I was unable to process your request. Please see the logs for more details.

[github-actions]

🤖 Hi @philosophy-engineer, I've received your request, and I'm working on it now! You can track my progress in the logs for more details.

[github-actions]

🤖 I'm sorry @philosophy-engineer, but I was unable to process your request. Please see the logs for more details.

[philosophy-engineer]

@gemini-cli /review

[github-actions]

🤖 Hi @philosophy-engineer, I've received your request, and I'm working on it now! You can track my progress in the logs for more details.

[philosophy-engineer]

테스트