PWA 라는 걸 구글이 밀고 있다.
Progressive Web App 이라는건데 웹사이트를 Android/iOS 모바일 앱처럼 사용할 수 있게 하는 웹개발 기술이다.
내가 만든 웹사이트를 모바일 앱으로 발행해서 쓸 수 있는 법을 알아보자
여기서 모바일 앱으로 발행한다는게, iOS/Android 앱으로 발행하는게 아니라 웹사이트자체를 스마트폰 홈화면에 설치하는 방식이다.
PWA 의 장점
1. 스마트폰이나 태블릿의 홈화면(바탕화면)에 웹사이트를 설치할 수 있다.
앱을 누르면 상단 URL 바가 제거된 크롬 브라우저가 뜬다.
사실 웹이지만 유저가 봤을때는 그냥 앱같다.
2. 오프라인에서도 동작이 가능하다.
service-worker.js 라는 파일과 브라우저의 Cache storage 덕분이다.
(게임 만들 때 유용할듯하다)
3. 설치 유도 비용이 매우 적다.
앱설치를 유도하는데에 보통 비용이 많이 드는데 그에비해서 마케딩 비용이 적을 것이다.
(앱은 앱스토어 들어가게해서 앱설치하게하고... 해야하지만 PWA는 웹사이트 방문자들에게 간단하게 팝업 띄워서 설치유도할 수 있으니까?)
어떤 사이트나 파일 2개가 사이트 로컬경로에 있으면 브라우저가 PWA로 인식한다.
+ 그리고 HTTPS 사이트여야한다
manifest.json 과 service-worker.js 라는 이름의 파일 두 개를 만들면 된다.
원래 기본 프로젝트를 npm build 하면 manifest.json 만 생성해준다.
service-worker.js 까지 자동으로 생성되길 원하면 프로젝트 생성시 다음과 같이 입력해서 생성한다.
npx create-react-app 프로젝트명 --template cra-template-pwa만약 기존 프로젝트가 있었다면?
- App.js App.css index.js 같은 파일들을 새 프로젝트로 복붙한다.(index.js 는 바뀐게 많아서 다른것들 잘 복붙)
- router, redux 같은 라이브러리들 설치했다면 새 프로젝트에서도 다시 설치하기(당연)
- 파일들 중에 index.js 하단에
serviceWorkerRegistration.unregister();를
serviceWorkerRegistration.register();로 바꾸기
직접 해보자
npx create-react-app 프로젝트명 --template cra-template-pwa터미널에 프로젝트를 생성해준다.
manifest.json 파일이다.
이 파일에는 웹앱의 아이콘, 이름, 테마색 등을 결정하는 부분이 들어간다.
{
"version" : "앱의 버전.. 예를 들면 1.12",
"short_name" : "설치후 앱런처나 바탕화면에 표시할 짧은 12자 이름",
"name" : "기본이름",
"icons" : { 여러가지 사이즈별 아이콘 이미지 경로 },
"start_url" : "앱아이콘 눌렀을 시 보여줄 메인페이지 경로",
"display" : "standalone 아니면 fullscreen",
"background_color" : "앱 처음 실행시 잠깐 뜨는 splashscreen의 배경색",
"theme_color" : "상단 탭색상 등 원하는 테마색상",
}이 파일은 웹앱에서 사용하는 모든 html 안에
<link rel="manifest" href="/manifest.webmanifest">이런식으로 집어넣어야하는데 이부분은 리액트가 알아서 해주었을거다.
index.js 파일에서 저 부분을 unregister()에서 register() 로 바꾸어주고 난 다음에 빌드를 해주어야한다.
npm run build 를 한다.
그럼 다음과 같이 build 라는 폴더가 생긴다.
그 안에 manifest.json과 service-worker.js 라는 파일이 있다.
service-worker.js 란?
보통 앱을 설치하면 스토어에가서 설치한다.
그럼 앱 구동에 필요한 이미지, 데이터들이 전부 하드에 설치된다.
그리고 앱을 켜면 여러 데이터들을 앱 서버에 요청하지 않구 하드에 설치해놓은걸 그대로 가져와 쓴다.
이처럼 도와주는 파일이 service-worker 파일이다.
웹앱을 설치했을 때 어떤 css, js, html, img 파일이 하드에 설치될지 결정할 수 있다.
그럼 다음번부터 앱을 켤 때마다 서버에 파일을 요청하지 않고 cache storage 에 저장되어있던 파일을 사용하게 된다.
-> 오프라인에서도 사용이 가능하게 됨!
설정은 이미 되어있다.
모든 html css js 파일을 cache storage 에 저장하도록 기본적으로 세팅이 되어있지만
저장해두기 싫거나 자주 변하는 파일들이 있을 수 있다.
이 부분을 수정해보자
만약 쌩으로 server-worker 파일을 만들고 싶으면 공식 튜토리얼을 참고
https://developers.google.com/web/fundamentals/primers/service-workers
Service worker overview - Chrome Developers
An overview of service workers.
developer.chrome.com
build 할 때마다 js css html 파일의 이름과 경로가 무작위로 바뀐다.
따라서 사이트에 필요한 js css html 파일명이 바뀌면 서버에 요청에서 새로 받아옴
-> 서버 배포할때마다 유저는 업데이트된 새로운 파일을 잘 보게 될거다. 이 부분은 걱정말자.
build 폴더를 작업영역으로 열어서 index.html 을 live server 로 open 해봤다
다음과 같이 페이지를 확인할 수 있다. 그리고 오른쪽 위에 검색창 쪽에 웹을 설치할 수 있는 버튼이 새롭게 보인다.
개발자 도구로 디버깅하기
개발자 도구에서 Application 탭에 들어가면 PWA 에 관련된 부분을 살펴볼 수 있다.
manifest 메뉴 : manifest.json 관련 내용
service worker 메뉴 : service-worker 파일, 오프라인에서 잘 동작하는지 테스트 가능, 푸시알림을 샘플로 전송해볼 수 있음
cache storage 메뉴 : service-worker 덕분에 하드에 설치된 css js html 파일 확인 가능. 캐시파일 제거 가능.
참고
PWA 는 구글 앱스토어에 올릴 수 있느 apk 파일로 변환이 가능한데
이때 PWAbuilder 등 이용하면 됨.
