HTML5 서비스 작업자와 함께 오프라인 웹 응용 프로그램 구현

오프라인 웹 응용 프로그램을 구현하는 핵심은 서비스 작업자를 통해 리소스를 캐시하고 네트워크 요청을 인수하는 것입니다. 특정 단계는 다음과 같습니다. 1. 서비스 작업자를 등록하고 활성화하고 지원 가능성을 확인하고 페이지에 SW.JS 파일을 등록하며 설치 단계에서 키 리소스를 예압합니다. 2. 요청을 가로 채고 캐시 된 컨텐츠를 반환하고, 캐시에서 데이터를 우선 순위를 정하고, 캐시가 없을 때 온라인으로 얻을 수 있으며 리소스 유형에 따라 별도로 처리 할 수도 있습니다. 3. 캐시 정책 및 버전 관리 업데이트, 캐시 이름을 변경하고 활성화 단계에서 이전 캐시를 청소하여 컨텐츠 업데이트를 확인하십시오. 4. 오프라인 기능이 정상인지 테스트하고 Chrome DevTools를 사용하여 오프라인 환경을 시뮬레이션하고 캐시 로딩 효과를 확인하고 등대를 사용하여 PWA 준수를 확인하십시오.

오프라인 웹 응용 프로그램을 구현하기 위해 HTML5 서비스 작업자를 사용하면이 핵심은 한 문장 일뿐입니다. 인터넷에서 분리 된 경우에도 웹 사이트가 계속 실행되도록하십시오 . 서비스 작업자는 리소스를 캐시하고 네트워크 요청을 인수하며 푸시 알림을받을 수있는 배경 프록시와 같습니다.

몇 가지 실용적인 관점에서 오프라인 기능을 구현하는 방법에 대해 이야기 해 봅시다.

1. 서비스 작업자를 등록하고 활성화하십시오

서비스 작업자를 사용하려면 첫 번째 단계는 메인 페이지에 등록하는 것입니다. 이 단계는 매우 간단합니다. JavaScript에 코드를 추가하십시오.

 if (네비게이터의 'ServiceWorker') {
  navigator.serviceworker.register ( '/sw.js'). 그런 다음 (function (등록) {
    Console.log ( '서비스 작업자가 성공적으로 등록');
  }). catch (function (error) {
    console.log ( 'register 실패 :', 오류);
  });
}

이 코드는 브라우저가 서비스 작업자를 지원하는지 확인한 다음 sw.js 라는 파일을 등록하려고합니다. 이 파일은 서비스 작업자 스크립트입니다.

등록 후 서비스 작업자는 "설치"단계에 들어가 HTML, CSS, JS 및 이미지와 같은 키 리소스를 사전로드 할 수 있습니다.

 self.addeventListener ( 'install', event => {
  event.waituntil (
    Caches.open ( 'my-cache-v1').
      return cache.addall ([[
        '/',
        '/index.html',
        '/style.css',
        '/app.js'
      ]);
    })
  );
});

이 단계의 핵심은 오프라인 액세스가 필요한 캐시 리소스 입니다.

2. 요청을 가로 채고 캐시 된 컨텐츠를 반환하십시오

설치가 완료되면 페이지가 요청을 시작할 때마다 서비스 작업자가 트리거됩니다. 캐시에서 데이터 가져 오기 우선 순위를 정하거나 네트워크를 사용할 수있는 서버에서 얻는 것과 같은 요청 동작을 제어 할 수 있습니다.

일반적인 전략은 "먼저 캐시가 있는지, 네트워킹이 없는지"하는 것입니다. 코드는 거의 다음과 같습니다.

 self.addeventListener ( 'fetch', event => {
  event.respondwith (
    caches.match (event.request). (응답 => {
      반환 응답 || 페치 (event.request);
    })
  );
});

정적 자원에 캐시 만 사용하는 등 다양한 유형의 요청을보다 신중하게 제어 할 수 있으며 API 요청은 네트워크로 이동합니다.

 if (event.request.url.startswith ( 'https://api.example.com')) {
  // 특별 처리 API 요청} else {
  // 일반 리소스는 캐시 네트워크입니다}

3. 캐시 정책 및 버전 관리 업데이트

캐시는 정적이 아닙니다. 웹 사이트 리소스를 업데이트하면 이전 캐시도 업데이트되어야합니다. 그렇지 않으면 사용자는 이전 버전의 컨텐츠를 계속 볼 수 있습니다.

일반적인 관행은 캐시에 새 이름 (예 : my-cache-v2 )을 제공 한 다음 설치 단계에서 이전 캐시를 청소하는 것입니다.

 const cache_name = 'my-cache-v2';

self.addeventListener ( 'Activate', event => {
  event.waituntil (
    caches.keys (). 그런 다음 (keys => {
      Return Promise.all (
        keys.filter (key => key! == cache_name)
          .map (key => caches.delete (key))
      );
    })
  );
});

이 단계는 캐시 축적을 피하면서 사용자가 최신 컨텐츠를 얻을 수 있도록하는 것입니다.

4. 오프라인 함수가 정상인지 테스트하십시오

개발 후 테스트를 잊지 마십시오. Chrome Devtools는 오프라인 환경을 시뮬레이션하는 훌륭한 도구를 제공합니다.

• 네트워크 패널을 엽니 다
• 오프라인 을 확인하십시오
• 정상적으로로드되는지 확인하려면 페이지를 새로 고침

페이지를 여전히 표시 할 수 있고 리소스가 (ServiceWorker) 에서로드되면 캐시가 유효합니다.

또한 등대를 사용하여 오프라인 지원을 포함하여 PWA 준수를 확인할 수도 있습니다.

일반적으로 서비스 작업자를 사용하여 오프라인 웹 응용 프로그램을 구현하는 것은 복잡하지 않지만 캐시 정책 설계, 버전 업데이트 메커니즘 및 실제 테스트에주의를 기울여야합니다. 이러한 세부 정보를 처리하는 한 인터넷을 연결해도 웹 사이트를 원활하게 사용할 수 있습니다.

기본적으로 그게 다야.

위 내용은 HTML5 서비스 작업자와 함께 오프라인 웹 응용 프로그램 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!