이 시리즈의 목적은 모든 애플리케이션에 빠르게 적용할 수 있는 고급 Vue 개념에 대한 작은 팁을 게시하고 문제에 접근할 수 있는 새로운 무기를 제공하는 것입니다.

이 짧은 기사에서는 기존 Vue 응용 프로그램을 PWA로 변환하는 방법 또는 새 응용 프로그램을 설정하는 방법을 설명합니다.

프로그레시브 웹 앱이란 무엇입니까?

간단히 말해서 PWA(Progressive Web App)는 기본 응용 프로그램처럼 작동하고 동작하는 웹 응용 프로그램입니다.

PWA 기능 중 일부는 다음과 같습니다.

오프라인 작업 기능

홈 화면 설치

푸시 알림 지원

더 알고 싶다면 this 문서를 읽는 것이 좋습니다. 이제 코드를 작성해 보겠습니다.

Nuxt용 PWA 모듈

Nuxt를 사용하는 경우 PWA 기능을 추가하면 신규 및 기존 앱에서 동일하게 작동합니다.

(선택 사항) 새 프로젝트인 경우 create-nuxt-app로 설정하십시오.

npx create-nuxt-app <project-name>

@nuxtjs/pwa 모듈 설치

npm i @nuxtjs/pwa

nuxt.config.js에 모듈 등록

{
    modules: [
        '@nuxtjs/pwa',
    ],
}

(선택 사항) 앱의 홈 화면 아이콘으로 사용할 static/icon.png (권장 512x512px)를 만듭니다.

(선택 사항) Nuxt 모듈에서 생성된 파일을 커밋하지 않도록 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

이러한 간단한 단계는 애플리케이션 성능을 크게 향상시킬 수 있으므로 시도해 볼 가치가 있습니다. ;)

시리즈의 다음 부분을 기대해 주세요!