웹 앱 : Progressive Web APP (PWA)

Miseon (MIMI)·2023년 8월 30일

pwa

토이프로젝트-갈매기

목록 보기

3/4

🔖 개요

💡 '어플을 어떻게 배포하면 좋을까?'

캡스톤 때 결과물이 명확하게 나오지 않아 아쉬웠던 우리였지만, 추구하는 결과물의 형태는 있었다. 바로 PWA로 어플을 배포하는 것이다.

그렇기에 이번 프로젝트로 제작된 웹을 PWA로 만들어 배포하는 것이 목표다.

PWA는 무엇이고, 내가 만든 웹을 어떻게 PWA로 만들 수 있는지 알아보자. 🔥

🔖 PWA란?

📍 의미

Progressive Web App(PWA)는 웹과 앱의 장점을 결합한 형태를 말한다. 웹 개발 기술만으로도 앱의 기능을 갖춘 웹 앱을 개발할 수 있다.

기존의 네이티브 앱들과 달리, 웹 브라우저를 통해 설치할 수 있고 오프라인에서도 접근이 가능하다. 반응형 웹으로 제작하였다면 하나의 웹으로 모든 기기에 알맞게 UI가 적용되는 훌륭한 PWA를 만들 수 있다.

대표적은 PWA로는 X(Twitter)가 있다.

웹 접속 시, 위와 같이 주소창에 '앱을 설치하겠습니까?'라는 알림이 뜨면서 앱을 설치할 수 있도록 구성되어 있다. 이는 모바일에서도 가능하다.

📍 조건

내가 만든 웹이 PWA가 되길 원한다면, 다음과 같은 필수 조건을 갖춰야 한다.

1. Manifest.json

웹이 아닌 앱의 특징을 담기 위해 앱 이름, 아이콘 파일 등을 JSON 형태로 작성한다.

이번 프로젝트에 작성한 Manifest는 다음과 같다.
(경로는 리액트 기준 public/manifest.json)

{
  "short_name": "busan-culture-seagull",
  "name": "갈매기",
  "icon": [ /* icon 배열 */ ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"

icon 배열에는 다음과 같은 정보가 들어가야 한다.
💡 "purpose": "maskable" 상태의 icon이 1개 이상 있어야 한다. 없으면 PWA check 시 경고 문구가 뜬다. 여러 형태의 앱 아이콘을 제공하기 위해서이다. (원 형태, 모서리가 둥근 형태, ...)

{
    "src": "./icons/windows11/SmallTile.scale-100.png",
    "type": "image/png",
    "purpose": "maskable",
    "sizes": "71x71"
}

maskable 속성을 추가하지 않으면 다음과 같은 오류가 발생한다. 꼭 추가해줄 것!

2. Service Worker.js

웹 앱으로써 더욱 네이티브하게 보이도록 사용되는 파일이다. 웹 자원을 캐싱하도록 도와주기 때문에, 사용자가 오프라인 환경에서 웹 앱을 구동해도 문제가 없다. 또한 푸시 알림 기능도 추가할 수 있다.

여러 서비스 워커 이벤트 핸들러가 있지만, 이번 프로젝트에서는 install, active, fetch를 사용했다. 푸시 알림, 동기화 등의 더 많은 기능을 이용하고 싶다면 이벤트 핸들러를 추가해주면 된다. 웹 앱의 목적을 고려하여 적절하게 작성해준다.

(경로는 리액트 기준 public/service_worker.js)

// install event
self.addEventListener("install", (e) => {
  console.log("[Service Worker] installed");
});

// activate event
self.addEventListener("activate", (e) => {
  console.log("[Service Worker] actived", e);
});

// fetch event
self.addEventListener("fetch", (e) => {
  console.log("[Service Worker] fetched resource " + e.request.url);
});