웹 앱을 앱처럼 홈 화면에서 아이콘을 클릭해서 열 수 있다면 어떨까요? 사용자가 웹 사이트에 접근하려면 브라우저를 켜서 주소창에 긴 웹 사이트 주소를 입력해서 들어와야 합니다. 기존에 방문한 링크의 경우에는 주소의 일부를 입력하면 자동 완성이 돼서 접근하기 조금 더 쉽겠지만 여전히 번거롭게 느껴지긴 합니다. 웹 앱이 네이티브 앱처럼 홈 화면에서 접근 가능하다면 번거로움이 줄어 사용자의 방문 횟수가 더 늘어날 수 있지 않을까요? 앞으로 설명할 A2HS를 사용하면, 설정에 따라 브라우저 창에서 웹 앱이 뜨는 것이 아니라 별도의 네이티브 앱처럼 동작하게 할 수 있습니다. 안드로이드나 ios 앱, 웹 앱이 전부 필요한데 개발할 시간이나 여력이 없는 경우 좋은 대안이 될 수 있습니다. A2HS란 A2HS(Add to Home Screen, 홈 화면에 추가)는 모던 브라우저에서 제공하는 기능으로 사용자가 웹 앱을 설치할 수 있도록 합니다. 사용자가 홈 화면에 바로가기를 추가해서 한 번의 탭으로 웹 앱에 접근하도록 합니다. A2HS 조건 A2HS를 적용하려면 3가지 조건이 있습니다. HTTPS로 서비스 제공 웹 앱 매니페스트 파일 제공 서비스 워커 등록하기 1번의 경우 호스팅 업체에서 제공하거나 AWS와 같은 클라우드 플랫폼에서 쉽게 설정하도록 제공하고 있어서 설명은 생략하고 이글에서는 2, 3번에 대한 내용만 다루려고 합니다. 이글은 최소한의 설정으로 A2HS를 적용하는 것을 목표로 합니다. A2HS 적용해보기 웹 앱 매니페스트 파일 제공 매니페스트 파일은 웹 앱이 어떻게 구동되고 작동되는지 어떤 모양으로 보이는 지를 설명하는 JSON 파일입니다. 매니페스트 파일에는 기본적인 정보(앱 이름, 앱 아이콘 등)와 부가 정보(앱 방향, 테마 색상 등)를 작성할 수 있습니다. 1. static 파일을 제공하는 디렉터리 루트에 manifest.webmanifest 파일을 생성합니다. webmanifest 확장자는 W3C에서 지정한 표준 확장자입니다. 일반적인 브라우저에서는 JSON 확장자도 지원합니다. ( // 필수 "name": "스테이지", // 홈 화면 추가 시 앱 이름 "icons": [ ( "src": "/images/icon-192.png", "sizes": "192x192", "type": "image/png" ), ( "src": "/images/icon-512.png", "sizes": "512x512", "type": "image/png" ) ], // 앱 대표 이미지(앱 아이콘, 스플래시 이미지 등으로 쓰임) "display": "fullscreen", // 앱이 어떻게 디스플레이 될 지 정의 "start_url": "/", // 앱 실행 시 로딩되는 첫 페이지의 경로 // 부가 "description": "누구나 작가가 될 수 있는 꿈의 공간 스테이지", // 앱에 대한 설명 "background_color": "white", // 앱 화면, 스플래시 화면 배경색 "short_name": "short name", // optional, 전체 이름을 표시할 공간이 없을 때 사용되는 값, 15자 미만으로 작성 권장 "theme_color": "#FFBC00", // OS 디스플레이(모바일 상태 바 등)에 나타나는 색 "orientation": "portrait" // 화면 방향 ) 매니페스트 파일 속성 자세히 보기 icons 앱 아이콘, 스플래시 화면에 사용되는 아이콘 기기 해상도에 따라 명시된 icon 리스트 중 적절한 크기의 이미지가 로딩됨 대부분의 기기에서 잘 보이려면 최소한 192x192 크기와 512x512 크기 2개 정도 제공하는 게 좋음 한 개의 이미지만 등록한다면 512x512 크기 제공 display fullscreen, standalone, minimal-ui, browser 중에 설정 fullscreen: 전체화면 모드, 디바이스의 상태 바와 브라우저 주소창 등 영역이 없음(네이티브 앱과 비슷하게 동작) standalone: 브라우저 주소창 영역이 없음 browser: 브라우저에서 앱을 실행 minimal-ui: 안드로이드, 데스크톱에서만 가능. 앱 내의 내비게이션 기능만 가능한 최소한의 UI만 노출됨 orientation any, landscape, portrait, natural, primary, secondary 값 중에 선택 any: 디바이스의 세팅 값에 따름 landscape: 화면 너비가 높이보다 큰 방향 portrait: 화면 높이가 너비보다 큰 방향 primary: 디바이스의 방향에 따라 어떤 모드를 우선으로 선택할지 secondary: 디바이스의 방향에 따라 어떤 모드를 차선으로 선택할지 scope 웹 앱 내에서 열리는 URL 범위 scope에 포함되지 않은 항목의 경우 웹 앱이 아닌 브라우저에서 열림 2. html에 매니페스트 파일을 등록합니다. 서비스 워커 등록하기 서비스 워커를 사용하면 네트워크 요청을 가로채서 미리 캐시 된 데이터를 먼저 내려준다든지 하는 등의 작업이 가능합니다. 사용자의 모바일 기기의 인터넷이 느리거나 끊긴 경우 이전에 받은 데이터를 캐싱해뒀다가 보여줌으로써 마치 앱처럼 끊김이 없이 동작할 수 있도록 합니다. 이글에서는 최소한의 설정이 목표이기 때문에 데이터 캐싱은 생략하고 껍데기 서비스 워커를 등록하겠습니다. // sw.js self.addEventListener("fetch", e => ()) 이 정도만 작성하더라도 A2HS는 잘 동작합니다 :) 여기까지만 진행하면 (크롬 기준) 주소창에 설치 버튼이 생성될 겁니다. 아래 이미지를 확인해보면 manifest의 display 값을 fullscreen으로 설정해서 브라우저 UI 없이 마치 별도의 네이티브 앱처럼 실행이 됩니다. 디자인된 모달 내의 버튼을 눌렀을 때 홈 화면에 추가되도록 하려면 어떻게 해야 할까요? 커스텀 UI에 A2HS 기능 추가하기 브라우저는 사이트가 A2HS 기능을 제공하기에 적합한 경우 beforeinstallprompt 이벤트를 트리거 합니다. 이벤트 핸들러에 전달되는 이벤트 객체에는 설치 메서드가 포함되어 있어서 커스텀 UI를 통해 웹 앱을 설치하는 것이 가능합니다. 기본 html, js만 사용하는 예제는 MDN에 잘 나와 있어서 react를 기준으로 작성해보겠습니다. const useA2HS = () => ( /** * prompt가 실행될 수 있는 환경인 경우에만 모달창을 나타내기 위해 * 변경 시 리렌더링을 발생시키기 위해서 useRef가 아닌 useState를 사용하였습니다. */ const [deferredPrompt, setDeferredPrompt] = useState(null) useEffect(() => ( const handler = (e) => ( e.preventDefault() setDeferredPrompt(e) ) // beforeinstallprompt에 이벤트 핸들러를 등록합니다. window.addEventListener('beforeinstallprompt', handler) return () => ( window.removeEventListener('beforeinstallprompt', handler) ) ), []) const installApp = () => ( // 설치 메서드 실행 deferredPrompt?.prompt() deferredPrompt?.userChoice.then(choiceResult => ( clearPrompt() )) ) const clearPrompt = () => ( setDeferredPrompt(null) ) return ( deferredPrompt, install, clearPrompt ) ) export default function A2HS() ( const ( deferredPrompt, install, clearPrompt ) = useA2HS() return deferredPrompt ? (

) : null ) beforeinstallprompt 이벤트 핸들러에 전달되는 이벤트 객체를 변수에 할당해두고, 이벤트 객체 속성 중 prompt 메서드를 버튼 이벤트에 등록해 두면 홈 화면에 웹 앱 바로가기 추가가 가능합니다. safari 지원 caniuse에서 확인해 보면 ios는 safari에서 A2HS 기능을 제공하지만, 크롬과 같은 웹 뷰에서는 지원하지 않는다고 합니다. 현재까지 확인한 바에 따르면 ios에서는 위에 설명한 beforeinstallprompt 이벤트가 지원되지 않아서 커스텀 UI는 사용 불가합니다. 사용자가 ios에서 홈 화면 바로가기를 추가하는 스텝은 다음과 같습니다. safari 브라우저 하단의 공유 버튼 클릭 “홈 화면에 추가” 메뉴 선택 앱 이름 확인(사용자가 수정 가능) 추가 버튼 클릭 이 스텝을 거치면 ios에서도 브라우저 없이 별도의 앱으로 실행되는 웹 앱을 설치할 수 있습니다. 마무리 A2HS를 사용하면 앱을 다운로드하는 번거로운 과정(앱 스토어 검색, 인증, 설치 시간 등)이 없어 설치 진입장벽이 낮은 앱을 제공할 수 있게 됩니다(ios의 좀 더 적극적인 지원이 필요하지만요). A2HS 외에도 PWA의 다양한 기능들을 사용하면 웹 앱에서도 푸쉬 등 네이티브와 비슷한 다양한 기능들을 사용할 수 있습니다. 네이티브 앱을 개발하기엔 무리가 있고 네이티브 앱과 같은 기능을 제공하길 바랐던 분들에게 이 글이 도움이 되었길 바랍니다. 부족한 글 읽어주셔서 감사합니다. Reference MDN - Add to Home screen Web app manifest

홈 화면에 웹 바로가기를 추가하기(A2HS)

댓글 0개