PWA

yb·2021년 4월 23일

PWA 기능 pwa 서비스워커

WEB

목록 보기

1/3

PWA (Progressive web app)

이게뭐야?

PWA는 웹 브라우저 API 및 기능을 사용하여 크로스 플랫폼 웹 애플리케이션에 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 앱

웹 앱이 약간 확장한 형태로 구성되기 때문에 복잡한 요구사항을 충족할 수 없다.
때문에, 하이브리드 앱 또는 네이티브 앱의 대체제로 보기는 어렵다.

구성

웹앱과는 다르게 아래의 기능을 포함해야 한다.

Secure context(HTTPS)
웹 애플리케이션은 보안 네트워크를 통해 제공되어야한다.
대부분의 기능이 HTTPS가 설정되어야만 사용할 수 있다.
Service workers (핵심)
서비스워커는 웹 브라우저가 네트워크 요청 또는 리소스를 캐싱하는 방법을 가로채고 제어할 수 있는 스크립트.
서비스 워커를 통해 오프라인 환경을 만들 수 있다.
Manifest file
앱이 사용자에게 표시되는 방식을 제어
앱 이름, 시작 URL, 아이콘 및 웹사이트를 앱과 유사한 형식으로 변환하는 데 필요한 설정을 가진다.

아이콘 관련 참고 사이트
realfavicongenerator

개념

PWA는 하나의 앱이라기보다는 '웹 브라우저(Chrome, Safari, FireFox 등)을 특정 URL을 감싼 형태'가 가깝다.

쉽게 애기해서 바로가기 링크를 앱처럼 만들어서 사용하는 것이다.
(실제로 화면을 그리거나 Native 기능은 모두 설치하게된 브라우저가 동작한다.)

즉, 브라우저에서 제공되는 UI가 제거된 형태로 특정 URL을 동작하는 방식이다.

여기서 핵심은 서비스워커(Service-Worker)이다

Google / Service Worker: an Introduction
MDN Service Worker

서비스 워커는 아래와 같은 서비스를 제공한다.

HTTP/HTTPS 요청을 가로 채서 앱이 캐시, 로컬 데이터 저장소 또는 네트워크에서 제공되는 항목을 결정 할 수 있다.
서버에서 푸시 메시지를 수신 (Web Push)
브라우저가 네트워크 연결 유무에 따라 일련의 작업을 보류하여 오프라인 상태에서 작업 할 수 있도록 한다.

이를 통해 기존 웹앱과 다른 사용자경험을 제공할 수 있다.

컨셉

1) 서비스 워커 등록
2) 이벤트 트리거
3) 유후 상태
4-1) 네트워크에 대한 응답으로 fetch이벤트가 요청을 가로채 적절한 응 처리
4-2) 유후 시간이 지나면 자동으로 중지

기능

앱 기본 설정

Manifest file을 통해 앱 이름, icon, 방향, 언어 등 기본설정을 할 수 있다.

{
    "background_color": "#fff",
    "display": "standalone",
    "orientation":"portrait",
    "theme_color": "#fff",           
    "short_name": "PWA Name",
    "name": "PWA Name",
    "description": "Description or purpose of your PWA",
    "lang": "en-US",
    "icons": [
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
    "start_url": "index.html?launcher=true"
}

오프라인 모드

오프라인 모드는 화면에 필요한 앱 셸(정적 콘텐츠)을 서비스 워커를 통해 브라우저 캐시 영역에 저장하여 오프라인 상태에서도
404 에러가 아닌 앱 셸을 화면에 그린다.

// self는 ServiceWorkerGlobalScope로 브라우저의 window 객체와는 다른 객체임.
self.addEventListener('install', function (event) {
  // 서비스 워커가 설치 될때 발생
  // 오프라인 상태에서 필요한 리소스를 미리 가져와 캐시하는데 유용
  event.waitUntil( // 작업자의 설치 단계가 끝났음을 알린다.
    caches.open('my-cache-v1') //캐시 인스턴스를 요청
      .then(function (cache) {// 캐시 인스턴트를 받아서
        return cache.addAll(['/', '/styles/main.css', '/scripts/main.js']); // 캐시 등록
      })// 
  );
  
});

지원 유무

현재 접속한 브라우저가 어떤 기능을 지원하는지 아래의 링크에서 확인할 수 있다.
What Web Can Do Today?

로컬 테스트 시

자체 서명한 인증서로 로컬 테스트 진행 시
Failed to registser a serviceWorker: An SSL certificate.. 관련 에러 발생
개인적으로 FireBase 호스팅을 통해서 진행하였으나,
자체 서명된 인증서로 로컬 서버로 테스트를 원하는 경우

testing-service-workers-locally-with-self-signed-certificates

코드랩

https://pwafire.org/developer/codelabs/pwafire/

개발시 활용

pwafire API 라이브러리
VS Code Extension vscode 플러그인

Reference

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
https://developers.google.com/web/updates/2015/12/getting-started-pwa

다음 포스트

PWA

WEB