뉴히의 개발 로그
[TIL] 20230911 - 웹앱 매니페스트(Manifest) 설정 : PWA(Progressive Web Apps) 적용하기 본문
[TIL] 20230911 - 웹앱 매니페스트(Manifest) 설정 : PWA(Progressive Web Apps) 적용하기
뉴히 2023. 9. 12. 05:13PWA의 핵심은 매니페스트(Manifest)와 서비스워커(service-worker)입니다. 그중에서 매니페스트(Manifest)는 인스톨 배너와 앱 아이콘에 대한 설정을 담당
웹앱 매니페스트(Manifest)는 PWA(Progressive Web Apps)의 설치와 앱의 구성 정보를 담고 있는 json 설정파일입니다. 이 설정은 크게 아래와 같은 작업을 합니다.
- App Icon : 설치 시 앱의 아이콘 이미지와 크기 설정
- 스플래시((splash screen) 화면 : 로딩화면 설정
- Start URL : 웹앱이 실행될 때 가장 처음 보여질 URL 설정
- Display Type : 웹 앱의 화면 형태 (browser, standalone, fullscreen)
- Display Orientation : 웹앱의 화면 방향(가로모드, 세로모드)
설정방법
// index.html
<head>
<link rel="manifest" href="manifest.json">
</head>// manifest.json
{
"short_name": "프로젝트 이름(아이콘의 이름으로 표시됨)",
"name": "설치 배너에 표시되는 이름(검색의 키워드로 사용됨)",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "images/icon192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icon512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#000000",
"background_color": "#ffffff"
}short_name 지정
short_name은 필수 입력사항으로 short_name이 있어야 배너를 설치 할 수 있습니다. 이것은 프로젝트 이름으로 설치된 아이콘의 이름으로 표시 됩니다.
name 지정
name도 필수 입력사항으로 name이 있어야 배너를 설치 할 수 있습니다. 이것은 설치 배너에 표시되는 이름이며 검색의 키워드로 사용됩니다.
icons 지정
icons는 앱에서 필요한 다양한 크기의 아이콘을 지정합니다. 그중에서도 192px(128dp)는 꼭 있어야 하는 크기의 아이콘입니다. 이 아이콘이 있어야 스플래시 화면이 표시 됩니다.
Splash screen 설정
스플래시 스크린은 3가지의 설정 조합으로 구성됩니다. 배경색 + 아이콘 + short_name(아이콘 이름)이 설정되었다면 스플래시 화면이 나옵니다.
start_url 설정
start_url은 필수 요소로 웹 앱이 실행될때 가장 처음 나오는 화면을 지정합니다. 말하자면 스플래시 화면 다음에 나오는 화면입니다.
기본 설정은 아래와 같이 설정합니다.
"start_url": "./index.html"
Query string을 사용해 통계에 사용할 수도 있다
"start_url": "./index.html?qa=homescreen",display 설정
display의 설정은 웹앱이 어떤 모양으로 보여질지 설정하는 값입니다.
- browser(normal) : 해당 브라우저에서 기본 웹으로 실행
- standalone : 상단의 URL바를 제거하여 네이티브앱처럼 보임(가장 많이 사용함)
- fullscreen : 화면전체를 사용하여 native처럼 보임
- minimul-ui : fullscreen과 비슷하지만 뒤로가기, 새로고침등 최소한의 영역만 제공합니다.(모바일 크롬 전용)
iOS에서 standalone 사용 시 <head> 태그 안에 아래의 메타태그를 추가해야 합니다.
copy html<meta name="apple-mobile-web-app-capable" content="yes">theme_color 설정
테마 컬러는 브라우저 상단의 URL 입력바와 시스템 바까지 포함한 색상을 지정할 수 있습니다.
orientation 설정
orientation은 기기의 방항을 가로로 할지 세로로 할지 지정하는 값입니다. 게임이 아니라면 거의 세로모드를 사용하면 됩니다.
- portrait : 세로모드
- landscape : 가로모드
WA를 설치할 수 있는 이벤트와 구현 방법
웹앱의 가장 기대하는 기능 중 하나가 웹앱을 설치할 수 있다는 것일 것입니다. 웹앱을 설정하기 위해서는 아래와 같은 몇가지 조건이 갖추어져 있어야 합니다.
- 기존에 웹 앱이 설치되어 있지 않아야 합니다.
- 30초 이상 웹사이트를 탐색해야 합니다.
- start_url, short_name, name이 설정되어 있어야 합니다.
- 192px 크기 이상의 앱 아이콘이 설정되어 있어야 합니다.
- Service Worker의 fetch 이벤트가 구현되어 있어야 합니다.
- HTTPS로 보안 서비스 되어야 합니다.
원래는 자동으로 설치배너가 보이게 되어 있으나 설치버튼을 클릭하여 설치할 수 있게 할 수도 있습니다. 아래의 javascript코드를 작성하면 됩니다.
var deferredPrompt;
window.addEventListener('beforeinstallprompt', function(e) {
console.log('beforeinstallprompt Event fired');
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
return false;
});
// 특정 버튼 클릭 시 설치 시작
btnSave.addEventListener('click', function() {
if(deferredPrompt !== undefined) {
// The user has had a postive interaction with our app and Chrome
// has tried to prompt previously, so let's show the prompt.
deferredPrompt.prompt();
// Follow what the user has done with the prompt.
deferredPrompt.userChoice.then(function(choiceResult) {
console.log(choiceResult.outcome);
if(choiceResult.outcome == 'dismissed') {
console.log('User cancelled home screen install');
}
else {
console.log('User added to home screen');
}
// We no longer need the prompt. Clear it up.
deferredPrompt = null;
});
}
});
https://blog.woolta.com/categories/3/posts/150
'개발일지 > TIL' 카테고리의 다른 글
| [TIL] Async/Await와 Promise의 차이 (0) | 2023.09.20 |
|---|---|
| [TIL] http, https 차이점 (0) | 2023.09.19 |
| [TIL] 20230905 - portal 공용모달 사용시 다른 페이지로 routing 안됨현상해결 (0) | 2023.09.06 |
| [TIL] 20230904 - TCP/UDP 프로토콜 (0) | 2023.09.05 |
| [TIL] 20230901 - 쿠키, 세션, 웹스토리지의 차이 (0) | 2023.09.02 |
