[html]모바일 전체화면 모드로 전환하기 manifest

모바일 크롬 접속 > 설정 > 홈화면 추가로 사용 가능

* ios에서는 사파리로 가능

 

{
  "short_name": "아이콘과 함께 노출될 아이콘 tilte",
  "name": "로딩 시 보여질 text",  // 스플래시 스크린
  "display": "fullscreen", 
  // fullscreen, minimul-ui, standalone, browser 
  "orientation": "landscape", 
  // 가로모드 / 미작성 시 디바이스의 설정에 따름
  "icons": [
      {
        "src": "/images/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "/images/icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ], //48의 배수로 제작되어야 함
  "background_color": "#fff", // splash screen 배경색상
  "theme_color": "#fff", // 아이폰 다이나믹 아일랜드 있는 영역 + body이후 영역
  "start_url": "/" // 접속 시 첫화면
}

 

json파일 작성 후 head에 연결

<link rel="manifest" href="/manifest.json">
// head에 연결

 

 

상단바 - 시계, 배터리 등이 표시되는 상단 바

하단 네비게이션바 - 뒤로가기, 홈 등 표시 되는 하단 바

 

- display 속성

fullscreen -  상단바X , 주소창X , 하단 네비게이션바X

minimul-ui - 상단바X , 주소창X , 하단 네비게이션 O // 이지 않을까 확인 안해봄

standalone - 상단바 O , 주소창X , 하단 네비게이션 O

browser - 상단바O , 주소창 O , 하단 네비게이션O

 

- orientation 속성 (ios 미지원)

any
natural
landscape : 가로모드 (화면 어느 방향으로 두어도 상하 자동 조정됨)
landscape-primary : +90도 가로모드
landscape-secondary : -90도 가로모드
portrait : 세로모드 
portrait-primary : 정방향
portrait-secondary : 역방향

 

- start_url 미 작성 시 해당페이지에서 열림

- 스플래시 스크린 ios 미지원

 

start_url이 있으면 모바일에서 홈화면추가로 뜨고, 

없으면 앱 추가로 뜸

** 240613 안드로이드 설정 변경

start_url유무와 상관없이 icon 이미지 설정 후 manifest사용 가능한 것으로 확인됨

기존의 경우 크롬 설정 > 홈 화면 추가로 바로 사용 가능했지만 앱 보관함에 추가 후 바탕화면에 꺼내는 걸로 확인 됨

(안드로이드 혹은 크롬 소프트웨어 업데이트 탓으로 추정)

 

** 240724 https가 안달려있으면 manifest사용은 불가능한 것 같음(크롬 기준)

 

참고

https://s0n9h2.tistory.com/122

https://uxgjs.tistory.com/225