[vue.js] Progressive Web App & 셋팅

스트링·2024년 4월 4일

instagram vue

vue 인스타그램

목록 보기

13/14

사이트를 앱으로 발행하려면 어떻게 해야할까?

그럴때는 PWA를 사용하면댐ㅋprogressive web app)

현재는 웹이긴 하지만 사실상 인스타를 클론코딩한 만큼 앱으로 안만들기 너무 아까움;;

그래서 그대로 앱으로 쓸 수는 없을까…?

→ PWA

사이트를 그냥 그대로 설치로 만드는거임

이렇게 사진처럼 바로 설치할수 있는게 PWA의 장점임

실은 웹사이트가 뜨는거인데 상태바가 전부 제거된 웹이라고 생각하면댐

PWA

그래서 PWA 어뜨케 하는건데….;

지금 시작합니다

PWA가 작동하려면 파일두개가 필요함

manifest.json
service-worker.js

이 두 파일이 있는 웹서비스 같은경우 크롬에서 자동으로 인식해서 위의 설치 화면처럼 안내가 감

근데 직접 파일들을 만들지는 않을거고 라이브러리를 활용할거임

❯ vue add pwa

ㄱㄱ

라이브러리를 설치하면 register 어쩌구 파일이 생겼을거임

그럼 잘 설치 된겨

그럼 우리 프로젝트를 build 할때 자동으로 manifest.json, service-worker.js 파일을 생성해줄거임

한번 해볼까요?

❯ npm run build

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

터미널에서 다음 코드를 입력하면 배포용 html을 생성해준다

성공적으로 build가 이뤄지면 dist라는 폴더가 하나 생길거임

여기에 배포가 가능한 html css js 완성본이 다 담긴다

dist 폴더안에 manifest.json, service-worker.js 파일도 생겼음을 확인할 수 있다

이를 통해서 우리 웹은 PWA가 가능함~!

manifest.json

그래서 이 친구가 뭐하는 건디

앱정보를 담는 파일이라고 생각하면댐

{
    "name":"vuestagram", //앱이름
    "short_name":"vuestagram",
    "theme_color":"#4DBA87", //브라우저 색상
    "icons":[{"src":"./img/icons/android-chrome-192x192.png", //설치시 아이콘
    "sizes":"192x192","type":"image/png"},
    {"src":"./img/icons/android-chrome-512x512.png",
    "sizes":"512x512","type":"image/png"},
    {"src":"./img/icons/android-chrome-maskable-192x192.png",
    "sizes":"192x192","type":"image/png","purpose":"maskable"},
    {"src":"./img/icons/android-chrome-maskable-512x512.png",
    "sizes":"512x512","type":"image/png","purpose":"maskable"}],
    "start_url":".","display":"standalone","background_color":"#000000"
}

이런식으로 이름, 아이콘, 색상… 등등의 정보가 담겨있고 수정도 가능하다

service-worker.js

사실 이 친구가 더 중요한 정보를 담고있음

구글의 워크박스라는 라이브러리를 담고 있다…

그렇게 이해하면 댈듯

실제 모바일앱은 인터넷 없어도 사용이 가능하다(열리는 것만)

이거를 구현하려고 한게 구글의 워크 박스이다

웹같은 경우에 인터넷이 연결 안되어있으면 그냥 구동 자체가 안댐

그치만 앱의 경우 열리고 작동하게 해주는게 service-worker.js

service-worker.js가 하는 일

캐시는 하드 네트워크는 서버라고 생각하면 편할듯

웹 페이지 구동에 필요한 html css js img 파일을 하드에 저장해 놓음
서버에서 받아 오는게 아니구 하드에 있는거 그냥 쓰라고 하는게 서비스 워커가 하는일

발행을 한다면 크롬의 개발자 도구에서 이러한 Manifest, Service Workers를 통해

이 웹은 PWA를 사용할수 있구나도 더블체크가 가능함

manifest.json 내용도 잘 있고

service-worker.js도 잘 있다면

http://로 시작해서 들어가면 웹도 잘 열림 == 배포가 개쉽다

실제 play store에 등록가능한 apk 파일은 vue 공식사이트에서 어떻게 하라고 나와있음

저런거 쓰면 apk 파일로 변환해줌ㅋ

PWA 설정 바꾸기

Manifest, Service Workers은 갱신이 될때마다 파일 정보가 바뀜

예를 들어 index.html은 자주 바뀌니 하드저장 말고 따로 빼고싶다면?

파일 만들어서 코드를 따로 짜는 방법이 있다.

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

최상위 폴더에 vue.config.js 파일을 만들고 다음 코드를 넣으면 된다.

이게 Manifest, Service Workers 세팅해주는 파일임

구글의 workbox 라는 라이브러리 사용법대로 설정을 채워주면댐

앱의 이름, 색상 이런 것도 커스터마이징 가능하고

exclude 항목에는 특정 파일들을 캐싱하기 싫으면 저기다가 입력해주면 댐

정규식도 잘 먹음