[Vue/코딩애플/part3] 10. Progressive Web App (PWA)

📌 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 폴더

 

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

 

 

🔎  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 를 검색하면 된다.