PWA | sim.junghun

PWA는 웹 기술로 네이티브 앱과 유사한 경험을 제공하는 앱입니다. 오프라인 지원, 푸시 알림, 홈 화면 설치가 가능합니다.

면접에서 "PWA를 알고 있나요?"라고 물으면, Service Worker의 역할과 캐싱 전략을 설명할 수 있어야 합니다.

Vite PWA 플러그인 설정

BASH

npm install -D vite-plugin-pwa

TYPESCRIPT

// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
      manifest: {
        name: 'My Vue App',
        short_name: 'VueApp',
        description: 'Vue PWA 앱',
        theme_color: '#42b883',
        background_color: '#ffffff',
        display: 'standalone',
        icons: [
          { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png' },
          { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png' },
          { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
        ]
      },
      workbox: {
        // 캐싱 전략
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/api\.example\.com\/.*/i,
            handler: 'NetworkFirst',
            options: {
              cacheName: 'api-cache',
              expiration: { maxEntries: 50, maxAgeSeconds: 300 }
            }
          },
          {
            urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
            handler: 'CacheFirst',
            options: {
              cacheName: 'image-cache',
              expiration: { maxEntries: 100, maxAgeSeconds: 60 * 60 * 24 * 30 }
            }
          }
        ]
      }
    })
  ]
})

캐싱 전략

전략	설명	적합한 경우
CacheFirst	캐시 우선, 없으면 네트워크	정적 리소스 (이미지, 폰트)
NetworkFirst	네트워크 우선, 실패 시 캐시	API 응답, 동적 데이터
StaleWhileRevalidate	캐시 제공 + 백그라운드 갱신	자주 변하지 않는 API
NetworkOnly	네트워크만	실시간 데이터
CacheOnly	캐시만	프리캐시된 리소스

업데이트 알림

VUE

<script setup lang="ts">
import { useRegisterSW } from 'virtual:pwa-register/vue'

const {
  needRefresh,
  updateServiceWorker
} = useRegisterSW()

const close = () => {
  needRefresh.value = false
}
</script>

<template>
  <div v-if="needRefresh" class="update-banner">
    <p>새 버전이 있습니다!</p>
    <button @click="updateServiceWorker()">업데이트</button>
    <button @click="close">나중에</button>
  </div>
</template>

오프라인 상태 감지

VUE

<script setup lang="ts">
import { useOnline } from '@vueuse/core'

const isOnline = useOnline()
</script>

<template>
  <div v-if="!isOnline" class="offline-banner">
    오프라인 상태입니다. 일부 기능이 제한될 수 있습니다.
  </div>
</template>

면접 팁

PWA의 세 가지 핵심 요소: HTTPS, Service Worker, Web App Manifest
Service Worker의 생명주기(install → waiting → activate)를 알고 있으면 좋습니다
캐싱 전략 선택은 ** 데이터 특성 **(실시간성 요구, 크기, 변경 빈도)에 따라 달라집니다

요약

Vue PWA는 vite-plugin-pwa로 간편하게 구축할 수 있습니다. Service Worker가 리소스를 캐싱하여 오프라인 지원을 제공하고, Web App Manifest로 설치 가능한 앱 경험을 제공합니다. 데이터 특성에 맞는 캐싱 전략(CacheFirst, NetworkFirst 등)을 선택하는 것이 핵심입니다.