[PWA, Vue.js] Vue를 사용해서 PWA 를 만들어보자! -1
PWA 란?
- PWA : Progressive Web Applications
- Web Application 과 Native Application(IOS or Andorid 등) 기능 모두의 이점을 갖도록 개발된 웹 앱
- 여러 기술들이 사용됨.
- Service Worker
- Web App Manifest
- Lighthouse
- …. 기타 여러 기능(HTTPS 등)
사용하는 기술 일부에 대해서
Service Worker
- 웹사이트 백그라운드에서 실행되는 요소
- 푸시기능
- Asset 들을 캐싱(오프라인 등 활용)
- https://developers.google.com/web/fundamentals/primers/service-workers/
Web App Manifest
-
화면의 구성요소 선언
-
manifest.json
{
"short_name": "Weather",
"name": "Weather: Do I need an umbrella?",
"description": "Weather forecast information",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
],
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6"
}
옵션 설명
- short_name: 사용자 홈 화면에서 아이콘 이름으로 사용
- name: 웹앱 설치 배너에 사용
- icons: 홈 화면에 추가할때 사용할 이미지
- start_url: 웹앱 실행시 시작되는 URL 주소
- display: 디스플레이 유형(
- fullscreen : 전체 화면
- standalone : 브라우저의 요소들을 감춘 Native Application처럼 보이는 화면
- minimal-ui : 일부 브라우저 기능 제공 (크롬 모바일만 지원)
- browser : 브라우저와 동일한 화면
- theme_color: 상단 툴바의 색상
- background_color: 스플래시 화면 배경 색상
- orientation: 특정 방향을 강제로 지정(landscape, portrait 중 설정)
manifest.json import
<link rel="manifest" href="/manifest.json">
- https://web.dev/add-manifest/
HTTPS
- https 만 제공
- 단,
localhost
,127.0.0.1
은 제공함.(Chrome에서 확인가능)
- 단,
- Certbot 사용하면 쉽게 확인 가능
- 또는 Github Page 를 사용하는 것도 방법
Lighthouse
- 구글에서 개발한 크롬 개발자도구
- PWA 요소들을 손쉽게 확인해줌
참고링크
- https://altenull.github.io/2018/03/09/%EC%9B%B9%EC%95%B1-%EB%A7%A4%EB%8B%88%ED%8E%98%EC%8A%A4%ED%8A%B8-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9B%8C%EC%BB%A4-Web-App-Manifest-Service-Worker/
- https://www.freecodecamp.org/news/an-explanation-of-progressive-web-apps-for-the-non-pwa-crowd-8a400e275ea1/