목차
· PWA의 이점
· 웹앱 매니페스트(Manifest)란?
· 웹앱 매니페스트(Manifest)의 설정
· 서비스 워커(Service Worker)란?
· 레퍼런스
PWA의 이점
빠른 페이지 로딩 속도
Service Worker의 Cache API를 사용하여 데이터를 캐싱시킬 수 있다. 이를 통해 두 번째 방문부터 캐싱된 데이터를 통해 즉각적인 페이지 로딩을 시킬 수 있다. 이는 정적 데이터와 동적 데이터에 대한 캐싱 정책을 어떻게 정하느냐에 따라 페이지 로딩 결과가 달라지게 된다.
오프라인 지원 (네트워크에 독립적)
Service Worker에 캐싱된 데이터를 가져오게 되면 네트워크가 오프라인 상태라도 서비스를 사용할 수 있게 된다. 따라서 PWA로 웹 앱을 구성하게 되면 오프라인 상태라도 브라우저에 더 이상 오프라인 상태라고 표시되지 않으며 캐싱된 데이터를 그대로 보여줄 수 있다.
검색 가능
웹 앱의 특성 그대로 검색이 가능하다.
설치 가능 (홈 화면에 추가)
PWA는 웹 앱 매니페스트 내부에 설정된 속성과 웹 앱 설치라는 최신 모바일 브라우저에서 사용할 수 있는 기능을 통해 웹 앱을 현재 모바일 브라우저를 사용하는 디바이스의 홈 화면에 추가 즉, 설치와 같이 등록할 수 있다.
링크를 통한 공유 기능
웹 앱이기 때문에 URL을 통한 공유도 가능하다.
푸시 알림을 통한 지속적 참여 유도
최신 브라우저에서 Web API인 Push API를 사용하여 서버로부터 알림을 push event로 받고, Notification API를 이용해 브라우저에 시스템 알림을 보여줄 수 있다. 이는 사용자의 재참여를 유도할 수 있고 사용자의 재참여를 유도하는 네이티브 앱의 핵심기능을 웹에서 구현할 수 있게 된 것이다.
반응형 웹 화면
PWA의 가장 기본은 반응형 웹앱이기 때문에 웹 브라우저를 사용하는 다양한 디바이스의 화면에 모두 대응할 수 있다.
안전
PWA를 구현하기 위한 기술은 HTTPS에서만 사용이 가능하고, 브라우저의 보안 정책인 CORS 등을 따르기 때문에 보안적인 이점도 배제할 수 없다.
점진적이며, 구축이 쉽다.
이미 구축된 웹 앱이라고 해서 PWA로 사용하지 못하는 것은 아니다. 기존에 구축된 웹 앱에 Service Worker와 Manifest.json 파일을 만들어 PWA로 구축하는 것은 매우 쉽고, 또 점진적으로 PWA에 요구되는 기능들을 하나씩 점진적으로 추가해 갈 수 있다.
웹앱 매니페스트(Manifest)란?
웹앱 매니페스트(Manifest)는 PWA(Progressive Web Apps)의 설치와 앱의 구성 정보를 담고있는 json 설정 파일이다. 이 설정은 크게 아래와 같은 작업을 한다.
· App Icon : 설치 시 앱의 아이콘 이미지와 크기 설정
· 스플래시 화면 : 로딩화면 설정
· Start URL : 웹앱이 실행될 때 가장 처음 보여질 URL 설정
· Display Type :웹 앱의 화면 형태 (browser, standalone, fullscreen)
· Display Orientation : 웹앱의 화면 방향 (가로 모드, 세로 모드)
웹앱 매니페스트(Manifest)의 설정
웹앱 매니페스트의 설정은 JSON으로 설정한다. 아래와 같은 코드를 작성하여 <head> 태그 안에 배치를 하면 된다. 이때, manifest.json의 구성요소들을 간단하게 아래와 같이 설명을 할 수 있다.
· short_name : 필수 입력 사항으로, short_name이 있어야 배너를 설치할 수 있다. 해당 키 값을 통해 프로젝트 이름으로 설치된 아이콘의 이름으로 표시가 된다.
· name : 필수 입력 사항으로, name이 있어야 배너를 설치할 수 있다. 이것은 설치 배너에 표시되는 이름이며 검색의 키워드로 사용된다.
· icons : icons는 앱에서 필요한 다양한 크기의 아이콘을 지정합니다. 그 중에서도 192px(128dp)는 꼭 있어야하는 크기의 아이콘이다. 이 아이콘이 있어야 스플래시 화면이 표시된다. (스플래시 스크린은 3가지의 설정 조합으로 구성이 되는데, 배경색 + 아이콘 + 아이콘 이름이 설정되었다면 스플래시 화면이 나온다)
· short_url : 필수 요소로 웹 앱이 실행될 때 가장 처음 나오는 화면을 지정한다. 말하자면 스플래시 화면 다음에 나오는 화면이다.
· display : 웹앱이 어떤 모양으로 보여질지 설정하는 값이다.
· browser(normal) : 해당 브라우저에서 기본 웹으로 실행
· standalone : 상단의 URL바를 제거하여 네이티브 앱처럼 보임 (가장 많이 사용)
· fullscreen : 화면 전체를 사용하여 native처럼 보임
· theme_color : 테마 컬러는 브라우저 상단의 URL 입력바와 시스템 바까지 포함한 색상을 지정할 수 있다.
· background_color : 스플래시 화면의 배경 색상을 지정할 수 있다.
· orientation : 기기의 방향을 가로로 할지, 세로로 할지 지정하는 값이다.
· portrait : 세로모드
· landscape : 가로모드
// _app.tsx (index.html 안으로)
<link
rel="manifest"
href="/manifest.json"
crossOrigin="use-credentials" // crossOrigin 태그를 통해 사파리에서도 작동이 가능하게 해준다.
/>// manifest.json (public 폴더 안으로)
{
"name": "likelion",
"short_name": "likelion",
"icons": [
{
"src": "/likelion_icon_x72.png",
"type": "image/png",
"sizes": "72x72"
},
{
"src": "/likelion_icon_x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/likelion_icon_x128.png",
"type": "image/png",
"sizes": "128x128"
},
{
"src": "/likelion_icon_x144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/likelion_icon_x152.png",
"type": "image/png",
"sizes": "152x152"
},
{
"src": "/likelion_icon_x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#262626",
"theme_color": "#f2f2f2",
"scope": "."
}Service Worker란?
PWA를 하기 위한 가장 핵심 기술을 꼽으라면 이 Service Worker로 PWA는 이 Service Worker 때문에 가능해졌다고 해도 과언이 아니다. Service Worker은 브라우저의 thread를 이용하는 Web Worker의 일종으로 Client의 Browser에 등록되어 Background로 동작하는 javascript file이다. Service Worker의 주 역할은 브라우저에서 서버로 가는 request, response를 가로채는 proxy 서버로 작동하기 때문에 네트워크 작업을 통해 주고 받는 컨텐츠들을 수정하고 저장하는 등의 처리를 함으로서, 웹 앱에 다양하고 유용한 기능을 구현할 수 있다.
이러한 proxy 작업을 통해 정적 데이터 캐싱, 동적 데이터 캐싱과 같은 일이 가능해지고 캐싱된 데이터를 통해 오프라인 서비스 지원이 가능해지며 서버로 요청되는 request를 오프라인시에 캐싱 및 작업 큐에 넣어두고, 온라인 환경이 되었을 때 관련 요청들을 큐에서 꺼내 다시 request 요청을 처리하게 하는 background sync 작업도 가능해진다. 또 push API, Notification API 등을 Service Worker에 등록 및 연게해서 사용할 수 있어 웹 알람을 구현할 수 있는 핵심 기술이라 할 수 있다. Service Worker 구현을 진행하였지만, 포스팅의 양을 나눠 집중도를 높히기 위해 구현에 대한 예시 경우는 다음 게시물에서 이어 포스팅을 진행할 예정이다. 내친김에 알림까지 직접 구현을 해보는 걸로 👀
레퍼런스
PWA 적용해 Chrome App 형태로 제작해보기
6
velog.io
하옹의 프론트앤드 이야기 - PWA란? (Progress Web App)
* 이 글은 저의 개인 프로젝트 Memona 개발 경험으로 를 소개하고자 적은 글 입니다. PWA? 프로그레시브 웹앱? 는 Progressive Web App의 약자로써 어떤 기술이나 앱을 뜻하는 것이 아니라, 웹에서 사용할
ha-young.github.io
'개발적인' 카테고리의 다른 글
| PWA랑 Git Action을 첨가한 멋쟁이사자처럼 피드 개발기 (0) | 2023.11.27 |
|---|---|
| 자바스크립트 패키지 매니저, PNPM 란? (0) | 2023.11.21 |
| Recoil에 한번 빠져보려고 하는데, Redux를 첨가한.. (0) | 2023.11.14 |
| PWA의 핵심, 서비스 워커가 뭘까? (0) | 2023.11.12 |
| 프론트엔드의 뜨거운 감자, 리액트 쿼리 (0) | 2023.10.30 |
댓글