PWA(Progressive Web App) 란?

Progressive Web App은 웹과 앱의 장점을 모두 취하고자 합니다. 본질은 ‘웹’이지만 ‘앱 같은 웹’을 지향합니다. 물론 스마트폰 초창기에도 ‘웹앱’이라는 개념은 있었지만, PWA는 그 이름에서 알 수 있듯 더 진보한 개념이고 ‘네이티브 앱’에 가까운 경험을 제공하는 웹을 목표로 합니다.

PWA는 결코 모바일만을 위한 접근 방법이 아닙니다. 다양한 기기, 운영체제에 제공될 예정입니다.
현재는 모바일 뿐만아니라 데스크탑에서도 사용 가능합니다.
비슷한 서비스로는 가속 모바일 페이지(Accelerated Mobile Pages, AMP)가 있습니다.

• 데스크톱 프로 그레시브 웹 앱 (Chrome OS, Linux, Windows, Mac은 지원 예정)
  
• AMP
  
  

현재 이 브라우저도 PWA 를 적용 해놓은 상태입니다.

특징

1. 프로그레시브 - 점진적인 개선을 통해 작성되므로, 모든 사용자에게 적합합니다.
   
2. 반응형 - 데스크톱, 모바일, 태블릿 등 모든 폼 팩터에 맞습니다.
   
3. 연결 독립적 - 서비스 워커를 사용하여 오프라인이나 느린 네트워크에서 작동하도록 향상됩니다.
   
4. 앱과 유사 - 앱 스타일의 상호작용 및 탐색 기능을 사용자에게 제공합니다.
   
5. 최신 상태 - 서비스 워커 업데이트 프로세스 덕분에 항상 최신 상태로 유지됩니다.
   
6. 안전 - HTTPS를 통해 제공되므로 스누핑이 차단되며, 콘텐츠가 변조되지 않도록 보장합니다.
   
7. 검색 가능 - ‘애플리케이션’으로 식별되므로, 검색 엔진에서 검색이 가능합니다.
   
8. 재참여 가능 - 푸시 알림과 같은 기능을 통해 쉽게 재참여가 가능합니다.
   
9. 설치 가능 - 앱 스토어에서 설치할 필요가 없고 브라우저를 통해 홈 화면에 유지할 수 있습니다.
   
10. 링크 연결 가능 - URL을 통해 손쉽게 공유할 수 있으며 복잡한 설치 작업이 불필요합니다.
    

• PWA fundamentals
• 소개 영상
  
  

PWA 관련 최신 기술

1. Service Worker

Service worker는 브라우저가 백그라운드에서 실행하는 스크립트로 기본적으로 웹 응용 프로그램, 브라우저 및 네트워크 사이에있는 프록시 서버의 역할을합니다. 현재 푸시 알림 및 백그라운드 동기화와 같은 기능은 이미 제공되고 있으며, 향후 서비스 워커는 주기적 동기화 또는 위치 기반 서비스 LBS(Location Based Service)와 같은 다른 기능을 지원할 수 있습니다. 그리고 보안상의 이유로 HTTPS를 통해서만 실행됩니다.

• 지원 브라우저
• 동작 및 디버깅
  chrome://inspect/#service-workers
  chrome://serviceworker-internals/

서비스 워커 수명 주기

웹페이지에서 자바스크립트를 이용하여 서비스 워커 파일을 등록해야 합니다.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(success) {
      console.log('Service Worker register success', success);
    })
    .catch(function(error) {
      console.log('Service Worker register fail', error);
    });
}

서비스 워커를 등록하면 브라우저가 백그라운드에서 서비스 워커 설치 단계를 시작합니다.

// 서비스 워커 설치
self.addEventListener('install', function(event) {
  console.log('Service Worker Install');
  event.waitUntil(
    caches.open('cache-name').then(function(cache) {
      // 캐싱할 static 웹 자원(js, img, css 등)
      return cache.addAll([
        '/',
        '/public/img',
        '/public/js/app.min.js'
      ]);
    }).then(function(){
      console.log('success');
    }).catch(function(error){
      console.log('error', error);
    })
    // 모든 파일이 성공적으로 캐시되면 서비스 워커가 설치됩니다. 
    // 어느 파일 하나라도 다운로드하지 못하면 설치 단계가 실패합니다. 
  );
});

다음은 서비스 워커 fetch 와 activate 이벤트입니다.

self.addEventListener('fetch', function(event) {
  // 서비스 워커를 설치하고 사용자가 다른 페이지로 이동하거나 새로 고친 후에 
  // 서비스 워커가 fetch 이벤트를 수신하기 시작합니다.
  console.log('Service Worker Fetch');
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        return response || fetch(event.request);
        // 해당 request 에 상응하는 캐쉬가 있으면 리턴해주고 없으면 fetch 로 자원을 얻습니다.
      })
      .catch(function(error) {
        return console.log(error);
      })
  );
});

self.addEventListener('activate', function(event) {
  // activate 콜백 단계에서 캐시 관리를 하는 이유는 설치 단계에서 
  // 이전 캐시들을 모두 완전 삭제하면 모든 현재 페이지를 제어하는
  // 이전 서비스 워커가 갑자기 해당 캐시에서 파일을 제공하지 못하게 되기 때문입니다. 
  var newCacheList = ['rc-with-lineworks'];

  event.waitUntil(
    caches.keys().then(function(cacheList) {
      return Promise.all(
        cacheList.map(function(cacheName) {
          if (newCacheList.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
          // 서비스 워커의 모든 캐시를 반복 탐색하고 
          // 캐시 newCacheList 에 정의되지 않은 캐시를 삭제합니다.
        })
      )
    }).catch(function(error) {
      return console.log(error);
    })
  );
});

관련 라이브러리

• sw-toolbox
• sw-precache
• workbox
  
  

2. Manifest (Web App Manifest)

웹 앱 매니페스트는 쉽게 설명하면 앱에 대한 정보를 담고 JSON 파일입니다.
사용자가 시작할 수 있는 항목을 지시하고, 시작 시의 모습을 정의할 수 있습니다.

• 표준 스펙

{
  "short_name": "app",  // 사용자 홈 화면에서 아이콘 이름
  "name": "pwa app", // 웹앱 설치 배너에 사용
  "icons": [  // 홈 화면에 추가할때 사용할 이미지
    {
      "src": "/img/app192x.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/img/app512x.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "theme_color": "#fdfdfd"  // 상단 툴바의 색상
  "background_color": "#ffffff",  // 스플래시 화면 배경 색상
  "start_url": "/",  // 웹앱 실행시 시작되는 URL 주소
  "display": "standalone",  // 디스플레이 유형(fullscreen, standalone, browser ...)
  "orientation": "portrait"  // 특정 방향을 강제로 지정(landscape, portrait)
}

• iOS 11은 웹 앱 매니페스트를 지원하지만 아직 아이콘 지정 방법을 지원하지 않습니다.
  지금은 iOS 에서 아래 예제 처럼 사용해야합니다.
  

<link rel="sapple-touch-ico" sizes="192x192" href="icon.png" />

• Apple’s documentation
  
  

3. App Shell

애플리케이션 셸(또는 앱 셸) 아키텍처는 Progressive Web App을 빌드하는 방법 중 하나입니다.
앱 ‘셸’은 사용자 인터페이스를 구동하는 데 필요한 최소한의 HTML, CSS 및 자바스크립트입니다.
오프라인으로 캐시되면 재방문하는 사용자에게 즉각적이고 안정적이며 우수한 성능을 보장할 수 있습니다. 즉, 애플리케이션 셸은 사용자가 방문할 때마다 네트워크에서 로드되지 않습니다. 필요한 콘텐츠만 네트워크에서 로드합니다.

앱 셸의 핵심 구성 요소

빠르다고 느낄 수 있어야 하며 접속 네트워크 환경이 좋지 않더라도 언제나 동작해야 합니다.

Header with a title, and add/refresh buttons
Container for forecast cards
A forecast card template
A dialog for adding new cities
A loading indicator

• example

예제

https://github.com/goldenthumb/pwa-examples

Reference

• PWA 소개
• 서비스워커 소개
• 매니페스트
• 앱 셸 모델