스마트폰에서 웹페이지 자체를 앱처럼 만들려는 시도는 계속 이어져왔다..
나도.. 자바나 코틀린으로 안드로이드 스튜디오에서 웹뷰만 가지고 처리하도록
하는 앱으로 실행해서 특정웹페이지 URL을 지정해서 apk로 빌드하곤했다.
하나의 중앙집중식 웹서버라면 문제가 없지만 분산형 웹서버인경우 배포문제가 발생함
또한 처리과정에서 카메라,센서,전화,이메일로 전환하는 것들이 부가적으로 필요하다.
이런부분이 많이 번거롭고 또한 안드로이드 정책변화에 따라서 apk 파일설치가
제한될 수 도 있다. 그래서 그냥 브라우저 자체가 이러한 기능을 해주면 좋겠다는 생각을
했다.. 그런데.. 그걸 삼성인터넷 브라우저가 먼저 이거 해줬다..
매니페스트(아이콘과 앱이름)정보와 부가파일만 있으면 처리되고 실행시 스플레쉬 이미지를
띄워주고 지정된 URL로 바로 진입하고.. 센서나 카메라에 접근 가능 하도록 하게되는 것이다.
pwa도 아니고 pwa의 보안요건을 충족하는것도 아니므로 https의 보안과는
관계없는 기술이다 라고 생각하고 또 그냥 http에서도 동작한다.
그런데 알림기술만 제외하면 pwa에 준하는 형태로 보여진다.
삼성인터넷을 이용해서 설치과 되어서 실행되는 방법이 있고 그냥 홈화면 바로가기가
그렇게 되는 경우가 있다. 이게 브라우저 버전에 따라 다른것 같은데
두개의 차이는 표면상으로는 설치는 런처아이콘에 삼성인터넷 뱃지가 없고 바로가기는 있다.
앱형태 이므로 URL주소창과 도구모음 메뉴가 없고 삼성인터넷이 띄우지면서 탭에
추가되는 형태가 아니고 개별 실행되고 OS의 앱전환 명령에도 별로의 프로그램으로
띄워진다. 구현을 위해 일단 서버는 아래와 같이 준비만 하고 있으면 된다.
[준비물]
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 스위처에서 별도의 어플처럼 띄워짐
웹앱 공수 안들이고 빠르게 만드는 방법임.. (땡큐 삼성~)
