PWA, Service worker에 대한 정리

참고 url : 

http://webactually.com/2017/09/%EC%9B%B9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%8A%94-pwa%EC%9D%B4%EC%96%B4%EC%95%BC-%ED%95%9C%EB%8B%A41/

https://jakearchibald.com/2014/offline-cookbook/

https://medium.com/@Dongmin_Jang/frontend-service-worker-%EC%84%9C%EB%B9%84%EC%8A%A4-

%EC%9B%8C%EC%BB%A4%EA%B0%80-%EB%AC%B4%EC%97%87-2dab5d60f611

https://b.limminho.com/archives/1384

https://developers.google.com/web/fundamentals/primers/service-workers/

http://www.ditoday.com/articles/articles_view.html?idno=19342

-------------------------------------------------------

위 참고 url들을 참고하여,

PWA(Progressive Web App)을 요약하자면, 

무엇이 PWA를 진정한 PWA로 만들어줄까? 사실 별게 없다. 다음 세 개의 요건이 전부다.

1. HTTPS를 운영해야 한다.

PWA는 운영체제의 여러 특별한 권한을 부여받기 때문에, 웹 서버와의 보안 연결은 필수다. 이와 관련하여 도움이 필요하다면 렛츠인크립트Let’s Encrypt라는 무료 SSL 서비스를 확인해 보기 바란다.

2. 웹 앱 매니페스트Web App Manifest가 있어야 한다.

이름만 보고 겁낼 필요는 없다. 단지 사이트와 관련된 정보를 담는 제이슨JSON 파일일 뿐이다. 게다가 파비콘favicon 생성기를 사용한다면 기본 뼈대를 갖춘 매니페스트 파일이 이미 있을 것이다. 브라우저나 검색 스파이더가 찾을 수 있도록 웹 페이지 head부분에 link를 사용하여 참조시키면 된다.

3. 서비스 워커를 사용해야 한다.

아마도 이게 가장 복잡한 단계일 것이다. 하지만 서비스 워커 관련해서는 엄청난 수의 가이드가 있어, 원하는 작업 유형에 맞는 제작 방법을 참고할 수 있다. 그 중에서도 특히 모질라Mozilla에서 제공한 가이드는 아주 훌륭하다.
이게 전부다. 일단 위와 같은 조건을 갖췄다면 그 웹사이트는 프로그레시브 웹 앱이다. 적어도 기술적으로는 그렇다.

-------------------------------------------------------

Service Worker란?

서비스 워커란 웹 브라우저 밖에서 살고 있다.

서비스 워커는 브라우저의 캐시를 뒤져서 클라이언트에게 제공하는 역할을 한다.

즉,

네트워크가 오프라인일 때(인터넷이 끊겼을 때) 

혹은 웹 브라우저를 종료했을 때 

캐시 데이터가 있다면, 

그리고 클라이언트가 무언가 요청을 한다면, 

인터넷을 통해(네트워크를 통해) 데이터를 가져와 보여주는 것이 아니라 

서비스 워커가 캐시의 데이터를 뒤져서 그에 맞는 데이터를 클라이언트에게 보여준다. 

한마디로 이전에 봤었거나 다운로드했던 데이터들을 오프라인인 상태에서도 볼 수 있다는 말이다.

내 생각엔 이 기술은 백그라운드 자원을 사용할 수 있는 기술과도 일맥상통 하는것 같다. (예를들어 Youtube Red같은..)

이 기술을 디자인한 사람은 제이크 아치볼드(Jake Archibald) 라는 사람인데, 이 사람 말로는 일반 웹사이트를 네이티브 앱처럼 만들 수 있다고 한다. (PWA의 코드를 뜯어보니 여기에서도 서비스 워커 기술을 사용한다.)

구글 크롬에서는 웹 앱에 대해서 

Add Install Banners라는 기능을 제공하는데

이 때에도 서비스 워커가 필수다.

이 부분은 좀 더 알아봐야겠다.

사용방법 : 

1. 우선 서비스워커의 js 파일을 만든다.

2. 그리고 서비스워커.js를 불러올 js도 만든다. (ex : main.js)

3 .main.js(예시) 에 코드를 아래와 같이 넣는다. 

//main.js

//jQuery를 사용한다고 가정한다.

//서비스워커.js의 이름이 service-worker.js라고 가정한다.

$(document).ready(function(){

if ('serviceWorker' in navigator && (window.location.protocol === 'https:')) {

navigator.serviceWorker.register('/service-worker.js').then(function(registration) {

//service worker 등록 성공

console.log('ServiceWorker registration successful with scope: ', registration.scope);

}).catch(function(err){

//service worker 등록 실패

alert("sw error : "+err);

console.log('ServiceWorker registration failed: ', err);

});

}

});

4. 그러면 페이지에서 서비스워커를 불러오는 것이다. 다음은 service-worker.js를 코딩해준다.

아래와 같이 코딩해준다.

// service-worker.js

var CACHE_NAME = 'my-site-cache-v1'; //캐시파일명

var urlsToCache = [ 

'/',

'/index.php',

'/wp-content/index.php',

'/wp-config.php',

]; //캐시할 파일경로들

console.log('Started', self);

//설치단계 수행

self.addEventListener('install', function(event) {

self.skipWaiting(); //대기상태를 건너뛰고 서비스 워커를 바로 실행

// Perform install steps

event.waitUntil(

caches.open(CACHE_NAME).then(function(cache) {

console.log('Opened cache');

return cache.addAll(urlsToCache);

})

);

});

self.addEventListener('activate', function(event) {

  console.log('Service Worker Activated', event);

});

self.addEventListener('fetch', function(event) {

  console.log('Service Worker fetch', event);

});

self.addEventListener('push', function(event) {

  console.log('Push message received', event);

  // TODO

  alert("push message");

});

자세한 설명은 내일 다시 정리하는것으로..