개발노트

마켓 등록 없이, 웹사이트를 앱 처럼 설치하고 실행할 수 있을까? 정답은 PWA다.

HTML, PHP 기반 웹사이트를 PWA 구조로 구성하면, Android 사용자에게 설치형 앱 처럼 보이게 만들 수 있다.

이전에는 apk 파일로 만들어 설치하는 방식을 이용했지만 마켓 없이 사이트에서 바로 설치할 수 있는 방법이 있어 소개 해 드립니다.

준비 사항으로는 데스크탑과 모바일 대응이 가능한 웹사이트를 먼저 제작 해 놓아야 합니다.

아이콘의 경우 정사각형 36x36 144x144 사이즈로 만들어 줍니다. 1024 이상 큰 이미지를 만들고 해당 사이트에서 아이콘을 자동으로 만들어주는 사이트를 이용하면 어렵지 않게 생성하고 manifest.json 파일까지 자동으로 생성 해 줍니다.

manifest.json 설정

해당 사이트 링크를 참고 하거나 아래 소스를 참고하여 json 파일을 만들어 줍니다. https://www.chr.kr/manifest.json

해당 설정에서는 아이콘 이름과 배경색, 사이즈별 아이콘 링크를 지정하는 파일 입니다.

{
    "name": "핀맵뉴스",
    "short_name": "핀맵뉴스",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#0052a4",
    "scope": "/",
    "screenshots": [
        {
            "src": "/screenshots/wide.png",
            "sizes": "640x360",
            "type": "image/png",
            "form_factor": "wide"
        },
        {
            "src": "/screenshots/regular.png",
            "sizes": "640x360",
            "type": "image/png"
        }
    ],
    "icons": [
        {
            "src": "/image/cat-info/android-icon-36x36.png",
            "sizes": "36x36",
            "type": "image/png",
            "density": "0.75"
        },
        {
            "src": "/image/cat-info/android-icon-48x48.png",
            "sizes": "48x48",
            "type": "image/png",
            "density": "1.0"
        },
        {
            "src": "/image/cat-info/android-icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png",
            "density": "1.5"
        },
        {
            "src": "/image/cat-info/android-icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png",
            "density": "2.0"
        },
        {
            "src": "/image/cat-info/android-icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png",
            "density": "3.0"
        },
        {
            "src": "/image/cat-info/android-icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "density": "5.0"
        },
        {
            "src": "/image/cat-info/android-icon-1024x1024.png",
            "sizes": "1024x1024",
            "type": "image/png",
            "density": "6.0"
        }
    ]
}

service-worker.js 구성

아래 소스를 참고하거나 https://www.chr.kr/service-worker.js 해당 링크를 클릭하여 소스를 참고하여 작성할 수 있습니다. CACHE_NAME 캐시 이름은 해당 사이트에 맞게 수정하고 앱에서 사용할 css, js, icon 파일 링크를 지정합니다.

// service-worker.js

const CACHE_NAME = 'chr-v1';
const CACHE_URLS = [
  '/',
  '/index.php',
  '/css/style.css',
  '/css/home.css',
  '/js/def.js',
  '/js/view.js',
  '/js/script.js',
  '/image/cat-info/android-icon-192x192.png'
];

// 설치: 필요한 파일을 캐시에 저장
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll(CACHE_URLS);
    })
  );
});

// 활성화: 이전 캐시 정리 (선택사항)
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys.filter(key => key !== CACHE_NAME).map(key => caches.delete(key))
      )
    )
  );
});

// 요청: 캐시 우선, 없으면 네트워크 요청
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

스크립트 추가

head 부분에 manifest.json 부분을 추가해서 아이콘 정보를 읽을 수 있도록 해줍니다.

<link rel="manifest" href="/manifest.json">

body 끝나기 전에 아래 스크립트를 이용해서 service-worker.js 파일을 로드할 수 있도록 합니다. 파일명은 service-worker.js or sw.js 라는 이름을 많이 사용합니다.

<script>
if('serviceWorker' in navigator){
    navigator.serviceWorker.register('/service-worker.js');
}
</script>

PWA 장점과 단점

어떤 장점이 있나?

앱스토어 없이 바로 URL 접근 하여 설치할 수 있다. 

한번 개발로 Android/iOS/PC 모두 사용할 수 있다. 

스토어 심사 업이 바로 반영이 가능하다.

용량이 가볍고 캐시 기반 로딩으로 빠르다.

웹 기반 기술이라 유지보수가 쉽다.

단점은 없나?

iOS 경우는 수동으로 설치 해야 한다.

일부 네이티브 기능을 제공이 불가능 하다.

마켓 노출 효과를 기대할 수 없다. 용도가 제한 적이다.

사용자가 인지하지 못하고 떠나는 경우가 많다.

푸시 및 알림 구현은 복잡하다.

이런 장점과 단점이 있지만 처음부터 앱을 개발하기 보다는 먼저 PWA 네이티브 앱을 제공하고 나서 나중에 개발하는 것도 좋은 방법이다.