-
Notifications
You must be signed in to change notification settings - Fork 0
PWA
프로그레시브 웹 어플리케이션은 웹을 통해 전달되는 응용 소프트웨어의 일종으로
HTML,CSS,JAVASCRIPT를 포함한 일반 웹 기술들을 사용하여 만들어진다.
표준을 준수하는 브라우저를 사용하는 어떠한 플랫폼에서라도 동작하도록 고안되었다.
-
PWA의 특징은 App스러움이라고 할 수 있다. App처럼 홈스크린에 아이콘을 설치하여 App처럼 쉽게 바로가기를 실현할 수 있다.
-
PWA는 HTTPS에서만 사용이 가능하기 때문에 일반 인터넷 데이터에 비해 보안이 강화된 상태라고 할 수 있다.
-
PWA가 캐싱이 되기 때문에 Offline이거나 속도가 느린 상태에서도 미리 다운로드 되어 있는 정보를 계속 볼 수 있다.
manifest.json은 설치할때 아이콘은 무얼 사용하고 아이콘을 눌렀을때 접속할 페이지는 무엇인지, 배경색은 무슨색으로 할 것인지 등등..에 대한 설정파일이다.
- 매니페스트(Manifest)의 설정은 JSON으로 설정한다. 파일은 index.html의 head안에 배치한다.
// index.html
<head>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
</head>
// manifest.json
{
"short_name": "HANG",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}- App icon: 설치시 앱의 아이콘 이미지와 크기 설정
- 스플래시(splash screen)화면 : 로딩화면 설정
- start url : 웹앱이 실행될 때 가장 처음 보여질 url설정
- display type: 웹앱의 화면 형태(browser, standalone, fullscreen)
- display orientation : 웹앱의 화면 방향 (가로/세로)
- short_name 지정 : short_name은 필수 입력사항으로 이게 있어야 배너를 설치할 수 있다. 이건 프로젝트 이름으로 설치된 아이콘의 이름으로 표시 된다.
- name 지정 : name도 필수 입력사항으로 name이 있어야 배너를 설치할 수 있다. 이건 설치 배너에 표시되는 이름이며 검색 키워드로 사용된다.
- icons지정 : icons는 앱에서 필요한 다양한 크기의 아이콘을 지정한다. 그중에서도 192px(128dp)는 꼭 있어야 하는 크기의 아이콘이다. 이 아이콘이 있어야 스플래시 화면이 표시된다.
- splash screen 설정 : 스플래시 스크린은 3가지의 설정 조합으로 구성된다. 배경색 + 아이콘 + short_name(아이콘이름) 이 설정되어있다면 스플래쉬 화면이 나온다.
- start_url 설정 : start_url은 필수 요소로 웹앱이 실행될때 가장 처음 나오는 화면을 지정한다. 즉 스플래시 화면 다음에 나오는 화면이다. 기본 설정은 아래와 같이 이용하고 그 외에 Query String을 사용할 수 도 있다.
"start_url": "./index.html",
"start_url": "./index.html?name=names1123",- display 설정 : display의 설정은 웹앱이 어떤 모양으로 보여질지 설정하는 값이다.
- browser(normal): 해당 브라우저에서 기본 웹으로 실행
- standalone: 상단의 url바를 제거하여 네이티브앱처럼 보임(가장 많이 사용)
- fullscreen: 화면 전체를 사용하여 네이티브처럼 보임
- iOS에서 standalone사용시 태그 안에 아래의 메타태크를 추가해야한다.
<meta name="apple-mobile-web-app-capable" content="yes">
- theme_color 설정 : 테마 컬러는 바라우저 상단의 url입력바와 시스템 바까지 포함한 색상을 지정할 수 있다.
"theme_color": "#c4c4c4",
- orientation 설정 : orientation은 기기의 방향을 가로로할지 세로로할지 지정하는 값이다. 게임이 아니라면 거의 세로모드를 사용하면 된다.
// 세로모드 : portrait , 가로모드 : landscape
"orientation": "portrait",
service-worker는 pwa의 핵심으로 캐싱은 어떻게 할 것인지 요청시 캐시를 먼저 보여줄지 웹서버를 통해서 먼저 보여줄지, push등등에 대한 프로그래밍하는 기술이다. pwa의 거의 8할에 해당하는 기술이라고 볼 수 있다.
service-worker 파일은
npx create-react-app my-app --template cra-template-pwa-typescript
위와 같이 cra를 실행하면 root최상단에 생성되고 해당파일들로 캐싱및 오프라인작업 등등을 실행할 수 있다.
출처 : https://create-react-app.dev/docs/making-a-progressive-web-app/
기존에 JS로 작업했을때에는 캐싱할 파일들을 정리하고 연결하는등의 과정이 복잡했었는데 TS로 리팩토링을 진행하면서 어떤식으로 작성하면 좀 더 효율적으로 이걸 사용할 수 있을까에 고민하면서 찾아보다가 workbox라는 것을 발견했다.
pwa의 캐싱(caching)기능을 편하게 구현할 수 있도록 지원되는 표준 PWA 라이브러리. [sw-precaching],[sw-toolbox]라이브러리가 지원하던 기능들을 통합하여 제공한다.
npm install workbox-cli --global
위 명령어로 설치를하고
worbkox wizard
를 통하여 설치를 진행하면
- 웹 애플리케이션의 루트가 어디인지? app/
- 어떤 파일 유형들을 프리캐싱(pre-caching)할 것인지? html, css, js, jpg, png
- 위 옵션들이 적용된 서비스 워커 파일이 생성될 위치? dist/sw.js
- 위 구성 정보들을 어디에 저장할 것인가? workbox-config.js 위와 같은 질문들에 대해 답을하면 workbox-config.js 파일이 생성된다.
workbox generateSW ./workbox-config.js이렇게 생성된 서비스 워커 파일에는 워크박스의 프리캐싱과 런타임 캐싱기능이 포함되어 있다. ( 다만 웹푸쉬 기능이 필요한경우에는 injectManifest 옵션을 활용해야한다.
워크박스 CLI의 injectManifest 모드
워크박스 injectManifest 모드는 generateSW 모드와는 다르게 개발자가 좀 더 서비스워커 파일을 직접 조작하거나 내용을 수정할 수 있습니다. 파일 캐싱 이외에 웹 푸시 API와 같은 네이티브 API 기능을 구현하고 싶을 때 적합한 모드입니다.
개발자가 구현해놓은 서비스 워커 파일을 읽어 설정 파일(workbox-config.js)에 설정된 캐싱 정보를 추가하고 새 서비스 워커 파일을 생성해줍니다. 명령어는 다음과 같습니다.
workbox injectManifest ./workbox-config.js