PWA (Progressive Web App) 웹 앱 간단한 예제
PWA란 프로그레시브 웹 앱(Progressive Web Apps)의 줄임말로,
모바일 기기에서 네이티브 앱(Native App)과 같은 사용자 경험을 제공하는 웹 앱입니다.
이는 기존의 전통적인 웹 앱과는 달리 네이티브 앱과 유사한 기능을 제공할 수 있다는 것이 가장 큰 특징입니다.
PWA를 사용하면 사용자가 앱을 다운로드하거나,
업데이트할 필요 없이 웹 브라우저를 통해 앱을 바로 사용할 수 있습니다.
1. manifest.json — 앱 정보
[code]
{
"name": "스마트웹",
"short_name": "스마트웹",
"description": "K-Music & Live TV",
"start_url": "index.php",
"display": "standalone",
"background_color": "#09090b",
"theme_color": "#09090b",
"orientation": "portrait",
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
[/code]
설명:
"name": // 앱 전체 이름 (설치 후 표시되는 공식 이름)
"short_name": // 홈화면 아이콘 아래 표시되는 짧은 이름
"description": // 앱 설명 (스토어 개념의 설명, 일부 플랫폼에서 표시)
"start_url": // 앱 실행 시 시작되는 URL
"display": // 브라우저 UI 없이 앱처럼 실행
// browser = 일반 브라우저
// standalone = 앱 모드
// fullscreen = 전체화면
"background_color": // 앱 실행 초기 스플래시 배경색
"theme_color": // 브라우저 상단 UI 색상 (주소창 / 상태바 색)
"orientation": // 화면 방향 고정
// portrait = 세로
// landscape = 가로
2. sw.js — 서비스워커 (오프라인 캐시)
크롬 "설치" 배너를 띄우려면 sw.js가 필수입니다. 크롬 PWA 설치 조건:
✅ HTTPS
✅ manifest.json (name, start_url, icons 192px+512px)
✅ 서비스워커 등록 ← 이게 없으면 배너 안 뜸
최소한의 sw.js (기능 없이 등록만)
// sw.js — 설치 배너용 최소 버전
[code]
self.addEventListener('fetch', function(){});
[/code]
이 한 줄짜리로도 크롬 설치 조건은 충족됩니다.
3. 그누보드5 head.sub.php <head> 에 추가 (생성한 manifest.json 과 sw.js 경로확인)
[code]
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="스마트웹">
<script>
if('serviceWorker' in navigator)
navigator.serviceWorker.register('sw.js');
</script>
[/code]
접속 후 크롬 주소창 오른쪽에 설치 아이콘이 뜹니다.
테스트 미리보기
모바일 기기에서 네이티브 앱(Native App)과 같은 사용자 경험을 제공하는 웹 앱입니다.
이는 기존의 전통적인 웹 앱과는 달리 네이티브 앱과 유사한 기능을 제공할 수 있다는 것이 가장 큰 특징입니다.
PWA를 사용하면 사용자가 앱을 다운로드하거나,
업데이트할 필요 없이 웹 브라우저를 통해 앱을 바로 사용할 수 있습니다.
1. manifest.json — 앱 정보
[code]
{
"name": "스마트웹",
"short_name": "스마트웹",
"description": "K-Music & Live TV",
"start_url": "index.php",
"display": "standalone",
"background_color": "#09090b",
"theme_color": "#09090b",
"orientation": "portrait",
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
[/code]
설명:
"name": // 앱 전체 이름 (설치 후 표시되는 공식 이름)
"short_name": // 홈화면 아이콘 아래 표시되는 짧은 이름
"description": // 앱 설명 (스토어 개념의 설명, 일부 플랫폼에서 표시)
"start_url": // 앱 실행 시 시작되는 URL
"display": // 브라우저 UI 없이 앱처럼 실행
// browser = 일반 브라우저
// standalone = 앱 모드
// fullscreen = 전체화면
"background_color": // 앱 실행 초기 스플래시 배경색
"theme_color": // 브라우저 상단 UI 색상 (주소창 / 상태바 색)
"orientation": // 화면 방향 고정
// portrait = 세로
// landscape = 가로
2. sw.js — 서비스워커 (오프라인 캐시)
크롬 "설치" 배너를 띄우려면 sw.js가 필수입니다. 크롬 PWA 설치 조건:
✅ HTTPS
✅ manifest.json (name, start_url, icons 192px+512px)
✅ 서비스워커 등록 ← 이게 없으면 배너 안 뜸
최소한의 sw.js (기능 없이 등록만)
// sw.js — 설치 배너용 최소 버전
[code]
self.addEventListener('fetch', function(){});
[/code]
이 한 줄짜리로도 크롬 설치 조건은 충족됩니다.
3. 그누보드5 head.sub.php <head> 에 추가 (생성한 manifest.json 과 sw.js 경로확인)
[code]
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="스마트웹">
<script>
if('serviceWorker' in navigator)
navigator.serviceWorker.register('sw.js');
</script>
[/code]
접속 후 크롬 주소창 오른쪽에 설치 아이콘이 뜹니다.
테스트 미리보기
총 6명이 반응했습니다
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 2개