sanguk.dev
작성완료
PWA 적용하기

PWA 적용하기

PWA는 모바일 사이트에서 네이티브 앱과 유사한 사용자 경험을 제공하며, 전체 화면 모드, 푸시 알림, 오프라인 사용 등의 특징이 있다. 적용 방법으로는 아이콘 준비, manifest.json 및 sw.js 파일 생성, HTML 파일 연결 등이 포함된다. 설치 후 아이콘이 생성되어 사용자가 쉽게 접근할 수 있다.

Web Front DeveloperPWA

PWA (Progressive Web Apps)

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

특징

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

적용 방법

  1. PWA 아이콘으로 사용할 이미지 준비 (192x192, 512x512 두 장)
  2. manifest.json파일 생성 후 내용 작성
  3. sw.js파일 생성 후 내용 작성
  4. HTML파일에 manifest.json파일 연결
  5. serviceWorker 지원이 가능한지 확인 후 sw.js파일 등록
css
{
  "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"
}
coffeescript
self.addEventListener("install", () => {});
xml
<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에 정의한 아이콘으로 앱 아이콘이 생긴다.

앱아이콘