Vue - PWA를 이용하여 웹사이트를 앱으로 발행하기

PWA은 사실 "웹페이지 홈화면에 바로가기 추가"이다. 그러나 주소창이 제거된..

 

PWA 라이브러리 설치하기

vue add pwa

 

이제 따로 무언가 할 필요 없이 npm run build를 할 때 manifest.json과 service-worker.js가 자동으로 생성될 것이다.

npm run build를 하면 dist 폴더가 따로 생성되는데

• manifest.json : 앱정보를 담는 파일
• service-worker.js : 실제 모바일앱은 인터넷 없어도 사용가능한데 그런 기능을 가능하게 만들어주는 역할을 한다.
  • html, css, js, img 파일들을 하드에 저장해놓고 그 파일들을 불러오게 한다.

PWA 설정바꾸기

vue.config.js 파일을 프로젝트 폴더 안에 하나 생성한다.

구글의 workbox라는 라이브러리 사용법대로 설정을 채워주면 되는데 앱의 이름, 색상도 커스터마이징 가능하고 exclude 항목에는 캐싱하기 싫은 특정 파일들을 입력해주면 된다.

 

예시) index.html의 경우 자주 변경되니 하드에 저장하지 않으려면

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