휴식 시간 동안의 Vue - 모든 Vue 애플리케이션을 5분 만에 오프라인 지원 PWA로 변환합니다.
4608 단어 webdevvuejavascriptbeginners
이 짧은 기사에서는 기존 Vue 응용 프로그램을 PWA로 변환하는 방법 또는 새 응용 프로그램을 설정하는 방법을 설명합니다.
프로그레시브 웹 앱이란 무엇입니까?
간단히 말해서 PWA(Progressive Web App)는 기본 응용 프로그램처럼 작동하고 동작하는 웹 응용 프로그램입니다.
PWA 기능 중 일부는 다음과 같습니다.
더 알고 싶다면 this 문서를 읽는 것이 좋습니다. 이제 코드를 작성해 보겠습니다.
Nuxt용 PWA 모듈
Nuxt를 사용하는 경우 PWA 기능을 추가하면 신규 및 기존 앱에서 동일하게 작동합니다.
create-nuxt-app
로 설정하십시오.npx create-nuxt-app <project-name>
npm i @nuxtjs/pwa
nuxt.config.js
에 모듈 등록{
modules: [
'@nuxtjs/pwa',
],
}
static/icon.png
(권장 512x512px)를 만듭니다. sw.*
파일에 .gitignore
규칙을 추가합니다. Nuxt PWA 모듈은 사실 더 작은 PWA 하위 모듈의 집합입니다. 설치가 완료된 후 살펴보겠습니다.
Workbox - Nuxt PWA 모듈은
generateSW
모드에서 Workbox를 사용하고 있습니다(구성 옵션here을 찾을 수 있음). 이는 정적 자산 캐싱을 처리할 서비스 작업자 파일을 자동으로 생성함을 의미합니다. dist 디렉토리의 모든 파일은 오프라인 사용을 위해 캐시됩니다. 이 모듈은 기본적으로 작동합니다매니페스트 - manifest.json 파일을 자동으로 생성합니다. 이 모듈은 기본적으로 작동하지만
manifest
( read more ) nuxt.config.js
속성을 통해 구성할 수 있습니다.메타 - 매니페스트 통합으로 SEO 친화적인 메타 데이터를 자동으로 추가합니다. (read more )
아이콘 - 다양한 크기의 앱 아이콘을 자동으로 생성합니다. (read more ). 이 모듈은 기본적으로 작동하지만
icon
nuxt.config.js
속성을 통해 구성할 수 있습니다.OneSignal - OneSignal을 사용한 무료 백그라운드 푸시 알림. OneSignal은 사용자에게 푸시 알림을 쉽게 보낼 수 있는 플랫폼입니다. 이 모듈을 구성하는 방법을 읽을 수 있습니다here.
Vue-cli PWA 플러그인
vue-cli 3.x를 사용하는 경우 설치가 훨씬 쉽습니다.
실행 후 새 프로젝트의 경우
vue create <project_name>
첫 번째 단계에서 Manually select features
를 선택한 다음 스페이스바로 Progressive Web Apps
를 선택하십시오.
vue-cli에 의해 생성된 표준 파일과 함께 설치 프로세스를 완료하면 registerServiceWorker.js
및 manifest.json
를 찾을 수 있습니다. pwa
의 vue.config.js
속성에서 플러그인의 동작을 사용자 정의할 수 있고 pwa.workboxOptions
모드에서 기본 Workbox 플러그인을 사용자 정의할 수 있습니다(Nuxt에서 본 것과 동일).
vue-cli 3에 이미 존재하는 프로젝트의 경우 generateSW
플러그인 설치는 정확히 동일한 효과를 가집니다. 간단히 입력하여 앱에 PWA 기능을 추가할 수 있습니다.
vue add @vue/pwa
기타 프로젝트
Nuxt 또는 vue-cli 3.x를 사용하지 않는 경우에도 Workbox CLI 을 사용하여 몇 가지 명령으로 애플리케이션을 오프라인 지원 PWA로 변환할 수 있습니다.
먼저 cli를 설치해야 합니다.
npm install workbox-cli --global
다음으로 프로젝트 루트에서 서비스 워커를 생성할 마법사를 사용해야 합니다.
workbox wizard
프롬프트된 질문에 응답한 후 마법사는 서비스 워커를 생성하는 데 사용할 @vue/pwa
파일을 생성합니다!
다음을 사용하여 서비스 워커를 생성할 수 있습니다.
workbox generateSW workbox-config.js
이러한 간단한 단계는 애플리케이션 성능을 크게 향상시킬 수 있으므로 시도해 볼 가치가 있습니다. ;)
시리즈의 다음 부분을 기대해 주세요!
Reference
이 문제에 관하여(휴식 시간 동안의 Vue - 모든 Vue 애플리케이션을 5분 만에 오프라인 지원 PWA로 변환합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/vue-storefront/vue-during-coffee-break-transform-any-vue-application-into-offline-ready-pwa-in-5-minutes-31dm
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
vue create <project_name>
vue add @vue/pwa
Nuxt 또는 vue-cli 3.x를 사용하지 않는 경우에도 Workbox CLI 을 사용하여 몇 가지 명령으로 애플리케이션을 오프라인 지원 PWA로 변환할 수 있습니다.
먼저 cli를 설치해야 합니다.
npm install workbox-cli --global
다음으로 프로젝트 루트에서 서비스 워커를 생성할 마법사를 사용해야 합니다.
workbox wizard
프롬프트된 질문에 응답한 후 마법사는 서비스 워커를 생성하는 데 사용할
@vue/pwa
파일을 생성합니다!다음을 사용하여 서비스 워커를 생성할 수 있습니다.
workbox generateSW workbox-config.js
이러한 간단한 단계는 애플리케이션 성능을 크게 향상시킬 수 있으므로 시도해 볼 가치가 있습니다. ;)
시리즈의 다음 부분을 기대해 주세요!
Reference
이 문제에 관하여(휴식 시간 동안의 Vue - 모든 Vue 애플리케이션을 5분 만에 오프라인 지원 PWA로 변환합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vue-storefront/vue-during-coffee-break-transform-any-vue-application-into-offline-ready-pwa-in-5-minutes-31dm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)