오프라인 사이트의 Vitepwa 플러그인 사용

Anthony Fu의 Vitepwa 플러그인은 오프라인 기능을 갖춘 Vite 기반 웹 사이트를 향상시키는 강력한 도구입니다. 이 플러그인은 오프라인 지원, 자산 캐싱 및 업데이트 알림을 처리하기 위해 서비스 작업자를 추가하는 프로세스를 단순화합니다. 서비스 근로자와 Vitepwa를 사용하여 구현하는 방법을 탐색합시다.

서비스 근로자 이해

서비스 작업자는 웹 응용 프로그램과 독립적으로 실행되는 배경 스크립트입니다. 주요 기능은 네트워크 요청을 가로 채어 다양한 작업을 가능하게하는 것입니다. 현대식 형식 스크립트 컴파일 또는 비디오 트랜스 코딩과 같은 복잡한 작업이 가능하지만 가장 일반적인 사용은 성능 향상 및 오프라인 액세스를위한 캐싱 자산입니다.

Vitepwa는 초기 사이트 방문시 HTML, CSS 및 JavaScript 파일을 사전 캐기하는 서비스 작업자를 만듭니다. 후속 방문은 캐시에서 이러한 리소스를로드하여 네트워크 요청을 제거합니다. 첫 방문에서도 후속 클릭은 종종 사전 준비된 컨텐츠를로드하여 속도를 크게 향상시킵니다.

버전 작성 및 매니페스트 파일

코드 변경에 신중한 버전 설정이 필요할 때 서비스 작업자 업데이트 관리. 빌드 시스템은 일반적으로 파일 해시를 통합 한 파일 이름 (예 : foo-ABC123.js )을 생성합니다. 업데이트는 새로운 파일 이름 (예 : foo-XYZ987.js )을 만듭니다. 서비스 작업자는 이러한 변경 사항을 효율적으로 처리해야합니다.

서비스 작업자 API는 낮은 수준입니다. 캐시 된 파일을 수동으로 관리하는 것은 복잡합니다. Google 라이브러리 인 Workbox는이를 단순화하지만 여전히 빌드 프로세스에서 자세한 자산 정보가 필요합니다. Vitepwa는 Workbox와 통합하고 Vite의 빌드 출력으로 자동 구성하여이를 우아하게 해결합니다.

Vitepwa와 함께 서비스 작업자 구현

1. 설치 : npm i vite-plugin-pwa 사용하여 플러그인을 설치하십시오.

2. vite 구성 : 플러그인을 vite.config.js 에 가져 와서 추가하십시오.

    "vite-plugin-pwa"에서 {vitepwa} 가져 오기;
   
   내보내기 DefuleConfig ({
     플러그인 : [vitepwa ()],
     // ... 기타 구성
   });

3. 서비스 작업자 등록 : 신청서의 진입 지점에 서비스 작업자를 등록하십시오.

    "virtual : pwa-register"에서 {registersw} 가져 오기;
   
   if (네비게이터의 "ServiceWorker") {
     RegisterSW (); // 개발 환경에 조건부 로직 추가를 고려하십시오
   }

   registerSW 함수는 서비스 작업자 수명주기를 처리합니다. 조건부 논리 (예 : localhost 제외)는 개발 중에 서비스 작업자 활성화를 방지합니다.

4. 오프라인 기능 : VitepWa가 제공하는 사전 캐칭은 기본 오프라인 기능을 자동으로 활성화합니다. 네트워크 액세스 없이도 캐시에서 자산이 제공됩니다. 보다 고급 오프라인 기능 (예 : INDEXEDDB 사용)을 위해서는 사용자 정의 서비스 작업자 로직이 필요합니다.

서비스 작업자 업데이트

코드가 변경되면 업데이트 된 사전 캐시 매니페스트가있는 새 서비스 작업자가 생성됩니다. 기존 서비스 작업자는 모든 탭이 닫히고 재개 될 때까지 계속 실행하여 세션에서 일관된 사용자 경험을 보장합니다.

onNeedRefresh 의 업데이트 처리 개선

registerSW 함수를 사용하면 더 부드러운 업데이트 프로세스가 가능합니다. 새로운 서비스 작업자를 사용할 수있을 때 onNeedRefresh 콜백이 트리거되어 사용자에게 알리고 제어 된 재 장전을 시작할 수있는 기회를 제공합니다.

 레지스터스 ({{
  OnneedRefresh () {
    // 사용자에게 알림을 표시하여 업데이트하라고 촉구합니다.
    // ...
  }
});

런타임 캐싱

Vitepwa의 workbox 구성 옵션을 사용하면 응용 프로그램 실행 중에 가져온 자산에 대한 런타임 캐싱이 가능합니다. 이는 사전 준비된 리소스를 넘어 오프라인 기능을 확장합니다.

 vitepwa ({
  Workbox : {
    runtimeCaching : [ / * ... 런타임 캐싱 구성 ... * /]
  }
})

맞춤형 서비스 작업자 코드 추가

사용자 정의 로직을 통합하려면 workbox 구성 내에서 importScripts 옵션을 사용하여 외부 JavaScript 파일을 포함하십시오.

 vitepwa ({
  Workbox : {
    importScripts : [ "SW-Code.js"]
  }
})

결론

Vitepwa는 서비스 작업자 구현을 크게 단순화하여 오프라인 기능과 향상된 성능을위한 강력한 기반을 제공합니다. 고급 기능에는 사용자 정의 코드가 필요하지만 플러그인은 캐싱 및 업데이트의 복잡성을 처리하여 개발자가 응용 프로그램 로직에 집중할 수 있습니다. 오프라인 기능으로 시작하고 필요에 따라 고급 서비스 작업자 기능을 탐색하십시오.

위 내용은 오프라인 사이트의 Vitepwa 플러그인 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!