PWA with 하이브리드앱 사용기

PWA 사용기

사이드 프로젝트에서 PWA를 사용해 하이브리드앱을 구현했다. 더불어, PWA로 인해 서비스워커와 단방향 통신 SSE를 사용한 알림 기능을 구현할 수 있게 되었다. PWA 구현 방법은 매니페스트 설정과 SSL 인증 발급만 하면 된다.

PWA의 핵심은 매니페스트(Manifest)와 서비스워커(service-worker)다. 그중에서 매니페스트(Manifest)는 인스톨 배너와 앱 아이콘에 대한 설정을 담당한다.

백그라운드에서 작동될 오프라인 알림 기능과 휴대폰에서 앱을 다운받아 사용하기 위해서 PWA를 선택했다.

매니페스트(Manifest) 객체 종류

App Icon : 설치 시 앱의 아이콘 이미지와 크기 설정

스플래시((splash screen) 화면 : 로딩화면 설정

Start URL : 웹앱이 실행될 때 가장 처음 보여질 URL 설정

Display Type : 웹 앱의 화면 형태 (browser, standalone, fullscreen)

Display Orientation : 웹앱의 화면 방향(가로모드, 세로모드)


{
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "name": "내잔부 : 내 잔고를 부탁해",
  "short_name": "내잔부",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

manifest.json

이렇게 설정만 해주고 배포하면 도메인 URL에 아래 아이콘처럼 나타난다. 다운로드가 가능하다는 뜻이다.

아이폰에서는 다음과 같은 간단한 과정을 통해 특정 웹사이트를 앱처럼 활용할 수 있다.

사파리 브라우저에서 원하는 도메인 주소를 입력

화면 상단이나 하단에 위치한 "공유하기" 아이콘을 클릭

나타나는 메뉴에서 "홈 화면에 추가" 옵션을 선택

이러한 간단한 과정으로 휴대폰에서 내 서비스를 앱 서비스처럼 사용할 수 있게 된다.

⚠️

단, 네이버 같은 애플리케이션을 통해서가 아닌 사파리나 구글 환경에서만 가능하다.

PWA with 하이브리드앱 사용기

PWA 사용기

매니페스트(Manifest) 객체 종류

댓글