[PWA, Vue.js] Vue를 사용해서 PWA 를 만들어보자! -1

16 Mar 2020 front  

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/

Related Posts