1. manifest.webmanifest 파일
2. sw.js 파일
3. icon에 쓰일 192*192, 512*512 아이콘 이미지파일
[처리사항]
manifest.webmanifest 파일의 내용을 다음 처럼 기재한다.
{
"name": "마이어플",
"short_name": "마이어플",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/myicon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/myicon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
"name": "마이어플",
"short_name": "마이어플",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/myicon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/myicon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
그 다음 sw.js 파일의 내용을 다음처럼 기재한다.
self.addEventListener("install", e=>{
self.skipWaiting();
});
self.addEventListener("activate", e=>{
self.clients.claim();
});
self.skipWaiting();
});
self.addEventListener("activate", e=>{
self.clients.claim();
});
그 다음 특정 html페이지에서 (예: 로그인페이지)
메타링크 아래에..
<link rel="manifest" href="/manifest.webmanifest">
라고 기제하고
스크립트 테그에서
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
<link rel="manifest" href="/manifest.webmanifest">
라고 기제하고
스크립트 테그에서
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
</script>
그 다음 static 폴더에 그림파일 2개와 위의 파일 2개를 복사하면 끝~
이렇게 하면 삼성 인터넷 브라우저를 통해서 홈화면 바로가기를 한다면..
그 바로가기는 핸드폰 어플처럼 동작한다.
그 바로가기는 핸드폰 어플처럼 동작한다.
주소창없고 task 스위처에서 별도의 어플처럼 띄워짐
웹앱 공수 안들이고 빠르게 만드는 방법임..
댓글 없음:
댓글 쓰기