Progressive Web App & 셋팅 - WastepaperBasket/Vue.js GitHub Wiki
모바일 앱처럼 만들 수 있음!
PWA를 사용하시면 웹사이트를 그대로 모바일앱처럼 쓸 수 있게 만들 수 있습니다.
실상은 "웹페이지 홈화면에 바로가기 추가"를 고상한 말로 표현해놓은 건데
일반 유저는 앱이라고 생각할듯
웹브라우저 주소창이 제거된 상태로 보여주니까요.
그대로 앱처럼 쓸 수 없을까?
라고 등장한게 PWA등장
사실 브라우저로 뜨는거임
- manifest.json
- service-worker.js
PWA 제공하는 라이브러리가 있음!
vue add pwa
하게되면 registerServiceWorker.js가 생긴다.
그렇다면 우리가 프로젝트 build할때
자동으로 manifest.json
service-worker.js 두개가 생김
manifest.json
- 앱정보 담는 파일
- 색상 아이콘 등등
service-worker.js
- 실제 모바일 앱은 인터넷 없어도 사용가능
- 고안해서 나온게 이 파일임!
-
웹 페이지 구동에 필요한
html css js img 하드에 저장해놓음 -
하드에 있으면 그거 써주세요 라는거임
- manifest.json 내용 잘 있고
- service-worker.js 이것도 있고
- http://로 시작하면
EX_ index.html은 하드저장 안하려면 ...
vue.config.js
module.exports = {
pwa: {
name: '님 앱이름',
themeColor: '#4DBA87',
msTileColor: '#000000',
workboxOptions: {
exclude: [/\.map$/, /manifest\.json$/, 'index.html']
}
}
}
추가 설정은 workbox라는 라이브러리
혹은 vue pwa 검색필요
play store 등록 가능한 실제 apk 파일은??
-vue 공식 홈페이지