PWA with Nuxt3
프로그레시브 웹 앱 이란?
웹에서 채팅과 같은 알림을 보내는 방법이 무엇이 있을까요?
이를 설계하기 위해서 더컴퍼스는 PWA를 적용하였습니다.
PWA란?
PWA : Progressive Web Apps
모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱 입니다.
네이티브 앱과 달리 브라우저에 실행되지만 보안상의 이유로 브라우저가 접근하지 못하는 시스템 하드웨어와 소프트웨어에 도 접근하여 마치 네이티브 앱처럼 동작합니다.
우리가 온라인에서 보는 많은 사이트들은 실제로 PWA입니다. 사용 방법도, 모양도 모두 네이티브 앱처럼 보이고 기능도 앱과 비슷하며, 브라우저 창 같은 것도 없습니다. 아이폰이고, 안드로이드고 관계없이 실행하는데 있어서 아무런 차이가 없죠. 이것이 바로 PWA로 웹 어플리케이션을 만들때의 가장 큰 장점입니다.
다른 장점들 또한 있습니다.
1. 일반적인 웹 기술을 사용해서 만들 수 있다.
2. 네이티브 앱과 달리 플랫폼 별로 앱을 개발 할 필요가 없다.
3. 홈 화면에 추가한 아이콘을 통해 실행되므로, 스토어에서 다운로드 하고 설치할 필요가 없다.
4. 브라우저를 닫고 있는 사람에게도 푸시 알림을 보낼 수 있다.(마치 앱 처럼)
5. SEO가 잘된다 (기본적으로 웹이 중심이기 때무에)
Nuxt3 프로젝트에 PWA를 적용하자.
1. npx nuxi init <프로젝트명>으로 새로운 Nuxt3 프로젝트를 생성합니다.
2. yarn add -D @vite-pwa/nuxt로 기존의 Nuxt3 애플리케이션의 PWA 관련 기능을 노출시키는 플러그인, vite-plugin-pwa를 등록합니다.
3. nuxt.config.ts에서 PWA의 manifest, workbox, devOptions를 설정합니다.
- manifest :
웹 어플리케이션의 기본 정보 정의와 함께, 웹 앱으로서의 동작을 지정
- workbox :
PWA에서 사용되는 Service Workier를 생성하는데 사용되는 라이브러리.
(Service Worker란 브라우저의 백그라운드에서 실행되는 스크립트로, 웹 앱의 오프라인 기능,
캐시 푸시 알림 등을 처리하는데 사용)
- devOpiton : 개발 환경에서 PWA를 구성하는데 사용되는 옵션
4. VitePwaManifest 컴포넌트를 app.vue에 추가합니다.
- VitePwaManifest :
PWA 관련 정보를 포함하고 있으며, 해당 컴포넌트는 이러한 manifest를 head에 추가함
이제 nuxt 프로젝트를 컴퓨터와 스마트폰에서 실행하면 다음과 같이 설치하거나 홈 화면에 추가하여 앱처럼 사용할 수 있습니다.
(ios는 최근의 16.4 버전 업데이트에 따라 웹 푸시 알림 사용이 가능해졌습니다)
©2023 thecompass. All rights reserved
