A2HS? 란 무엇인가요?

• A2HS는 ‘Add To Home Screen’ 즉 ‘홈 화면에 추가’ 라는 모던 브라우저에서 제공하는 기능으로서,

  사용자가 웹을 설치하는 기능을 말합니다!

• 사용자는 홈화면에 추가된 웹으로 바로가기 를 클릭하여 바로 해당 웹으로 이동할수 있습니다!

A2HS 적용 조건

• HTTPS 적용
• manifest 파일 설정
• serviceworker 적용

A2HS 적용

*NextJs 기준 입니다!

HTTPS 적용

HTTPS는 웹 호스팅 사이트나, AWS 등 에서 설정할수 있습니다.

manifest 파일 적용

manifest는 홈화면에 바로가기 에 추가될 웹 앱의 모양(색, 아이콘 등), 이름 등등의 설정을 할수 있는 파일입니다.

public 폴더에 manifest.json 파일을 생성하여 작성하면 됩니다.

{
    "name": "Snack", // 홈화면에 추가된 앱 이름
    "display": "standalone", // 앱 이 보여질 화면 다양한 옵션 존재
    "start_url": "/", // 앱 실행시 첫 경로
    "description": "Snack - 스낵에서 다양한 활동을 통해 포인트를 획득해보세요!", // 앱 설명
    "background_color": "#fff", // 앱화면, 스플래시 화면 색
    "short_name": "스낵", // 이름을 표기할 공간이 부족할때 쓰여질 이름
    "theme_color": "#4D1DC4", // 앱의 테마 컬러
    "icons": [
        {
            "src": "/images/SnackLogo/SnackLogo-152x152.png",
            "sizes": "152x152",
            "type": "image/png"
        },
        {
            "src": "/images/SnackLogo/SnackLogo-196x196.png",
            "sizes": "196x196",
            "type": "image/png",
            "purpose": "maskable"
        },
        {
            "src": "/images/SnackLogo/SnackLogo-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ] // 앱 아이콘 스플래시 이미지 등 으로 사용
}