Vite 환경에서 Svelte PWA 만들기
최근 svelte와 vite 그리고 routify를 사용해서 간단한 admin 프로그램을 만들어본 경험을 바탕으로 svelte-admin-ui 제작에 참여하고 있습니다. 이번 포스트에서는 PWA에 대해 간단히 소개하고 vite 환경에서 손쉽게 PWA를 만드는 방법을 소개하겠습니다.
PWA
PWA(Progressive Web Application)는 2016년에 열린 Google I/O 2016에서 공식적으로 소개된 웹 기술입니다. 웹과 모바일 앱의 장점을 결합한 웹 기술로, 쉽게 말하면 모바일에서 네이티브 앱과 같은 사용자 경험을 제공하는 기능입니다. 스토어를 거치지 않아도 되고 앱에 비해 접근성이 더 우수하다는 장점이 있기 때문에 차츰 주목을 받고 있습니다. 웹 앱을 홈 화면에 추가할 수 있고 푸시 알림도 받을 수 있기 때문에 서비스 초기 단계에는 특히 고려 해볼만한 기술인 것 같습니다. 오프라인 환경에 대응할 수 있다는 점도 또다른 큰 장점인 것 같습니다. PWA에 대해 학습하고 싶다면 여기를 참고하시면 많은 도움이 될 것 같습니다.
필수 요소
PWA 구현하기 위해서는manifest 와 service-worker 파일을 구성하고 https 가 요구됩니다. 좋은 PWA를 구성하기 위한 요소들에 관해서는 여기를 참고하시면 됩니다.
Manifest
PWA에 대해 브라우저에 알려주고 사용자의 데스크탑이나 모바일 디바이스에 설치할 때 어떻게 작동해야 하는지 알려주는 JSON 파일입니다. url과 앱 이름 등의 메타 정보도 포함됩니다.
Service-worker
백그라운드에서 실행되는 Javascript 스크립트입니다. 오프라인 환경에서도 앱이 작동할 수 있도록 네트워크 요청을 가로채서 네트환경이 좋지 않은 상태를 커버 해줍니다. service-worker가 네트워크 요청을 중간에 가로채기 때문에 보안을 위해서 https환경에서 동작해야 하는 것입니다.
vite-plug-pwa
프로젝트에서 vite를 사용하고 있기 때문에 vite 전용 pwa 라이브러리가 있을 것 같아서 검색해보다가 알게된 플러그인입니다. Vue를 개발한 Evan You가 참여하고 있는 프로젝트로, 직접 구성 파일을 generate 해줍니다. 문서화도 잘되어 있어서 사용해보기로 결정했습니다. 아래 코드는 vite.config.js 의 코드 중 vitePWA 부분 입니다.
인자로 manifest 설정에 필요한 값들을 받아주고 있습니다. PWA에서는 모바일 앱으로 사용하기 위해 필수적으로 요구되는 아이콘들이 있습니다. 여기 사이트를 통해서 손쉽게 필요한 아이콘들을 만들 수 있습니다. 이중 name 과 short_name 그리고 192px 아이콘은 필수 입력사항입니다. 위 코드는 가장 최소한의 요소만 넣은 것으로 필요로 하는 플랫폼에 따라 추가 옵션이 필요할 수 있습니다.
마지막으로 할 일은 manifest에 추가될 asset들이 포함될 수 있도록 index.html 파일을 약간 수정해주는 것입니다.
// index.html<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial- scale=1">
<title>Your app title</title>
<meta name="description" content="Your app description">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="alternate icon" href="/favicon.ico" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="mask-icon" href="/favicon.svg" color="#FFFFFF">
<meta name="theme-color" content="#ffffff">
</head>
주의사항
vite를 사용해서 build 를 할 때 소스 코드에서 직접 사용되 않는 asset 들은 빌드 결과에 포함되지 않습니다. 예를 들어 pwa에서 사용하기 위한 pwa-192x192.png 같은 아이콘은 소스코드에서 직접 사용되지 않으므로 빌드에 포함되지 않습니다. 따라서 최상단 폴더에 public 폴더를 만들어서 필요한 asset 들을 넣어주어야 합니다. 참고
이제 할 일은 모두 끝났습니다. vite build 를 통해 빌드를 한 후, vite preview 커맨드를 사용하면 로컬에서 프로덕션 빌드 결과를 미리 확인할 수 있습니다.
결과 확인
만약 아무 문제가 없다면 크롬 개발자 도구의 application 탭을 열었을 때 Manifest 와 Service Workers가 잘 등록되어 있는 것을 확인할 수 있습니다.
또한 상단의 주소창에서 설치 아이콘이 표시될 것 입니다.
결론
플러그인이 없어도 PWA 설정 자체가 그렇게 어렵지는 않지만, vite-plugin-pwa 패키지는 100% 타입스크립트로 만들어져 있기 때문에 자동완성의 지원을 받아 좀 더 실수를 줄일 수 있다는 점에서 장점이 있는 것 같습니다.
