[Vue] PWA, manifest.json, service-worker.js

 PWA(Progressive Web App)

 

Progressive Web App을 사용하면 웹사이트를 그대로 모바일앱처럼 쓸 수 있다.

PWA를 발행하기 위해 먼저 라이브러리를 설치한다.

vue add pwa

PWA의 구성요소로 manifest.json과 service-worker.js있다.

manifest.json은 앱의 이름, 아이콘, 테마색상 등을 설정할 수 있고,

service-worker.js는 어떤 html, css, js 파일들을 캐싱할건지 명시하는 파일이다. (오프라인 이용가능)

두 파일은 빌드할 때 자동으로 생성된다. (dist 폴더안에 있는 파일들을 올려주면 된다)

npm run build

PWA의 설정을 바꾸고 싶으면 vue.config.js라는 파일을 프로젝트 폴더안에 생성한다.

module.exports = {
  pwa: {
    name: '앱이름',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    workboxOptions: {
      exclude: [/\.map$/, /manifest\.json$/, 'index.html']
    }
  }
}

앱의 이름, 색상을 커스마이징하고 exclude항목에 특정 파일들을 캐싱하기 싫을 때 입력해준다.

 

그리고 .apk 파일로 모바일 앱을 발행하고 싶을 때는 아래의 링크를 참조한다.

https://v3.vuejs.org/guide/mobile.html#introduction

Mobile | Vue.js