📌 PWA (Progressive Web App)
PWA 를 사용하면 웹사이트를 그대로 모바일앱처럼 쓸 수 있게 만들 수 있다.
앱처럼 보이지만 사실은 웹임
PWA 되려면 다음 두 가지가 필요하다.
1. manifest.json
2. service-worker.js
라이브러리를 이용하여 위의 두 가지 파일을 만들어보자
설치만 하면 npm runb build를 입력할 때 PWA 가 알아서 셋팅된다. 배포하면 바로 PWA 로 사용 가능하다.
1. 터미널에 다음을 입력한다. (npm 도 이용가능함)
vue add pwa
설치가 끝나면 registeServiceWorker.js 파일이 생긴다
우리 프로젝트를 build 할 때
manifest.json
service-worker.js
를 생성해준다.
2. 터미널에 npm run build 를 입력해보자
npm run build
그러면 배포용 html 을 생성해준다.
build 후에는 dist 파일이 생성된다.
dist 파일 안에는 웹사이트에 배포할 수 있는 파일들이 들어있다.
dist 폴더 안에 manifest.json 과 service-worker.js 가 있으면 PWA 가 잘 된 것이다.
🧊 manifest.json
- 앱 정보 담는 파일
- 앱 이름, 바로가기 생성 시 이름, 앱 설치시 뜨는 아이콘 이미지 경로, 테마 색상 등등 정보가 담겨있다.
- 자유롭게 수정 가능
- 해당 파일이 있으면 app 으로 인식가능
🧊 service-worker.js
- 실제 모바일앱은 인터넷 없어도 사용 가능
- 어떤 html, css, js 파일들을 캐싱해놓을 것인지를 명시하는 파일 (캐싱해놓은 파일들은 오프라인에서 이용 가능)
- 웹페이지 구동에 필요한 html, css, img 하드에 저장해 놓음
필요한 파일들을 서버에서 가져오는 것이 아니라 하드에서 가져오도록 안내함
- precache-manifest 파일에 정의되어 있는 파일들을 미리 하드에 저장시켜 오프라인에서 사용가능 하도록 한다
(이유는 모르겠지만 나는 해당 파일이 없다.)
service-worker.js 파일의 아래 내용일 듯 하다.
크롬개발자모드 > Application > Manifest, Service Workers 항목을 통해 관련 정보 알 수 있다.
크롬개발자모드 > ache > Cache Storage : Service Workers 를 통해 저장된 파일들을 확인할 수 있다.
manifest.json 있고
service-worker.js 도 있고
https:// 로 시작하면 앱 설치하겠냐는 팝업을 띄울 수 있다.
🔎 google play sotre 등록가능한 실제 apk 파일을 만들고 싶다면?
vue 공식 사이트 가이드대로 하면 된다.
https://vuejs.org/#introduction
Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
🔎 manifest.json 과 service-worker.js 설정을 바꾸고 싶다면?
manifest.json 와 service-worker.js 는 빌드가 될 때 마다 파일 내용이 바뀐다.
세부설정을 수정하고 싶으면 manifes.son 파일을 건드리지 않고 vue.config.js 파일을 이용한다.
ex) index.html 은 하드저장X 하려면 최상위 폴더(프로젝트 폴더) 안에 vue.config.js 파일을 생성한 후
아래코드 입력하면 된다.
module.exports = {
pwa: {
name: '님 앱이름',
themeColor: '#4DBA87',
msTileColor: '#000000',
workboxOptions: {
exclude: [/\.map$/, /manifest\.json$/, 'index.html']
}
}
}
발행할 때마다 위의 설정으로 바꿔준다.
exclude: [/\.map$/, /manifest\.json$/, 'index.html']
해당 부분에서 제외할 파일들을 적으면 된다.
구글의 workbox 라는 라이브러리 사용법대로 설정을 바꿔주면된다.
🔎 추가 설정은 workbox 라이브러리 혹은 vue pwa 를 검색하면 된다.
