PWA - dltmdrbtjd/HANG GitHub Wiki

PWA ( Progerssive Web Apps )

프로그레시브 웹 어플리케이션은 웹을 통해 전달되는 응용 소프트웨어의 일종으로

HTML,CSS,JAVASCRIPT를 포함한 일반 웹 기술들을 사용하여 만들어진다.

표준을 준수하는 브라우저를 사용하는 어떠한 플랫폼에서라도 동작하도록 고안되었다.

특징

PWA의 특징은 App스러움이라고 할 수 있다. App처럼 홈스크린에 아이콘을 설치하여 App처럼 쉽게 바로가기를 실현할 수 있다.
PWA는 HTTPS에서만 사용이 가능하기 때문에 일반 인터넷 데이터에 비해 보안이 강화된 상태라고 할 수 있다.
PWA가 캐싱이 되기 때문에 Offline이거나 속도가 느린 상태에서도 미리 다운로드 되어 있는 정보를 계속 볼 수 있다.

pwa 제작 기술

manifest.json

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

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라는 것을 발견했다.

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

출처 : https://joshua1988.github.io/vue-camp/pwa/workbox.html#%E1%84%8B%E1%85%AF%E1%84%8F%E1%85%B3%E1%84%87%E1%85%A1%E1%86%A8%E1%84%89%E1%85%B3-cli%E1%84%85%E1%85%A9-%E1%84%89%E1%85%A5%E1%84%87%E1%85%B5%E1%84%89%E1%85%B3-%E1%84%8B%E1%85%AF%E1%84%8F%E1%85%A5-%E1%84%89%E1%85%A2%E1%86%BC%E1%84%89%E1%85%A5%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5