pwa 웹앱 설치하기 - manifest.json

최근 웹앱에서 백그라운드 푸시알림 기능을 구현하게 되었다.

푸시알림 기능을 위해 pwa 방식 웹앱이 앱처럼 설치될 수 있도록 하고자했다.

(근데 알고보니 pwa가 아니여도 백그라운드 알림이 구현가능한다고 한다)

 

pwa방식 웹앱이 설치될 수 있기위해 manifest.json 파일을 적용시키면 된다.

 

✅ manifest.json 이란?

- 앱에 대한 정보를 제공함. 

- 웹앱을 사용자 모바일의 홈 화면에 저장하는 데 필요한 필수 정보와 사용자 경험 측면에서 어떻게 보일지에 대한 정보가 담긴  json 파일. (배경색, 앱 이름, 앱 아이콘, 등등...)

 

manifest.json 예제

{
	"name": "Rice Bowl",
	"short_name": "Rice Bowl",
	"description": "Fluffless jasmine rice for those cold winter nights",
	"icons": [
		{
			"src": "/images/icon-192.png",
			"type": "image/png",
			"sizes": "192x192"
		},
		{
			"src": "/images/icon-512.png",
			"type": "image/png",
			"sizes": "512x512"
		},
		{
			"src": "/images/icon-maskable-192.png",
			"type": "image/png",
			"sizes": "192x192",
			"purpose": "maskable"
		},
		{
			"src": "/images/icon-maskable-512.png",
			"type": "image/png",
			"sizes": "512x512",
			"purpose": "maskable"
		}
	],
	"start_url": "/?source=pwa",
	"orientation": "portrait",
	"display": "standalone",
	"scope": "/"
}

 

 

• name : 프로젝트 이름, 웹앱 배너에 표시되는 앱 이름 

• short_name : 앱 아이콘 밑에 표시될 이름

• icons : 앱 아이콘,
              : 각 디바이스나 플랫폼은 다양한 해상도 및 디스플레이 크기를 가지고 있기 때문에,
                여러 아이콘을 등록해 놓고 플랫폼에 따라 아이콘 크기를 조절할 수 있음. 

• start_url : PWA를 시작할 때 열리는 초기 페이지, 설치된 웹 앱 실행 시 어떤 페이지를 열지 설정한다.

• orientation : 화면 방향, any(자동 회전), portrait(세로 방향 고정), landscape(가로 방향 고정)

• display : 설치 된 웹앱의 화면 모드

  1) standalone( 상단 주소바 x, 하단바ㅇ)
  2) fullscreen (상단 주소바 x, 하단바x)
  3) browser( 상단 주소바 ㅇ 하단바ㅇ)

• scope : 앱 내에서 pwa기능을 적용할 범위, 일반적으로 PWA의 루트 디렉토리를 나타냄. 

 

 

✅ manifest.json 파일 웹페이지에 포함하기

html 파일 헤더에 link태그로 작성

<link rel='manifest' href='/manifest.json' />

 

IOS도 지원하려면 meta 태그를 추가로 설정해야 한다.

<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel='apple-touch-icon' href='/images/icon-maskable-512.png' />
// 등등...

 

 

✅ PWA 웹앱 설치된 모습

• 크롬 브라우저 해당 주소에 접근하면 설치 여부 팝업이 뜬다
• FCM으로 백그라운드 푸시 알림 구현시 앱 아이콘에 뱃지도 생긴다!
• 신기하다!!

pwa 웹앱 설치된 모습

 

 

---

 

https://hellonehha.medium.com/your-guide-to-manifest-json-2708e8bb7ef7

https://wonsss.github.io/PWA/web-app-manifest/

설치 가능한 웹 앱을 구성하기 위한 Manifest 설정하기