사이트가 PWA를 가능하게 하려면
PWA가 가능하려면 사이트에 두 가지 파일이 필요합니다.
1. manifest.json
2. service-worker.js
manifest 연결
그리고 HTML에 manifest를 연결해야 합니다.
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0d6efd">
1. manifest.json 예
static/manifest.json
{
"name": "시마당",
"short_name": "시마당",
"start_url": "/poem/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0d6efd",
"icons": [
{
"src": "/static/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/static/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
2. service-worker.js 예
static/service-worker.js
self.addEventListener("install", function(event) {
console.log("Service Worker installed");
});
self.addEventListener("fetch", function(event) {
event.respondWith(fetch(event.request));
});
3. base.html에 추가
templates/base.html의 <head> 안에 넣습니다.
<link rel="manifest" href="/static/manifest.json">
<meta name="theme-color" content="#0d6efd">
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/static/service-worker.js");
}
</script>
4. 중요한 조건
PWA 설치 버튼이 나오려면 보통 다음 조건이 필요합니다.
HTTPS 접속
manifest.json 존재
192px, 512px 아이콘 존재
service worker 등록
display: "standalone" 설정
운영 웹사이트도 위 조건을 갖추면 “바로가기 만들기”가 아니라 “앱 설치” 형태로 바뀔 수 있습니다.
'HTML' 카테고리의 다른 글
| HTML과 CSS (0) | 2025.11.29 |
|---|---|
| HTTP 프로토콜 (0) | 2025.11.27 |
| Wix 사용법: 왕초보를 위한 구체적인 단계별 가이드 (1) | 2025.10.20 |
| 코드 편집기 VSCode 설치하기 (0) | 2022.12.05 |
| 코딩에 에디터가 필요할까 (0) | 2022.12.04 |