PWA 프로그레시브 웹앱 핵심기술 6가지

서비스워커 (service worker)

웹 브라우저 안에 있지만 웹 페이지와는 분리되어 항상 실행되는 백그라운드 프로그램이다.

 

• 브라우저와 서버 사이의 상탯값 변경을 감시
• 푸시알림으로 사용자에게 특정 메시지와 댓글 알림을 전송
• 오프라인 상태에서도 작동

 

웹앱 매니페스트 (manifest)

앱 소개 정보와 기본 설정을 담은 JSON 파일

manifest.json

 

• 웹앱의 고유한 제목과 소개글
• 스플래시 스크린
• 화면방향
• 홈화면 아이콘, 브라우저에서 사용할 아이콘
• 배경색 정보

manifest.json

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

<link rel="manifest" href="/manifest.webmanifest">

 

보안 강화 HTTPS 사용

HTTPS (hypertext transfer protocol over secure socket layer)

 

일반 텍스트를 통신하는 HTTP 프로토콜에 비해 암호와와 인증을 거쳐 보안을 강화한 웹 통신 규약

 

• 웹서버와 브라우저 사이에 주고받는 데이터가 암호화
• 해커가 데이터를 가로채도 어떤 내용인지 알수없음
• 전자상거래 등의 결제 시스템 구축시 유용
• 서비스 워커를 사용해서 PWA 배포시 반드시 HTTPS 프로토콜 사용

HTTPS 프로토콜은 라이트하우스 라는 PWA 성능 평가 프로그램에서 인증 받기 위한 의무 사항이다.

홈 화면 추가 기능은 HTTPS 에서만 지원한다.

구글은 HTTPS로 띄우는 페이지에 가산점을 줘서 검색이 더 잘되도록 하고 있다.

 

 

푸시알림

푸시 알림은 사용자의 재방문을 유도하면서 서비스 이용 시간을 늘리는 기능이다.

PWA에서는 푸시 알림에 동의만 했다면 웹 사이트에 한번 방문 하고 떠난 사용자에게도 알림을 보낼 수 있다.

백그라운드 상태에서도 알림 메시지를 보낼 수 있다.

다만 IOS에서는 아직 불가능하다.

 

 

홈 화면에 추가

add to home screen

 

운영체제에 앱처럼 설치되는 기능

 

웹브라우저가 앱설치를 제안하는 조건

• HTTPS 접속
• 매니페스트 등록
  • short_name,
  • name,
  • icons : 192, 512 크기 아이콘 이미지 포하
  • start_url 
  • display: fullscreen, or standalone, or minimal-ui 옵션 중 하나가 설정 되어야함
• 서비스 워커 설치 : 서비스 워커가 브라우저에 제대로 설치 되어있는지 여부 
• PWA 설치 여부 : 이전에 설치되어 있지 않을 경우

별도의 설치 팝업을 설정하지 않아도 서비스 워커와 매니페스트 조건에 맞게 설정되어 있다면 브라우저가 스스로 판단해서

홈 화면에 추가하라고 제안한다.

 

다양한 웹 API

위치 정보, 카메라 등 다양한 API 사용 가능

developer.mozilla.org/ko/docs/Web/API

Web API

 

 

PWA의 필수요소 

서비스워커, 매니페스트, HTTPS

 

PWA의 중요 기능

푸시알림, 홈화면에 추가, 웹 API

 

 

PWA 사례

☕️스타벅스

 

소비자 주문 경험을 더 빠르게 개선하고자 PWA를 지원하는 스타벅스.

인터넷 속도가 느리고 안정되지 않은 지역이 많아 신뢰할 만한 서비스를 제공해야 하는데

오프라인에서도 작동하는 PWA가 그 역할을 수행하고 있다.

 

플랫폼에 종속되지 않고 같은 환경에서 커피를 주문할 수 있는 시스템을 구축한 사례

 

IOS 기준 네이티브 앱 용량 :  113MB

PWA : 233KB

 

가벼운 용량으로 빠른 반응 속도

Starbucks®

 

PWA 의 좋은 사용자 경험

• 오프라인에도 걱정 없는 신뢰성
• 네이트브 앱보다 간단히 설치가능한 편리성
• 강력해진 보안성
• 검색에 잘 노출되는 확장성
• 항상 새것 같은 최신성
• 네이티브 앱 부럽지 않은 사용성
• 네이티브 앱보다 빠른 배포, 실행, 반응속도