안녕하세요, 주인장입니다.
제가 하고 있는 프로젝트에서 pwa를 이용해 예약 시스템 구현할 일이 생겨가지고 react에서 서버 연결은 못하고 구현을 멈췄던 디버깅 어마무시한 pwa를 뷰에서 다시 꺼내게 되었습니다...네네...
제 Vue.js 프로젝트에 반영하는 과정 시작해보겠습니다.
1. PWA란 무엇인가??
프로그래시브 웹앱의 줄임말로, 웹기술로 만드는 앱입니다. 네이티브 앱을 개발하는 것은 상당히 어려운데요, 하지만 PWA를 이용하면 빠르게 개발이 가능합니다. 웹에서 푸시 알림이나 오프라인 지원과 같은 네이티브 앱의 특징도 전부 제공이 가능합니다. PWA가 반영된 우리가 잘 아는 웹사이트는 트위터, 스타벅스가 있습니다.
*번외로, 네이티브 앱과 PWA의 차이는 무엇일까요?
네이티브 앱은 일반적으로 해당 플랫폼에 특화된 프로그래밍 언어로 만드는 경우가 많습니다. 또한 PWA는 화면에 저장되면 해당 브라우저 내에 실행되며, 실제 네이티브 앱 처럼 동작합니다.
2. PWA의 장점은 무엇인가?
내가 생각할 때에는 오프라인에서도 푸시 알림이 가능하다는 것이다. 또한 웹기술로도 만들 수 있으며, 반응형이기 때문에 여러개의 화면에서도 잘 작동한다.
3. PWA의 세 가지의 주요 구성요소 안내
PWA를 내 프로젝트에 설정하는데에는 3가지 작업이 필요하다.
- 보안 연결(HTTPS) : PWA는 신뢰할 수 있는 연결 상태에서만 동작하기 때문에, 보안 연결을 통해 서비스를 제공해야 합니다.
- 서비스 워커: 서비스 워커는 백그라운드에서도 실행되는 스크립트이다.
- manifest.json : pwa가 표시되고 기능하는 방식에 대한 정보들이 포함되어 있는 것이다. 이 파일에서 pwa의 이름, 설명, 아이콘, 색상을 지정할 수 있다.
본격적으로 Manifest.json 파일 작성하기
매니페스트 파일이란, pwa 소개와 기본 설정을 담았다. 해당 브라우저가 Manifest.json파일을 읽어 pwa라는 것을 인식한다.
https://www.simicart.com/manifest-generator.html/ 을 참고하여 본인이 원하는 아이콘과 manifest.json 파일을 얻을 수 있다.
Manifest의 display 옵션
1) fullscreen: 기기의 최대 화면으로 보여주기
2) standalone: 가장 많이 사용하는 일반적인 모드
3) minimal-ui: 상단에 주소만 추가해 보여주기
4) browser: 웹 브라우저와 동일하게 보여주기
manifest.json의 경로
해당 파일은 public 에 넣어주고, icons 디렉을 생성해 추가한 아이콘들을 넣어주면 된다.
index.html
<html lang="en">
<head>
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png">
<link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png">
<link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png">
<link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png">
</head>해당 파일에 태그에 넣어준다!
메니페스트를 추가하고, 아이폰 사파리의 경우 아이콘을 불러 오지못하므로, import를 해주는 부분이다.
서비스 워커 등록
서비스 워커란, 웹 안에 있지만 웹 페이지와는 분리되어 항상 실행되는 백그라운드 프로그램을 말한다. 서비스 워커는 브라우저와 서버 사이에서 상댓값의 변경을 감시하고, 푸시 알림으로 사용자에게 특정 메세지와 댓글 알림을 보낸다.
1) 먼저 npm 모듈을 설치해준다.
npm i register-service-worker
npm i @vue/cli-plugin-pwa설치가 완료되면 src 에 registerServiceWorker.js 를 생성하여 아래 코드를 적어준다.
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}3) 해당 파일을 main.js에서 import를 해준다.
import './registerServiceWorker'
