2026년 6월 28일 일요일

모바일 삼성인터넷 브라우저에서 웹앱만들기

[준비물]

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"
}
]
}


그 다음 sw.js 파일의 내용을 다음처럼 기재한다.

self.addEventListener("install", e=>{
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');
}
</script>


그 다음 static 폴더에 그림파일 2개와 위의 파일 2개를 복사하면 끝~



이렇게 하면 삼성 인터넷 브라우저를 통해서 홈화면 바로가기를 한다면..
그 바로가기는 핸드폰 어플처럼 동작한다.
주소창없고 task 스위처에서 별도의 어플처럼 띄워짐

웹앱 공수 안들이고  빠르게 만드는 방법임..

댓글 없음:

댓글 쓰기