PWA 요구사항

1. Manifest JSON 파일

: PWA에서 가장 중요한 것 중 하나이다.
브라우저에게 특정 정보를 줄 수 있으며 애플리케이션이 다르게 표시되고, 또한 홈화면 바로가기 아이콘을 설치할 수 있게 함으로 사용자 인터렉션을 증가시킬 수 있다.

{
	"name" : "게시판  PWA",				
  	"short_name" : "게시판 PWA",			
  	"start_url" : "/",				    
  	"display" : "standalone",			
	"icons":[..]
    
}

name : app의 이름
short name : app단축 이름으로 브라우저 이름이 긴 경우 이 이름을 사용.
start_url : 아이콘 클릭시 로딩페이지
display : 앱처럼 표시될지 여부, 브라우저 URL표시볼수없음
description: 설명
dir : 앱 읽기 방향 (left to right)
icons : 홈 스크린의 icon. 브라우저가 디바이스에서 가장 적당한것 선택.

2. Service Worker

서비스 워커는 캐싱, 백그라운드 동기화 및 푸시 알림과 같은 다양한 기능을 지원하는 PWA의 핵심 기술이다. 기본적으로 기본 브라우저 스레드와 별도로 백그라운드에서 실행되는 JavaScript 스크립트로 웹 앱과 네트워크 간의 프록시 역할을 한다.

    * 프록시(proxy) : 캐시를 사용하여 리소스로의 접근을 빠르게 하기위해 웹 프록시는 웹 서버로부터 웹 페이지를 캐시로 저장하는데 흔히 쓰인다. 
   

2-1 Service Worker 생명주기 (Life Cycle)

install : 서비스 워커 처음 등록 및 업데이트, 캐싱에 관한 설정
fetch : 캐싱된 파일 사용, 네트워크 요청을 가로채서 처리하는 역할을 하는 코드.

→ 캐시된 응답이 있으면 그것을 사용하고 없으면 네트워크에서 가져옴으로 이를 통해 빠른 로딩속도아 오프라인 지원이 가능해짐.
→ event.respondWith : 이부분이 핵심포인트로, 브라우저가 기본적으로 요청을 처리하는 대신 우리가 원하는 방식의 응답이 가능

serviceWorker.js

// 캐시 변수 생성 및 캐싱 적용할 파일들


// install 서비스 워커 처음 등록/업데이트
//  → 캐싱에 관한 설정.
self.addEventListener('install', (event) => {
  const cacheName = 'pwa-cache'

  console.log('Service Worker installing.');
  event.waitUntil(
    caches.open(cacheName).then((cache)=>{
      console.log("Caching all");
      return cache.addAll([
        '/pwa-react/public/favicon.ico',
      ])
    })
  )
});

// fetch 캐싱된 파일 사용
// 모든 네트워크 요청을 가로채서 처리하는 역할을 하는 코드. 

// → 즉, 캐시된 응답이 있으면 그것을 사용하고 없으면 네트워크에서 가져옴으로 이를 통해 빠른 로딩속도와 오프라인 지원이 가능해짐.

self.addEventListener('fetch', event =>{
  log('Fetch ' + event.request.url);
  event.respondWith(
    // → event.respondWith : 이부분이 핵심포인트.
    //    브라우저가 기본적으로 요청을 처리하는대신 우리가 원하는 방식의 응답가능
    caches.match(event.request).then(response =>{
      // → 요청한 리소스가 캐시에 저장되어있는지 확인
      // → → response가 있으면 그대로 반환. 
      //     없으면 fetch(event.request)를 실행해서 네트워크에서 요청을 보냄.
          return response || fetch(event.request);
      })
  );
});

// activate 서비스 워커 활성화
self.addEventListener('activate', (event) => {
  console.log('Service Worker 활성화 되어짐.');
});

// push 서버에서 푸시 알림을 보낼때
self.addEventListener('push', (event) => {
  const options = {
    body: '로그인이 완료되었습니다!', 
    icon: '/logo192.png',
    vibrate: [200, 100, 200],
    tag: 'login-notification'  
  };


  
  // event.waitUntil : 알림이 제대로 표시될때까지 서비스 워커가 종료되지않도록 보장
  event.waitUntil( 
    self.registration.showNotification('로그인 알림', options)
  );
});

3. 아이콘 이미지 파일

홈에 추가 시 아이콘에 들어갈 이미지를 등록해야한다.

4. HTTPs

보안 및 Service Worker의 정상적인 작동을 위해 적용해야한다.