[PWA] Progressive Web App & 셋팅

PWA

웹사이트를 앱처럼 다운받아, 아이콘 클릭으로 실행할 수 있음
근데 사실은 브라우저 상태바가 제거된 웹임
이런식으로 앱 설치를 유도하는 것이 PWA 사이트

조건

• manifest.json
• service-worker.js

2개 파일이 필요함
이 2개가 있는 사이트는 PWA로 자동 인식해서 크롬에서 설치팝업을 띄워줌

라이브러리 설치

vue 공식 라이브러리 중 PWA기능을 제공하는 라이브러리를 설치한다.
설치 완료 시 registerServiceWorker.js 파일이 자동으로 생성된다.
프로젝트 build 시 manifest.json, service-worker.js 파일을 자동으로 생성해 준다.

vue add pwa

npm run build

manifest.json

앱 정보(앱 이름, 브라우저 색상, 아이콘 등)를 설정하는 파일

service-worker.js

구글의 워크박스라는 라이브러리
웹페이지 구동에 필요한 html css js img 를 하드에 저장해 놓음
웹페이지에 접속했을 때 하드에 저장된 데이터가 있으면 그걸 사용한다. (오프라인에서도 보여짐)

PWA 설정 바꾸기 vue.config.js

manifest.json / service-worker.js 파일은 build 시마다 새로 갱신되기 때문에 이 파일들을 직접 수정하지 않는다.
vue.config.js