Vue Academy · 강의

vite-plugin-pwa 설정

플러그인 설정, 매니페스트 옵션, 아이콘, 스크린샷, 표시 모드와 범위를 다룹니다.

레슨 1/413개 단계

vite-plugin-pwa 설정은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

PWA란 무엇인가

프로그레시브 웹 앱은 서비스 worker와 웹 앱 매니페스트를 통해 웹 앱에 설치 가능성, 오프라인 지원 및 네이티브와 유사한 기능을 추가합니다. vite-plugin-pwa는 Vue + Vite 빌드에 이 두 요소를 연결하는 작업을 자동화합니다.

플러그인 설치하기

vite-plugin-pwa를 개발 의존성으로 설치합니다. 이 플러그인은 내부적으로 Workbox를 사용하여 서비스 worker를 생성합니다.

npm install -D vite-plugin-pwa

플러그인에 VitePWA 추가하기

VitePWA를 가져와 Vite 플러그인 배열에 추가합니다. 옵션은 해당 함수의 단일 호출에 전달됩니다.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [vue(), VitePWA({ /* options */ })]
});

registerType

registerType은 업데이트 동작을 제어합니다. "autoUpdate"는 새 서비스 worker를 즉시 활성화하고, "prompt"는 다시 로드하기 전에 사용자에게 물을 수 있게 합니다.

VitePWA({
  registerType: "autoUpdate"
});

manifest 옵션

manifest 객체는 웹 앱 매니페스트가 됩니다. 주요 필드는 name, short_name, theme_color, icons입니다.

VitePWA({
  manifest: {
    name: "My Vue App",
    short_name: "VueApp",
    theme_color: "#42b883"
  }
});

icons 배열

OS가 홈 화면과 스플래시 화면에 맞는 아이콘을 선택할 수 있도록 여러 아이콘 크기를 제공합니다. 적응형 모양을 위한 마스크 가능 아이콘도 포함하십시오.

manifest: {
  icons: [
    { src: "/pwa-192.png", sizes: "192x192", type: "image/png" },
    { src: "/pwa-512.png", sizes: "512x512", type: "image/png" },
    { src: "/maskable.png", sizes: "512x512", type: "image/png", purpose: "maskable" }
  ]
}

Workbox 설정

workbox 옵션은 생성되는 서비스 worker를 설정합니다. 어떤 파일을 사전 캐싱할지와 런타임 캐싱 규칙을 지정할 수 있습니다.

VitePWA({
  workbox: {
    globPatterns: ["**/*.{js,css,html,png,svg}"]
  }
});

injectRegister auto

injectRegister: "auto"는 서비스 worker를 등록하는 코드를 자동으로 삽입하므로 등록 로직을 직접 작성할 필요가 없습니다.

VitePWA({
  registerType: "autoUpdate",
  injectRegister: "auto"
});

가상 등록 모듈 사용하기

프롬프트 기반 업데이트를 사용하려면 진입 파일에서 가상 registerSW 모듈을 가져오고 콜백에 연결합니다.

import { registerSW } from "virtual:pwa-register";

const updateSW = registerSW({
  onNeedRefresh() { /* show update toast */ },
  onOfflineReady() { /* show ready toast */ }
});

개발 환경에서 활성화하기

기본적으로 서비스 worker는 프로덕션 환경에서만 실행됩니다. 개발 중에 PWA 동작을 테스트하려면 devOptions를 활성화합니다.

VitePWA({
  devOptions: { enabled: true }
});

설치 확인하기

빌드하고 제공한 후 Chrome DevTools의 애플리케이션 탭을 엽니다. 매니페스트가 파싱되고 활성 서비스 worker가 실행 중이며 주소 표시줄에 설치 프롬프트를 사용할 수 있어야 합니다.

확인 문제

injectRegister: "auto"는 무엇을 합니까?

인터랙티브 레슨에서 답해보세요

복습

VitePWA를 registerType(autoUpdate 또는 prompt), manifest(name, short_name, theme_color, icons 배열), workbox 옵션과 함께 Vite 플러그인 배열에 추가합니다. 서비스 worker를 자동으로 등록하려면 injectRegister: "auto"를 사용하고, 프롬프트 기반 업데이트를 사용하려면 virtual:pwa-register 모듈을 사용합니다.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 42
레슨: 156

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“vite-plugin-pwa 설정” 강의는 무료인가요?

네 — “vite-plugin-pwa 설정” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“vite-plugin-pwa 설정”에서 뭘 배우나요?

플러그인 설정, 매니페스트 옵션, 아이콘, 스크린샷, 표시 모드와 범위를 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“vite-plugin-pwa 설정” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기