nuxt pwa module

️ 더 이상 사용되지 않음 ️

Nuxt 3는 현재 Nuxt 지원과 함께 자체적으로 놀라운 PWA 플러그인을 갖춘 Vite에 의해 구동됩니다.

더 나은 솔루션이 등장함에 따라 이 모듈은 더 이상 유지 관리되지 않습니다.

대신 Vite PWA 자산 생성기와 함께 Nuxt 3용 Vite PWA를 사용해 보세요.

메인 관리자(@kevinmarrec)로서 이 프로젝트를 신뢰해준 모든 기여자와 사용자에게 감사의 말씀을 전하고 싶습니다.

누스트 3 PWA

Nuxt 3용 제로 구성 PWA 솔루션

공식 모듈 현황

이 모듈은 비공식적 이지만 공식 Nuxt PWA 모듈의 다음 버전이 되는 것을 목표로 합니다.

설정

프로젝트에 @kevinmarrec/nuxt-pwa 종속성을 추가합니다.

 # Using Yarn
yarn add -D @kevinmarrec/nuxt-pwa
# Using NPM
npm install -D @kevinmarrec/nuxt-pwa
# Using PNPM
pnpm install -D @kevinmarrec/nuxt-pwa

PWA 모듈을 추가하려면 nuxt.config.ts 파일을 편집하세요.

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ]
} ) 

구성

이 모듈은 간편한 마이그레이션을 위해 Nuxt 2 PWA를 준수하려고 시도하므로 대부분의 기능에 대해 https://pwa.nuxtjs.org 문서를 계속 사용할 수 있습니다.

개발 중에 앱을 설치할 수 있게 하려면 nuxt.config 에서 pwa.workbox.enabled 옵션을 true 로 설정해야 합니다. 기본적으로 프로덕션에서만 활성화되어 있기 때문입니다.

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ] ,
  pwa : {
    workbox : {
      enabled : true
    }
  }
} )

사용자 정의 Workbox 서비스 작업자가 필요한 경우 pwa.workbox.templatePath 옵션을 사용하여 작업자 경로를 지정할 수 있으며 ~ 및 @ 와 같은 경로 별칭을 사용할 수 있습니다.

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ] ,
  pwa : {
    workbox : {
      templatePath : '~/path/to/your/worker.js'
    }
  }
} )

이를 사용자 정의하려면 여기에서 이 모듈의 기본값과 Nuxt 2 기본값 및 Workbox Documentation을 확인할 수 있습니다.

컴포저블

usePWAIcon(크기, 옵션)

usePWAIcon 사용하여 PWA의 아이콘 URL을 가져와 앱에서 사용할 수 있습니다.

 const icon = usePWAIcon ( 512 ) // /assets/icons/512x512.png
const icon = usePWAIcon ( 512 , { maskable : true } ) // /assets/icons/512x512.maskable.png

또는 number 크기 매개변수 대신 string 을 사용하여 Typescript에서 사용 가능한 크기를 활용할 수 있습니다.

개발

종속성을 설치해야 합니다.

pnpm install

http://localhost:3000 에서 개발 서버를 시작합니다.

pnpm dev

예

http://localhost:3000 에서 예제 빌드 및 시작:

pnpm example:build
pnpm example:start

특허

❤️로 제작되었습니다

MIT 라이센스에 따라 게시되었습니다.