PWA 아키텍처 & 설치 흐름

Progressive Web App · 앱스토어 없이 홈화면에 추가

08
"어플 설치는 어른들에게 불편할 수 있다.
실벗은 PWA로 — 링크 한 번 누르면 끝."

왜 PWA인가? (vs 네이티브 앱)

구분PWA (실벗 채택)네이티브 앱
설치 방법✅ 링크 → "홈 화면에 추가" 1번스토어 검색 → 다운로드 → 설치
업데이트✅ 자동 (서비스워커)스토어 업데이트 필요
용량✅ 5MB 이하50~200MB
크로스 플랫폼✅ Android · iOS · PC 동일각각 따로 개발
알림 / 카메라 / 마이크✅ 지원지원
오프라인 지원✅ 서비스워커 캐시가능
시니어 친화도⭐⭐⭐⭐⭐⭐⭐

설치 흐름 (시니어용 안내)

📱 안드로이드

  1. 크롬에서 sb.kiam.kr 접속
  2. "홈 화면에 실벗 추가" 알림
  3. "추가" 누르기
  4. 홈에 실벗 아이콘 생성

🍎 iPhone

  1. 사파리에서 sb.kiam.kr 접속
  2. 하단 공유 버튼
  3. "홈 화면에 추가"
  4. 홈에 실벗 아이콘 생성

💻 PC (Windows/Mac)

  1. 크롬/엣지에서 접속
  2. 주소창 오른쪽 ⊕ 아이콘
  3. "실벗 설치" 클릭
  4. 독립 창으로 실행

manifest.json (실제 코드)

{
  "name": "실벗 - 시니어 라이프 플랫폼",
  "short_name": "실벗",
  "description": "AI와 사람이 함께 돌보는 시니어 플랫폼",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#FFF4E5",
  "theme_color": "#F47B3A",
  "lang": "ko",
  "icons": [
    { "src": "/assets/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
    { "src": "/assets/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ],
  "shortcuts": [
    { "name": "AI 말벗", "url": "/mind/chat.html" },
    { "name": "긴급 SOS", "url": "/safety/sos.html" },
    { "name": "가족에게", "url": "/family/index.html" }
  ]
}

Service Worker 캐시 전략

// service-worker.js — Cache First + Network Fallback
const CACHE = 'silbeot-v1';
const CORE = ['/','/css/app.css','/js/app.js','/offline.html'];

self.addEventListener('install', e => {
  e.waitUntil(caches.open(CACHE).then(c => c.addAll(CORE)));
});

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(r => r || fetch(e.request)
      .catch(() => caches.match('/offline.html')))
  );
});

// Push 알림 (약 알림, 가족 메시지, SOS)
self.addEventListener('push', e => {
  const d = e.data.json();
  self.registration.showNotification(d.title, {
    body: d.body, icon: '/assets/icon-192.png',
    vibrate: [200,100,200], requireInteraction: true
  });
});

활용 가능한 디바이스 권한