Vue.js 웹앱 - PWA (Progressive Web App)

1. PWA (Progressive Web App)
    웹사이트를 그대로 앱으로 사용할 순 없을까? 에서 시작
    PWA 앱처럼 보이지만 실은 웹사이트임

2. PWA가 되려면 필요한 2가지
    1) manifest.json
    2) service-worker.js

3. PWA 기능을 제공하는 라이브러리 -> pwa

vue add pwa

    npm run build -> .vue 파일을 html파일로 바꿈, 그래야 브라우저에서 도니까.

4. manifest.json 파일은 웹사이트에 대한 정보를 알려줌

5. service-worker.js 파일은 실제 인터넷이 없을 때에도 앱을 사용 가능하도록 해주는 파일임
    1) 웹페이지 구동에 필요한 html css js img를 하드에 저장해놓음
    2) 앱 구동시 local에 이미 파일이 있으면 그거 그대로 씀

    precache-manifest 파일 보면 캐시 정보들 있음

 

6. Vue는 play store에 등록가능한 실제 APK 만드는 방법도 있음

7. 자주 바뀌는 파일들은 캐시하는게 안좋으니까 PWA 설정에서 캐싱안하도록 할 수 있음
    vue.config.js 파일을 새로 만들어서 pwa 설정 변경 가능