[PWA] Service Worker 이용해서 앱 홈화면 추가하기

PWA는 프로그레시브 웹 앱(Progressive Web App)의 줄임말

 

PWA를 적용하기 위해서는 아래 3가지 요소가 반드시 필요하다.

Service Worker / Manifest / HTTPS

용어에 대한 설명 및 개념은 아래 참고 블로그에 잘 나와있다.

 

Service Worker

var cacheName = 'adm-pwa-manager';
var filesToCache = [
    '/index_adm.html'
];

self.addEventListener('install', function(e) {
    e.waitUntil(
        caches.open(cacheName).then(function(cache) {
            return cache.addAll(filesToCache);
        })
    );
    self.skipWaiting();
});

self.addEventListener('fetch', function(e) {
    e.respondWith(
        caches.match(e.request).then(function(response) {
            return response || fetch(e.request);
        })
    );
});

self.addEventListener('activate', event => {
    var cacheWhitelist = ['adm-pwa-manager'];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

Manifest

{
  "short_name": "TEST ADM",
  "name": "TEST ADM",
  "icons": [
    {
      "src": "/favicon/android-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/favicon/android-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index_adm.html",
  "display": "minimal-ui",
  "orientation": "portrait",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

HTTPS

홈화면 추가는 HTTPS에서만 가능하다.

 

결과

설치버튼을 누르거나 설치버튼을 구현하여 클릭하면 설치여부를 물어본다.

 

삭제

삭제시 앱을 실행하여 점3개를 클릭하면 삭제 가능하다.

다른 방법으로는 앱관리에서 삭제 할 수도 있다.

 

 

참고

https://s0n9h2.tistory.com/122

[PWA] manifest.json 파일 설정으로 웹앱 홈 화면에 추가하기

https://memoryhub.tistory.com/entry/PWA%EB%A5%BC-%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C-%EB%A7%8C%EB%93%A4%EA%B8%B0?category=1139582

PWA를 간단하게 만들기

https://harris91.vercel.app/introduce-pwa

PWA(Progressive Web Apps)