사이트를 모바일 웹앱으로 실행되도록 하는 방법 (feat.apple-meta-tag)

사이트를 모바일 웹앱으로 실행되도록 하는 방법

1. html의 header에 다음과 같이 넣어주면 됩니다

    <meta name="apple-mobile-web-app-title" content="VoTogether" />
	// 홈 화면에 추가했을 때 보여질 앱의 이름

    <meta name="apple-mobile-web-app-capable" content="yes" />
	// 모바일에서 전체화면으로 보이게 할 지 여부

    <meta name="apple-mobile-web-app-status-bar-style" content="#BE0000" />
	// 상태 표시줄 배경 색상 설정

2. 아이콘 설정을 해줍니다

아래의 사이트에서 아이콘을 넣고 설정해줍니다. 필요한 대부분의 아이콘 파일과 link, meta 코드를 알려주어 편합니다

https://www.favicon-generator.org/

보투게더의 코드

    <link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="icons/android-icon-192x192.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
    <link rel="manifest" href="icons/manifest.json" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
    <meta name="theme-color" content="#ffffff" />

    <meta name="apple-mobile-web-app-title" content="VoTogether" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="#BE0000" />

아이패드용 스플래시 화면을 설정하고 싶을 땐 따로 설정을 해야 합니다

저희의 경우 아래와 같이 설정해보려고 했으나 아이패드에서는 제대로 나오지 않고 있습니다. 참고 자료의 링크를 참고하여 설정을 해야하는 것으로 이해되었어요

    <link
      rel="apple-touch-startup-image"
      sizes="768x1004"
      href="icons/splash-screen-768x1004.png"
    /> // 작동이 안됨

참고자료

https://www.simicart.com/blog/pwa-splash-screen/#For_iOS

---

전체 화면 설정을 하지 않았을 경우

위 아래 주소창과 인터넷 메뉴들이 보입니다.

---

메타를 추가하여 전체 화면 설정을 했을 경우

먼저 즐겨찾기를 해줍니다

안드로이드의 경우

현재 페이지 추가 버튼 클릭

홈 화면에 추가 버튼 클릭

즐겨찾기 하여 추가된 보투게더 아이콘

---

IOS의 경우

홈 화면에 추가 버튼을 눌러 즐겨찾기를 해줍니다.

즐겨찾기 하여 추가된 보투게더 아이콘

---

보투게더의 앱을 눌렀을 때 스플래시 화면

보투게더 앱을 이용할 때의 화면

참고 사이트

https://web.dev/icons-and-browser-colors/?hl=ko

https://jeongah-story.tistory.com/202 (apple meta tag 정리)