거의 모든 브라우저에서 제공하는 기능으로 웹앱을 설치할 수 있게 해 줍니다.
설정방법
모바일과 데스크톱의 설정 방법은 같으나 설치에서 조금 차이가 있는데요 먼저 설정방법을 보겠습니다.
설정방법은 간단한데요. 먼저, manifest file을 만듭니다 (root 폴더에 설치 권장). 이때, .webmanifest 또는 .json 연장자를 사용합니다.
example.webmanifest 또는 example.json
{
"background_color": "red", // 배경색이 들어가는 화면에서 제공됨
"description": "test",
"display": "fullscreen",
"icons": [ // 브라우저 아이콘
{
"src": "icon/fox-icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"name": "Awesome fox pictures",
"short_name": "Foxes", // 화면이 작아서 name이 안들어갈때 사용됨
"start_url": "/pwa-examples/a2hs/index.html" // 앱 구동시 사용될 메인페이지 (상대경로이어야 함)
}index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="manifest" href="test.webmanifest"> <!-- linking manifest file -->
</head>
<body>
<p>test</p>
</body>
</html>
데스크톱
데스크톱은 모바일처럼 설치가능한 UI를 제공하지 않기 때문에 따로 설치를 위한 UI를 (버튼 등) 제공해 주어야 합니다.
위와 같이 설치를 완료하면 해당 애플리케이션에 조금 더 쉽게 접근이 가능 해 집니다. 다만, 단순히 접근성을 향상하는 것이지 애플리케이션을 오프라인에서 구동가능하게 하는 등의 기능은 제공하지 않습니다.
마무리
이상으로 Add to home screen에 대해서 알아보았습니다.
참고
Add to Home screen - Progressive web apps (PWAs) | MDN
Add to Home screen (or A2HS for short) is a feature available in modern browsers that allows a user to "install" a web app, i.e. add a shortcut to their Home screen representing their favorite web app (or site) so they can subsequently access it with a sin
developer.mozilla.org
'웹 개발 알아두기 > 웹 디자인' 카테고리의 다른 글
| 스타일 라이브러리 - 테일윈드 (5) | 2023.05.25 |
|---|---|
| 색 (9) | 2023.02.04 |
| Web app manifests (0) | 2022.12.29 |
| 반응형 디자인 (responsive design) (0) | 2022.12.29 |
| User Experience (UX) (0) | 2022.12.23 |
