PWA의 필수 항목 3가지 아래 3가지를 충족해야 PWA가 될 수 있다.

 

1. 웹 앱 매니페스트 (Web App Manifest)  =>직접 작성

2. 서비스 워커 (Service Worker)  (Vue-Cli 3  PWA 템플릿은 워커박스를 기본으로 사용한다. )

서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹페이지와는 별개로 작동하며 웹페이지 또는 사용자의 인터랙션이 필요하지 않은 기능만 제공하고 있습니다.

https://so-so.dev/web/service-worker/

 

3. HTTPS 프로토콜 (파이어 베이스 호스팅 https 사용)
 

 

 

기본적으로  nodejs 설치 및 vue 와 Vue CLI  설치 되어 있어야 한다.

nodejs 설치

https://nodejs.org/ko/download/

 

nodejs 설치 후

vue 설치

npm install vue

명령을 사용하여 설치한 버전 번호를 확인합니다(vue --version).

 

 

Vue CLI를 설치하려면 npm을 사용합니다. 업그레이드하려면 -g 플래그를 사용하여 전역으로 설치해야 합니다(vue upgrade --next).

 

npm install -g @vue/cli

 

 

 

 

 

 

PWA 만들기 

 

1. Vue cli 로 vue 프로젝트 생성

& vue create sample-pwa

 

 

 

 

 

 

 

 

 

 

 

 

2. vue 디자인 을 위해  vuetify 추가 설치 후 개발 ,   굳이 설치할 필요는 없다. 

여기서는 버전 2로 선택 하였다.

 

$ vue add vuetify

 

 

 

 

 

 

 

 

3. 매니 페스트 작성하기

 

public/mainfest.json

mainfest.json 작성 샘플

https://github.com/SAP-samples/openui5-pwa-sample/blob/main/src/manifest.json

 

작성방법 : https://365kim.tistory.com/169

{ "name": "sample-pwa 웹앱입니다.",
  "short_name": "sample-pwa 웹앱",
  "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"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#FFFFFF",
  "theme_color": "#FFFFFF"
}

 

 

 

 

 

 

 

4. PWA 테스트 및 배포 준비하기

 

1) 서비스 워커의 작동 여부 테스트를 위해 server

2) 파이어베이스 웹 호스팅을 위해

 

npm install -g serve
npm install -g firebase-tools

3) 빌드하고 서비스 워크 동작 확인하기

npm run build

 

다음과 같은 dist 빌드 디렉토리가 생성된다.

 

 

4) 빌드한 앱을 실행해 보기

 

serve dist

 

브라우저 창에서  F12 를 눌러  서비스 워커가 보이면 성공

 

 

 

개발 테스트 할때는  반드시 clear storage 를 버튼을 눌러 삭제합니다.

 

 

 

 

 

 

 

 

 

 

 

 

5. Https로 파이어베이스 호스팅에 PWA 배포하기

 

파이어베이스 생성 갯수는 10개까지 가능하며, 주의 할 사항은 프로젝트 삭제를 하면  새로 생성 되지 않는다.   예 )프로젝트 1개 삭제하면  9개 까지 사용.

따라서 기존 프로젝트 재활용 방법이나 새계정으로 이용.

10G 무료, 월 10G 트래픽 무료

 

 

1)  firebase 사이트 에 가서 프로젝트를 만든다

https://console.firebase.google.com/

 

 

 

 

 

 

 

2) 다음 명령어를 통해  firebas login 한다 .    

 

$ firebase login

 

명령어가 나오면  -y

 

 

 

3) 파이어베이스 초기화하기

firebase init

 

준비 되었는가? y

 

 

파이어베이스 hosting 선택

 

 

존재하는 프로젝트 선택

 

 

기존에 생성한 프로젝트 목록이 보인다.

여기서는  sample-pwa 선택

 

다음 공용 디텍터리 설정하는 물음에 dist 를 입력하고 엔터

vue 는 SPA 싱글이나깐 Y

깃허브와 연동해서 자동 빌들 할것인가 N

기존에 프로젝트에 덮어씌우기할경우 메시가 나오는데, 덮어씌우기 면 Y,

 

 

 

 

1) 프로젝트 빌드
npm run build

2) 빌드한 결과물 웹브라우저로 확인
serve dist

3) 파이어베이스 호스팅 서버에 업로드
firebase deploy

 

 

4) 업로드가 완료하면 배포한 서버 주소가 나오는데,

https://sample-pwa.web.app

항상 배포후에는 웹브라우저에서  캐시 파일을 삭제해야지만 현재 배포된 결과물을 제대로 볼수 있다.

 

 

 

 

 

 

 

6. PWA 성능 테스트하기

 

구글 웹스토어에서 Lighthouse Chrome 검색후 설치

https://chrome.google.com/webstore/search/Lighthouse%20Chrome?hl=ko

 

 

Lighthouse Chrome 확장 프로그램에서 검색엔진 최적화 감사 카테고리 출시

=>

https://developers.google.com/search/blog/2018/02/seo-audit-category-in-lighthouse?hl=ko

 

 

 

 

 

 

 

 

참조 : Do it! 프로그레시브 웹앱 만들기