1. 순서
manifest 작성 → 웹 페이지 작성
2. manifest
정적 리소스 위치에 manifest.json 파일을 작성한다. 아래의 항목중 name, start_url, display, icons 는 홈화면에 추가를(A2HS: add to home screen) 위한 필수 항목이다.
{
"name": "Hello! PWA by JS",
"short_name": "PWA by JS",
"description": "PWA start program",
"scope": ".",
"start_url": "/login",
"display": "fullscreen",
"orientation": "portrait",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{
"src": "images/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}name: 바로가기 아이콘 설치를 권장하는 팝업 배너와 스플래시 스크린에 표시되는 제목
short_name: 바탕화면 바로가기 아이콘 아래 표시되는 제목
description: 애플리케이션의 간단한 자기소개 문장. 웹 크롤러가 수집하는 정보
scope: 매니페스트에 정의된 내용이 적용될 수 있는 파일들의 범위를 지정. "./"는 현재 위치를 기준으로 시작하는 하위 디렉토리를 의미
start_url: 프로그램을 실행하면 시작될 URL
display: PWA 를 실행하면 나타나는 화면의 형태. browser 가 아닌 값을 선택하면 앱으로, browser를 선택하면 웹으로 인식
| 옵션 | 의미 |
|---|---|
| fullscreen | 기기의 최대 화면으로 보여 준다. 만약 기기의 운영체제가 fullscreen을 지원하지 않으면 standalone으로 자동 설정된다. |
| standalone | 웹 브라우저의 주소, 상태 표시줄 등을 모두 제거한 화면을 보여 준다. 즉, 웹브라우저처럼 보이지 않도록 실행할 수 있다. 일반적으로 가장 많이 사용한다. |
| minimal-ui | 상단에 주소 표시줄만 추가한다. 만약 기기의 운영체제가 minimal-ui를 지원하지 않으면 standalone으로 자동 설정된다. |
| browser | 웹 브라우저와 똑같은 모습으로 실행된다. |
orientation: 화면의 방향을 결정
| 옵션 | 의미 |
|---|---|
| portrait | 초상화처럼 세로로 실행 |
| landscape | 풍경화처럼 가로로 실행 |
theme_color: 상태 표시줄의 색상
background_color: 스플래시 스크린의 배경색
icons: 스플래시 스크린에 사용할 아이콘 이미지 중에서 128dpi에 가장 가까운 이미지를 찾아 화면에 표시
3. 웹 페이지
index.html 에 작성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/ios-icon-512x512.png">
<link rel="icon" type="image/x-icon" href="/path/to/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>PWA</title>
</head>
<body>
<h1>Hello, PWA!</h1>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service_worker.js')
.then(() => {
console.log('서비스 워커가 등록됨!');
});
}
</script>
</body>
</html>
4. 개발 중 주의사항
코드를 수정한 후에는 기존에 등록된 서비스 워커를 삭제한 후 새로고침을 해야 수정 사항이 반영된다. 서비스 워커를 삭제하는 방법은 크롬 기준,
개발자 모드 → Application → storage → Clear site date
이다.
