PWA 만들어보기

정세연·2022년 6월 5일
3
post-thumbnail

PWA

PWA(Progressive Web APP)는 웹의 장점과 앱의 장점을 결합하여 개발된 웹 앱입니다. 앱과 디자인과 기능들을 제공하지만 웹 브라우저 기반으로 동작하는 앱입니다.

장점

기본적으로 웹이 갖는 이점들을 모두 누릴 수 있습니다.

  • 사용자의 접근성이 좋다.
  • 출시 및 업데이트가 상대적으로 간편하다.
  • 개발비용이 저렴하다.
  • 검색엔진 사용이 가능하다.

또한 네이티브 앱이 갖는 장점 또한 일부 누릴 수 있습니다.

  • 푸쉬 알림이 가능하다.
  • 오프라인 동작이 가능하다.
  • 바로가기 아이콘을 통해 서비스에 빠르게 접근이 가능하다.
  • 기타 네이티브 API 사용이 가능하다.

다만, 아직까지 네이티브 앱처럼 다양한 API를 지원하지 않는 상황이며 OS별로 이용가능한 기능의 편차가 있다는 단점이 남아있습니다. 또한 아직까지 유저에게 앱은 네이티브 앱이 먼저 떠오르며 PWA를 알고 사용하는 유저가 절대적으로 많다고 하기에는 애매한 상황입니다.

언제 사용하면 좋을까?

서비스의 기획자로써 본인의 서비스가 어떤 환경에서 더 적합한지 생각해 보는것이 우선일 것 같습니다. 간단한 네이티브 API를 사용하며 유저들의 사용성과 접근성이 좋은 서비스를 구상하고 있다면 PWA, 다양한 네이티브 API를 활용하는 서비스라면 네이티브 앱이 더 좋을 수 있습니다.
또한 기존에 운영하던 웹 서비스의 모바일 수요를 확인 해보고 싶을 때 가벼운 개발 비용으로 빠르게 개발하여 스토어에 출시하고 시장 테스트를 경험할 수 있습니다.

만들어 보자

PWA를 만들기 위해서는 세 가지 설정이 필요합니다.

  • HTTPS : 아래 Service Worker가 네트워크 요청을 수정할 수 있기 때문에 중간자 공격에 매우 취약합니다. 따라서 보안 설정이 필요합니다.

  • Service Worker : 네트워크 요청을 수정하고 캐싱이 가능한 JS 파일로써 브라우저와 생명 주기가 다르기 때문에 브라우저가 닫혀도 푸쉬 알림이 가능하며 캐싱을 통해 오프라인에서도 동작이 가능합니다.

  • Mainfest : PWA의 다양한 정보들을 다루는 파일입니다.

저는 HTTPS 설정을 위해 vercel로 배포를 해주었습니다.
github page, ngrok 등 원하시는 곳에서 호스팅을 진행하시면 됩니다.

다음은 Service Worker입니다. 직접 만들어서 적용해도 되지만, 저는 Next.js를 사용하고 있기 때문에 간편하게 next-pwa 라이브러리를 사용하여 진행하겠습니다. 해당 라이브러리는 빌드시 자동으로 Service Worker 파일을 생성해줍니다. 원한다면 Custom Service Wokrer도 등록이 가능합니다.

npm i next-pwa
// /next.config.js

const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");

module.exports = withPWA({
  pwa: {
    dest: "public",
    runtimeCaching,
  },
});

다음은 Manifest 설정을 해줍니다.

{
  "background_color": "#f6f6ef",
  "description": "PWA Testing App",
  "dir": "ltr", // 문서 방향
  "display": "standalone", // 기기 방향
  "name": "PWA APP",
  "orientation": "portrait",
  "scope": "/",
  "short_name": "PA", //default 아이콘 이름
  "start_url": "/",
  "theme_color": "#f6f6ef", //상단 주소바(설정시) 컬러
  "icons": [
    {
      "src": "/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ] //기기별 아이콘 이미지
}
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="description" content="news" />
<meta name="keywords" content="news" />
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" >
<meta name="theme-color" content="#317EFB" />
<meta name="application-name" content="name-test" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="apple-name-test" />

ios에서 manifest가 잘 적용되지 않는 이슈가 있어 메타에 따로 추가해 주었습니다.

  • apple-mobile-web-app-capable : 브라우저 상단바를 숨김하여 네이티브 앱처럼 보이게한다.
  • apple-mobile-web-app-status-bar-style : 상태바의 색갈 ( black, default(회색), black-translucent(반투명))

여기까지 설정했다면 모든 준비는 끝났습니다. 빌드 및 배포를 진행해 보겠습니다.

테스트

PWA Builder는 온라인에서 손쉽게 PWA Testing 및 Build를 도와주는 사이트입니다. 해당 사이트에서 배포 링크를 등록하고 테스트를 진행해 봅니다.


모든 부분에서 통과한걸 확인할 수 있습니다. 다른 항목들은 몰라도 Manifest 부분은 반드시 통과(100점 이상)를 해주셔야 합니다.


Lighthouse를 통해 퍼포먼스를 측정해 보았습니다. 우측에 PWA로 인식되는 것을 확인할 수 있습니다. 이제 브라우저 상단에 설치하기 버튼을 눌러 다운받거나 ios 환경에서는 하단의 공유하기 버튼을 누르고 홈 화면에 추가 버튼을 누르면 홈 화면에 앱 처럼 아이콘을 추가하여 사용할 수 있습니다.

0개의 댓글