PWA Features - kookmin-sw/capstone-2025-44 GitHub Wiki

πŸš€ Progressive Web App Features

νƒ€μž„νŽ˜μ΄λŠ” μ›Ή μ•±μ΄μ§€λ§Œ, λ„€μ΄ν‹°λΈŒ μ•±κ³Ό μœ μ‚¬ν•œ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•˜κΈ° μœ„ν•΄ λ‹€μ–‘ν•œ PWA κΈ°λŠ₯을 κ΅¬ν˜„ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

Relevant Source Files

1. μ‹œμŠ€ν…œ κ°œμš”

νƒ€μž„νŽ˜μ΄λŠ” λ‹€μŒκ³Ό 같은 PWA κΈ°λŠ₯을 톡해 λ„€μ΄ν‹°λΈŒ μ•±κ³Ό μœ μ‚¬ν•œ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•©λ‹ˆλ‹€:

  • μ›Ή μ•± λ§€λ‹ˆνŽ˜μŠ€νŠΈλ₯Ό ν†΅ν•œ μ•± μ„€μΉ˜ 지원
  • μ„œλΉ„μŠ€ μ›Œμ»€λ₯Ό ν†΅ν•œ μ˜€ν”„λΌμΈ 지원 및 캐싱
  • ν‘Έμ‹œ μ•Œλ¦Όμ„ ν†΅ν•œ μ‚¬μš©μž μž¬μ°Έμ—¬ μœ λ„
  • Android ν”Œλž«νΌκ³Όμ˜ 톡합을 μœ„ν•œ Digital Asset Links κ΅¬ν˜„

2. μ›Ή μ•± λ§€λ‹ˆνŽ˜μŠ€νŠΈ (Web App Manifest)

manifest.json νŒŒμΌμ€ μ•±μ˜ 메타데이터λ₯Ό μ •μ˜ν•˜μ—¬, μ‚¬μš©μžκ°€ ν™ˆ 화면에 앱을 μ„€μΉ˜ν•˜κ³  μ‹€ν–‰ν•  수 μžˆλ„λ‘ μ§€μ›ν•©λ‹ˆλ‹€.

μ£Όμš” 속성

속성 κ°’ μ„€λͺ…
short_name "νƒ€μž„νŽ˜μ΄" μ•± μ•„μ΄μ½˜ μ•„λž˜μ— ν‘œμ‹œλ  이름
name "νƒ€μž„νŽ˜μ΄" 전체 μ•± 이름
description "동넀 μ£Όλ―Όλ“€κ³Ό 도움을 μ£Όκ³  λ°›μ•„μš”" μ•±μ˜ κ°„λ‹¨ν•œ μ„€λͺ…
start_url "/" μ•± μ‹€ν–‰ μ‹œ μ‹œμž‘ν•  URL
display "standalone" λΈŒλΌμš°μ € UI 없이 전체 ν™”λ©΄ ν‘œμ‹œ
theme_color "#253659" μ•±μ˜ ν…Œλ§ˆ 색상
background_color "#ffffff" μ•± λ‘œλ”© μ‹œ λ°°κ²½ 색상
orientation "portrait-primary" κΈ°λ³Έ ν™”λ©΄ λ°©ν–₯
icons λ‹€μ–‘ν•œ 크기의 μ•„μ΄μ½˜ μ•± μ•„μ΄μ½˜μœΌλ‘œ μ‚¬μš©λ  이미지듀
screenshots μ—¬λŸ¬ 이미지 μ•± μŠ€ν† μ–΄μ— ν‘œμ‹œλ  μŠ€ν¬λ¦°μƒ·λ“€

λ˜ν•œ, Android의 μ μ‘ν˜• μ•„μ΄μ½˜μ„ μœ„ν•œ maskable μ•„μ΄μ½˜κ³Ό iOS 지원을 μœ„ν•œ νŠΉμ • μ•„μ΄μ½˜λ„ ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

Sources:

3. μ„œλΉ„μŠ€ μ›Œμ»€ κ΅¬ν˜„ (Service Worker Implementation)

μ„œλΉ„μŠ€ μ›Œμ»€λŠ” μ˜€ν”„λΌμΈ κΈ°λŠ₯, λ¦¬μ†ŒμŠ€ 캐싱, λ°±κ·ΈλΌμš΄λ“œ 처리λ₯Ό μ§€μ›ν•©λ‹ˆλ‹€. νƒ€μž„νŽ˜μ΄λŠ” Workbox 라이브러리λ₯Ό 기반으둜 ν•œ μ„œλΉ„μŠ€ μ›Œμ»€λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

μ„œλΉ„μŠ€ μ›Œμ»€ 생λͺ…μ£ΌκΈ°

  1. μ„€μΉ˜ κ³Όμ •: μ„€μΉ˜ μ‹œ μ˜€ν”„λΌμΈ λŒ€μ²΄ νŽ˜μ΄μ§€λ₯Ό μΊμ‹œμ— μ €μž₯ν•©λ‹ˆλ‹€.
  2. λ„€λΉ„κ²Œμ΄μ…˜ ν”„λ¦¬λ‘œλ“œ: 온라인 μƒνƒœμ—μ„œ 초기 νŽ˜μ΄μ§€ λ‘œλ”©μ„ λΉ λ₯΄κ²Œ ν•©λ‹ˆλ‹€.
  3. 페치 처리: λ„€λΉ„κ²Œμ΄μ…˜ μš”μ²­μ„ κ°€λ‘œμ±„κ³  μ˜€ν”„λΌμΈ λŒ€μ²΄ νŽ˜μ΄μ§€λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.
  4. μΊμ‹œ 관리: Workboxλ₯Ό μ‚¬μš©ν•˜μ—¬ 효율적인 μΊμ‹œ 관리λ₯Ό μˆ˜ν–‰ν•©λ‹ˆλ‹€.

Sources:

4. λͺ¨λ°”일 톡합 (Mobile Integration)

νƒ€μž„νŽ˜μ΄λŠ” Android ν”Œλž«νΌκ³Όμ˜ 톡합을 μœ„ν•΄ Digital Asset Links ν”„λ‘œν† μ½œμ„ κ΅¬ν˜„ν•˜μ—¬ Trusted Web Activity (TWA) κΈ°λŠ₯을 μ§€μ›ν•©λ‹ˆλ‹€.

Android μ•± 톡합

assetlinks.json νŒŒμΌμ€ μ›Ή μ•±κ³Ό Android νŒ¨ν‚€μ§€ κ°„μ˜ μ‹ λ’°ν•  수 μžˆλŠ” 연결을 μ„€μ •ν•©λ‹ˆλ‹€. 이λ₯Ό 톡해:

  1. λ”₯ 링크: Android μΈν…νŠΈλ₯Ό 톡해 PWAμ—μ„œ μ½˜ν…μΈ λ₯Ό 직접 μ—΄ 수 μžˆμŠ΅λ‹ˆλ‹€.
  2. TWA κ΅¬ν˜„: PWAλ₯Ό Google Play μŠ€ν† μ–΄ μ•±μœΌλ‘œ νŒ¨ν‚€μ§•ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  3. μ•± 인증: SHA256 μΈμ¦μ„œλ₯Ό μ‚¬μš©ν•˜μ—¬ 연결을 κ²€μ¦ν•©λ‹ˆλ‹€.

Sources:

5. ν‘Έμ‹œ μ•Œλ¦Ό (Push Notifications)

νƒ€μž„νŽ˜μ΄λŠ” Firebase Cloud Messaging (FCM)을 μ‚¬μš©ν•˜μ—¬ ν‘Έμ‹œ μ•Œλ¦Όμ„ κ΅¬ν˜„ν•©λ‹ˆλ‹€.

μ£Όμš” ꡬ성 μš”μ†Œ

  • FCM API 연동: fcm-api.tsxλ₯Ό 톡해 λ°±μ—”λ“œμ™€ ν†΅μ‹ ν•©λ‹ˆλ‹€.
  • FCM 토큰 관리: usePostFcmToken.ts ν›…κ³Ό fcm-token-state.ts 아톰을 μ‚¬μš©ν•˜μ—¬ 토큰을 κ΄€λ¦¬ν•©λ‹ˆλ‹€.
  • μ„œλΉ„μŠ€ μ›Œμ»€: firebase-messaging-sw.jsλ₯Ό 톡해 λ°±κ·ΈλΌμš΄λ“œμ—μ„œ μ•Œλ¦Όμ„ μ²˜λ¦¬ν•©λ‹ˆλ‹€.

Sources:

6. μš”μ•½

νƒ€μž„νŽ˜μ΄μ˜ PWA κ΅¬ν˜„μ€ λ‹€μŒκ³Ό 같은 κΈ°λŠ₯을 ν¬ν•¨ν•©λ‹ˆλ‹€:

  • πŸ“² μ•± μ„€μΉ˜ 지원: μ›Ή μ•± λ§€λ‹ˆνŽ˜μŠ€νŠΈλ₯Ό ν†΅ν•œ ν™ˆ ν™”λ©΄ μ„€μΉ˜
  • πŸ“Ά μ˜€ν”„λΌμΈ 지원: μ„œλΉ„μŠ€ μ›Œμ»€λ₯Ό ν†΅ν•œ μ˜€ν”„λΌμΈ κΈ°λŠ₯ 제곡
  • πŸ”” ν‘Έμ‹œ μ•Œλ¦Ό: FCM을 ν†΅ν•œ μ‹€μ‹œκ°„ μ•Œλ¦Ό μˆ˜μ‹ 
  • 🀝 λͺ¨λ°”일 톡합: Android ν”Œλž«νΌκ³Όμ˜ κΉŠμ€ 톡합을 μœ„ν•œ Digital Asset Links κ΅¬ν˜„

μ΄λŸ¬ν•œ κΈ°λŠ₯듀은 νƒ€μž„νŽ˜μ΄λ₯Ό λ„€μ΄ν‹°λΈŒ μ•±κ³Ό μœ μ‚¬ν•œ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•˜λŠ” κ°•λ ₯ν•œ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μœΌλ‘œ λ§Œλ“€μ–΄μ€λ‹ˆλ‹€.