PWA 적용하기

PWA (Progressive Web Apps)

모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술입니다. 웹과 앱 모두의 장점을 결합한 제품이다.

특징

전체 화면 모드로 표시 되어 앱과 유사한 외관을 가지고 있어, 일반 웹사이트와는 다르게 앱과 비슷한 사용자 경험을 제공한다.
PWA는 웹 브라우저에서 바로 실행 되므로 사용자는 홈 화면에 아이콘을 추가해 쉽고 빠르게 앱을 방문할 수 있다.
스토어에서 다운로드하고 설치할 필요가 없기 때문에 사용자에게 매우 편리한 기능을 제공한다.
앱처럼 푸시 알림을 보낼 수 있다. (브라우저를 닫고 있는 사용자에게도 푸시 알림을 보낼 수 있어서 사용자와의 접촉 횟수를 늘릴 수 있다.)
https에서만 사용이 가능하기 때문에 일반 인터넷 데이터보다 더욱 보안이 강화되어 있다.
프리캐시 기능이 있어, 사용자가 페이지를 읽고 있는 동안 다음 페이지의 데이터를 읽어 들일 수 있기 때문에 페이지의 표시속도를 향상할 수 있다.
오프라인으로 사용이 가능하다.

적용 방법

PWA 아이콘으로 사용할 이미지 준비 (192x192, 512x512 두 장)
manifest.json파일 생성 후 내용 작성
sw.js파일 생성 후 내용 작성
HTML파일에 manifest.json파일 연결
serviceWorker 지원이 가능한지 확인 후 sw.js파일 등록

{
  "name": "사이트명",
  "short_name": "사이트명 약어",
  "icons": [
    { "src": "./favicon.png", "sizes": "192x192", "type": "image/png" },
    { "src": "./favicon.png", "sizes": "512x512", "type": "image/png" }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#fff",
  "orientation": "portrait"
}

self.addEventListener("install", () => {});

<html>
  <head>
    ...
    <link rel="manifest" href="./manifest.json" />
    <script>
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("./sw.js").then(() => {
          console.log('success');
        }).catch(() => {
          console.log('fail');
        });
      }
    </script>
  </head>
</html>

설치 및 테스트

설치 아이콘이 생긴다. 아이콘 클릭 수 설치 버튼을 누른다.

브라우저 우측 상단 설치 아이콘

앱이 설치된 후 manifest.json에 정의한 아이콘으로 앱 아이콘이 생긴다.

앱아이콘