서비스 작업자 및 PWA : 오프라인 우선 웹 앱 구축

Service Workers 및 PWA는 백그라운드 스크립팅, 캐싱 및 앱과 같은 기능을 결합하여 오프라인 우선 웹 앱을 활성화합니다. 1. 서비스 작업자는 네트워크 프록시 역할을하고, 요청을 가로 채고, 캐시 우선 또는 부실한 바 검사와 같은 전략을 사용하여 캐시 관리를 관리합니다. 2. 앱 쉘이 오프라인으로로드되도록 설치하는 동안 Core Core Assets Precache Core 자산. 3. API 응답과 같은 동적 컨텐츠에 대한 런타임 캐싱 구현. 4. 이름, 아이콘 및 디스플레이 모드와 같은 설치 가능한 앱 속성을 정의하기 위해 웹 앱을 추가하십시오. 5. 오프라인 기능을 활성화하려면 JavaScript로 서비스 작업자를 등록하십시오. 6. 네트워크 및 캐시가 실패하면 사용자 경험을 유지하면 오프라인 폴백 페이지를 제공합니다. 7. 튼튼함을 방지하기 위해 활성화 중에 오래된 것을 캐시하고 청소합니다. 8. WorkBox를 사용하여 캐싱을 간소화하고 워크 플로우를 동기화하십시오. 9. 브라우저 DevTools를 사용하여 오프라인 동작을 테스트합니다. 오프라인 우선을 구축하면 모든 사용자, 특히 신뢰할 수없는 네트워크에서 신뢰성, 속도 및 참여가 향상되며 진보적 인 향상을 통해 달성 할 수 있습니다.

오프라인 최초의 웹 앱을 구축하는 것은 단순히 좋은 것이 아니라 실질적인 필요성, 특히 신뢰할 수없는 인터넷 연결을 가진 사용자 또는 모바일 장치에서 웹 앱을 사용하는 사용자에게는 실질적인 필요성이되었습니다. 이 기능의 핵심에는 서비스 작업자 와 PWAS (Progressive Web Apps) 가 있습니다. 함께 네트워크가 느리거나 완전히 결석하더라도 빠르고 신뢰할 수 있으며 매력적인 경험을 가능하게합니다.

서비스 근로자와 PWA가 오프라인 우선을 가능하게하는 방법과 연결없이 원활하게 작동하는 앱을 구축하는 방법을 세분화합시다.

서비스 근로자는 무엇입니까?

서비스 작업자 는 백그라운드에서 웹 페이지와 분리되어 프로그래밍 가능한 네트워크 프록시 역할을하는 스크립트입니다. 네트워크 요청을 가로 채고 캐시를 관리하며 푸시 알림 및 배경 동기화와 같은 기능을 활성화합니다.

주요 특성 :

• 작업자 컨텍스트에서 실행됩니다 (DOM 액세스 없음)
• 별도의 스레드에서 작동합니다
• HTTPS (또는 개발 중 지역 호스트)를 통해 제공되어야합니다.
• 수명주기에는 등록, 설치, 활성화 및 종료가 포함됩니다

실제 서비스의 힘은 네트워크 요청을 가로 채고 처리하는 능력에 있으며, 네트워크를 사용할 수 없을 때 개발자가 캐시 된 컨텐츠를 제공 할 수 있습니다.

서비스 작업자가 오프라인 기능을 활성화하는 방법

오프라인 우선 앱을 구축하려면 네트워크가없는 경우에도 핵심 컨텐츠 및 기능을 사용할 수 있도록해야합니다. 서비스 근로자가 그렇게하는 방법은 다음과 같습니다.

1. 캐싱 전략

서비스 작업자를 사용하면 캐시 방법 및 대상 을 정의 할 수 있습니다. 일반적인 전략에는 다음이 포함됩니다.

• 캐시 최초 : 캐시에서 서빙; 캐시되지 않은 경우에만 네트워크로 이동하십시오
• 네트워크 우선 : 네트워크를 먼저 시도하고 캐시로 돌아갑니다
• Stale-While-Revalidate : 캐시에서 즉시 서빙하고 백그라운드에서 캐시를 업데이트하십시오.
• 캐시 전용 : 거의 변하지 않는 정적 자산에 유용합니다

오프라인 우선 앱의 경우 네트워크 폴백 접근 방식이있는 캐시 우선이 종종 가장 잘 작동합니다.

2. 임계 자산을 사전 운송합니다

Service Worker의 install 이벤트 중에 HTML, CSS, JS 및 이미지와 같은 필수 파일을 사전 캐시 할 수 있습니다.

 const cache_name = 'v1';
const precache_urls = [
  '/',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

self.addeventListener ( 'install', (이벤트) => {
  event.waituntil (
    Caches.open (cache_name)
      .Then (cache => cache.addall (precache_urls))
  );
});

이렇게하면 앱 쉘이 첫 방문에서 오프라인으로 사용할 수 있습니다.

3. 동적 컨텐츠를위한 런타임 캐싱

fetch 이벤트를 사용하여 API 응답 또는 사용자 생성 컨텐츠와 같이 주문형 자산을 캐시합니다.

 self.addeventListener ( 'fetch', (이벤트) => {
  if (event.request.destination === 'script'|| event.request.destination === 'style') {
    event.respondwith (
      caches.match (event.request).
    );
  }
});

이를 API의 JSON 데이터로 확장하여 이전에로드 된 컨텐츠에 오프라인으로 액세스 할 수 있습니다.

앱을 PWA로 전환합니다

프로그레시브 웹 앱 은 최신 웹 기능을 사용하여 앱과 같은 경험을 제공하는 웹 응용 프로그램입니다. PWA로 간주 되려면 앱이 다음과 같습니다.

• 신뢰할 수 있습니다 (네트워크 조건이 좋지 않거나 없음)
• 빠르 십시오 (사용자 상호 작용에 빠르게 응답)
• 참여 하십시오 (홈 화면 설치, 푸시 알림 등으로 기본 앱처럼 느껴집니다)

다음은 앱을 진정한 PWA로 만들기 위해 필요한 것입니다.

1. 웹 앱이 나타납니다

설치시 앱이 나타나는 방식을 정의하려면 manifest.json 파일을 추가하십시오.

 {
  "이름": "내 오프라인 앱",
  "short_name": "offlineapp",
  "start_url": "/",
  "디스플레이": "독립형",
  "background_color": "#ffffff",
  "테마_color": "#000000",
  "아이콘": [
    {
      "SRC": "Icon-192.png",
      "크기": "192x192",
      "유형": "이미지/png"
    },
    {
      "SRC": "Icon-512.png",
      "크기": "512x512",
      "유형": "이미지/png"
    }
  ]]
}

HTML에 연결하십시오.

 <link rel = "manifest"href = "/manifest.json">

2. 서비스 작업자를 등록하십시오

기본 JavaScript 파일에서 :

 if (네비게이터의 'ServiceWorker') {
  window.addeventListener ( 'load', () => {
    navigator.serviceworker.register ( '/sw.js')
      . (reg => console.log ( 'SW 등록 :', reg.scope))
      .catch (err => console.log ( 'SW 등록 실패 :', err));
  });
}

3. 오프라인 상태를 우아하게 처리하십시오

캐싱에도 불구하고 일부 요청은 실패합니다. 오프라인 폴백 페이지 또는 UI를 사용하여 사용자에게 알립니다.

 self.addeventListener ( 'fetch', (이벤트) => {
  event.respondwith (
    Caches.match (event.request)
      .
        반환 캐시 || 페치 (event.request)
          .catch (() => caches.match ( '/offline.html'));
      })
  );
});

사용자 신뢰를 유지하기 위해 친숙한 offline.html 페이지를 설계하십시오.

오프라인 우선 성공을위한 고급 팁

• 캐시 버전 : 버전 번호가있는 캐시 이름을 사용하여 오래된 콘텐츠를 피하십시오.
• 오래된 캐시 청소 : activate 이벤트를 사용하여 구식 캐시를 제거하십시오.
• WorkBox 사용 : Google의 WorkBox 라이브러리는 캐싱, 사전 캐싱 및 배경 동기화를 단순화합니다.
• 오프라인 동작 테스트 : DevTools (응용 프로그램> 서비스 작업자)를 사용하여 오프라인 모드를 시뮬레이션하고 캐싱을 확인하십시오.

최종 생각

서비스 작업자와 PWA는 웹에 기본 APP 탄력성을 가져 오는 강력한 도구입니다. 오프라인 최초의 작동으로 앱을 설계함으로써 연결이 열악한 것을 수용 할뿐만 아니라 모든 사용자에게 더 빠르고 신뢰할 수있는 경험을 구축하고 있습니다.

작은 시작 : 앱 쉘을 캐시하고 매니페스트를 추가하고 점차 향상시킵니다. 시간이 지남에 따라 배경 동기화, 푸시 알림 및 동적 컨텐츠 캐싱을 추가 할 수 있습니다.

그것은 마술이 아닙니다. 그것은 단지 좋은 웹 엔지니어링입니다. 그리고 그것은 그 어느 때보 다 달성 가능합니다.

위 내용은 서비스 작업자 및 PWA : 오프라인 우선 웹 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!