웹인 듯 웹 아닌 앱 같은 너 - PWA

PWA(Progressiv Web App)

장점

• 다양한 앱스토어에 출시하기 위한 과정을 거치지 않아도 됨

• 웹 기술을 사용해서 다양한 플랫폼을 지원하는 서비스를 개발할 수 있음

• 기존의 웹사이트를 사용하기 때문에 추가로 유지보수에 용이함

• 웹브라우저를 통해 설치없이 바로 바탕화면에 앱 아이콘 추가가 가능함

네이티브 앱이 뭐죠

Manifest.json 생성

{
  "name": "앱 이름",
  "short_name": "짧은 앱 이름",
  "icons": [
    {
      "src": "/icon_x128.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "/icon_x144.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "/icon_x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#f2f2f2"
}

• name: 웹 앱의 이름입니다.

• short_name: 홈 화면에 표시할 약식 이름입니다.

• description: 앱이 무엇을 하는지 설명하는 간략한 문장입니다.

• icons: 아이콘들의 정보(URL, 크기, 타입)입니다. 사용자의 기기에 적합한 것을 선택할 수 있도록 여러 개를 추가하시기 바랍니다.

• start_url: 앱이 시작할 때 실행할 초기 문서입니다.

• display: 앱을 표시하는 방식입니다(전체화면(fullscreen), 독립형(standalone), minimum-ui, browser)

• theme_color: 운영 체제에 의해 사용될 UI를 위한 주요 색상입니다.

• background_color: 스플래시 화면과 설치하는 동안 사용될 배경 색상입니다.

html과 연결

<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />

Services Worker

const CACHE_NAME = "cache-v1";
// 캐싱할 파일
const FILES_TO_CACHE = [
    "index.html",
    "offline.html"
];

// 상술한 파일 캐싱
self.addEventListener("install", (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME).then((cache) => cache.addAll(FILES_TO_CACHE))
    );
});

// CACHE_NAME이 변경되면 오래된 캐시 삭제
self.addEventListener("activate", (event) => {
    event.waitUntil(
        caches.keys().then((keyList) =>
            Promise.all(
                keyList.map((key) => {
                    if (CACHE_NAME !== key) return caches.delete(key);
                })
            )
        )
    );
});

// 요청에 실패하면 오프라인 페이지 표시
self.addEventListener("fetch", (event) => {
    if ("navigate" !== event.request.mode) return;

    event.respondWith(
        fetch(event.request).catch(() =>
            caches
                .open(CACHE_NAME)
                .then((cache) => cache.match("offline.html"))
        )
    );
});

<script>
if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("service-worker.js");
  });
}
jQuery.browser = {};
(function () {
  jQuery.browser.msie = false;
  jQuery.browser.version = 0;
  if (navigator.userAgent.match(/MSIE ([0-9]+)\\./)) {
    jQuery.browser.msie = true;
    jQuery.browser.version = RegExp.$1;
  }
})();
</script>

PWA 설치 버튼 만들기

var deferredPrompt;

window.addEventListener('beforeinstallprompt', function (e) {
    console.log('beforeinstallprompt Event fired');
    e.preventDefault();
    deferredPrompt = e;
    return false;
});

const installWebApp = document.getElementById('installWebApp'); //버튼 요소 지정

installWebApp.addEventListener('click', function () { //버튼 클릭 이벤트
    if (deferredPrompt !== undefined) {
        // 설치 팝업 띄우기
        deferredPrompt.prompt();

        // 사용자 응답 확인
        deferredPrompt.userChoice.then(function (choiceResult) {

            console.log(choiceResult.outcome);

            if (choiceResult.outcome == 'dismissed') {
                console.log('설치 취소함');
            }
            else {
                console.log('설치 완료');
            }

            deferredPrompt = null;
        });
    } else { //이미 설치 or 미지원 환경
        alert('지원되지 않는 브라우저이거나 이미 설치되어 있습니다. 브라우저는 크롬 또는 사파리를 권장합니다.')
    }
});