Periodic Background Sync API를 통한 더욱 풍부한 오프라인 환경

앱과 유사한 환경을 위해 백그라운드에서 웹 앱의 데이터를 동기화

Jeff Posnick
Joe Medley
Joe Medley
GitHub

다음과 같은 상황에 처한 적이 있으신가요?

  • 인터넷 연결이 원활하지 않거나 연결되지 않는 기차 또는 지하철 탑승
  • 동영상을 너무 많이 시청한 후 이동통신사에 의해 제한됨
  • 수요를 따라잡기 위해 대역폭이 부족한 국가에 거주

아마 그런 적이 있으시다면, IT 지원 전문가로서 일할 수 있는 플랫폼별 앱이 왜 이렇게 더 나은지 궁금해하는 사람들 사용할 수 있습니다 플랫폼별 앱에서 뉴스 기사나 날씨와 같은 최신 콘텐츠를 가져올 수 있음 미리 볼 수 있습니다 지하철에 네트워크가 없더라도, 여전히 있습니다.

주기적 백그라운드 동기화를 사용하면 웹 애플리케이션이 백그라운드에 데이터가 전송되므로 웹 앱이 특정 플랫폼의 동작에 더 가까워집니다. 있습니다.

직접 해 보기

라이브 데모를 보면서 주기적인 백그라운드 동기화를 시도해 볼 수 있습니다. 앱을 엽니다. 사용하기 전에 다음을 확인하세요.

  • Chrome 80 이상을 사용 중입니다.
  • 나 설치 웹 앱에서 백그라운드 동기화를 사용 설정해야 합니다.

개념 및 사용법

프로그레시브 웹 앱이 실행될 때 주기적 백그라운드 동기화를 통해 최신 콘텐츠 표시 서비스 워커 지원 페이지가 시작됩니다 이를 위해 데이터는 백그라운드로 전환될 수 있습니다. 이렇게 하면 앱의 출시 후 조회되는 동안 새로고침되지 않습니다. 더 좋은 점은 새로고침하기 전에 앱이 콘텐츠 스피너를 표시하지 못하게 합니다.

주기적 백그라운드 동기화 없이 웹 앱은 데이터 다운로드 일반적인 예는 푸시 알림을 사용하여 서비스의 절전 모드를 해제하는 것입니다. 있습니다 '새 데이터 있음'과 같은 메시지에 의해 사용자가 중단됩니다. 데이터 업데이트는 본질적으로 부작용입니다. 이 경우에도 중요 업데이트 등 정말 중요한 업데이트에 푸시 알림을 사용하는 것이 속보

주기적 백그라운드 동기화는 백그라운드 동기화와 쉽게 혼동됩니다. 비록 이름은 비슷하고 사용 사례도 다릅니다. 무엇보다도 백그라운드 동기화는 이전 요청이 실패했습니다.

적절한 사용자 참여 유도

주기적으로 백그라운드 동기화를 잘못 수행하면 사용자의 리소스를 배포합니다 출시 전에 Chrome은 앱을 출시하기 위해 확신할 수 있습니다. 이 섹션에서는 Chrome의 설계 결정 몇 가지를 설명합니다. 알려 드리겠습니다.

Chrome이 내린 첫 번째 디자인 결정은 웹 앱이 백그라운드 동기화는 사용자가 자신의 기기에 앱을 설치한 후 별개의 애플리케이션으로 실행했습니다 주기적 백그라운드 동기화를 사용할 수 없습니다. 를 사용합니다.

또한 Chrome은 사용되지 않거나 거의 사용되지 않는 웹 앱이 불필요하게 배터리나 데이터를 소모하지 않도록 Chrome은 정기적으로 백그라운드 동기화를 설계하여 개발자는 사용자에게 가치를 제공하여 수익을 창출해야 합니다. 구체적으로는 Chrome에서는 사이트 참여 점수를 사용합니다. (about://site-engagement/)를 사용하여 주기적 백그라운드 동기화의 발생 여부와 빈도 파악 할 수 있습니다 즉, periodicsync 이벤트가 실행되지 않으면 해당 값이 0보다 크며 이 값은 periodicsync 이벤트가 실행됩니다. 이렇게 하면 배경은 여러분이 적극적으로 사용하는 것입니다.

주기적 백그라운드 동기화는 기존 API와 몇 가지 유사점을 공유합니다. 권장사항도 확인해 보세요 예를 들어 일회성 백그라운드 동기화는 물론 푸시 알림을 사용하면 웹 앱의 로직이 좀 더 오래 서비스 워커)을 다시 호출할 수 있습니다. 대부분의 플랫폼에서는 사람들이 네트워크에 정기적으로 액세스하는 앱을 설치한 것은 중요 업데이트에 대한 사용자 환경을 개선하기 위해 콘텐츠 미리 가져오기, 데이터 동기화 등입니다. 마찬가지로 주기적인 백그라운드 동기화도 웹 앱의 로직의 수명을 연장하여 몇 분 정도 걸릴 수 있습니다

브라우저에서 이 작업이 제한 없이 빈번하게 발생하도록 허용했다면 개인 정보 보호 문제가 발생할 수 있습니다. Chrome이 문제를 해결한 방법은 다음과 같습니다 주기적 백그라운드 동기화 위험이 있습니다.

  • 백그라운드 동기화 활동은 기기가 할 수 있습니다. Chrome에서는 다음에서 운영하는 네트워크에만 연결할 것을 권장합니다. 있습니다.
  • 모든 인터넷 통신과 마찬가지로 주기적 백그라운드 동기화는 주소, 통신 중인 서버 및 있습니다. 앱에서 특정 앱만 볼 수 있을 때만 노출되었을 때 포그라운드에 있을 때 동기화되어 있지 않으면 브라우저에서 앱의 백그라운드 동기화는 사용자가 해당 앱을 사용하는 빈도에 맞게 조정됩니다. 만약 사용자가 앱과의 상호작용을 자주 중단함, 주기적 백그라운드 동기화 트리거가 중지됩니다 이는 플랫폼별 현상 유지에 비해 순 향상된 수치입니다. 있습니다.

언제 사용할 수 있나요?

사용 규칙은 브라우저마다 다릅니다. 위에서 요약하자면 Chrome은 주기적 백그라운드 동기화에 관한 다음 요구사항은 다음과 같습니다.

  • 특정 사용자 참여 점수
  • 이전에 사용된 네트워크가 있습니다.

동기화 시점은 개발자가 제어하지 않습니다. 이 동기화 빈도는 앱 사용 빈도와 일치합니다. (참고: 플랫폼별 앱에서는 현재 이 작업을 실행하지 않습니다.) 또한 기기의 전원과 연결 상태를 유지합니다.

언제 사용해야 하나요?

서비스 워커의 절전 모드가 해제되어 periodicsync 이벤트를 처리하면 다음과 같은 작업이 가능합니다. 데이터를 요청할 기회이지만 이를 요청할 의무는 없습니다. 취급 시 네트워크 상태와 사용 가능한 스토리지를 이에 따라 다양한 양의 데이터를 고려하여 다운로드할 수 있습니다. 이때 다음 리소스를 참고하세요.

권한

서비스 워커가 설치된 후 Permissions API를 사용하여 쿼리합니다. (periodic-background-sync) 이 작업은 창이나 서비스 워커 컨텍스트를 만드는 것이 좋습니다

const status = await navigator.permissions.query({
  name: 'periodic-background-sync',
});
if (status.state === 'granted') {
  // Periodic background sync can be used.
} else {
  // Periodic background sync cannot be used.
}

주기적 동기화 등록

이미 언급했듯이 주기적인 백그라운드 동기화에는 서비스 워커가 필요합니다. 검색 ServiceWorkerRegistration.periodicSync를 사용한 PeriodicSyncManager 및 호출 register()입니다. 등록하려면 태그와 최소 사양이 필요합니다. 동기화 간격 (minInterval)입니다. 태그는 등록된 동기화를 식별합니다. 동기화를 여러 번 등록할 수 있습니다. 아래 예에서 태그 이름은 'content-sync', minInterval은 1일입니다.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  try {
    await registration.periodicSync.register('content-sync', {
      // An interval of one day.
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (error) {
    // Periodic background sync cannot be used.
  }
}

등록 확인

periodicSync.getTags()를 호출하여 등록 태그 배열을 검색합니다. 이 아래 예에서는 태그 이름을 사용하여 캐시 업데이트가 활성 상태인지 확인하여 다시 업데이트할 수 있습니다

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  const tags = await registration.periodicSync.getTags();
  // Only update content if sync isn't set up.
  if (!tags.includes('content-sync')) {
    updateContentOnPageLoad();
  }
} else {
  // If periodic background sync isn't supported, always update.
  updateContentOnPageLoad();
}

getTags()를 사용하여 웹에서의 활성 등록 목록을 표시할 수도 있습니다. 앱의 설정 페이지에서 사용자가 특정 유형의 앱을 사용 또는 사용 중지하도록 업데이트.

주기적 백그라운드 동기화 이벤트에 응답

주기적 백그라운드 동기화 이벤트에 응답하려면 periodicsync 이벤트를 추가하세요. 서비스 워커에 대한 사용자 인증 정보를 제공합니다. 여기에 전달된 event 객체에는 등록 중에 사용된 값과 일치하는 tag 매개변수입니다. 예를 들어 주기적 백그라운드 동기화가 'content-sync' 이름으로 등록된 후 event.tag은(는) 'content-sync'입니다.

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'content-sync') {
    // See the "Think before you sync" section for
    // checks you could perform before syncing.
    event.waitUntil(syncContent());
  }
  // Other logic for different tags as needed.
});

동기화 등록 취소

등록된 동기화를 종료하려면 periodicSync.unregister() 동기화를 선택합니다.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

인터페이스

다음은 Periodic Background에서 제공하는 인터페이스에 대한 간략한 설명입니다. Sync API

  • PeriodicSyncEvent 다음 시점에 ServiceWorkerGlobalScope.onperiodicsync 이벤트 핸들러로 전달됨 시간을 가집니다.
  • PeriodicSyncManager 주기적 동기화를 등록 및 등록 취소하고 등록된 있습니다. ServiceWorkerRegistration.periodicSync에서 이 클래스의 인스턴스를 가져옵니다. 속성
  • ServiceWorkerGlobalScope.onperiodicsync PeriodicSyncEvent를 수신하는 핸들러를 등록합니다.
  • ServiceWorkerRegistration.periodicSync PeriodicSyncManager 참조를 반환합니다.

예

콘텐츠 업데이트

다음 예에서는 주기적인 백그라운드 동기화를 사용하여 뉴스 사이트나 블로그의 최신 기사를 다운로드하고 캐시합니다. 동기화 유형 ('update-articles')을 나타내는 태그 이름을 확인합니다. updateArticles() 호출은 event.waitUntil()로 래핑되므로 기사가 다운로드되고 저장되기 전에 서비스 워커가 종료되지 않습니다.

async function updateArticles() {
  const articlesCache = await caches.open('articles');
  await articlesCache.add('/api/articles');
}

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'update-articles') {
    event.waitUntil(updateArticles());
  }
});

기존 웹 앱에 주기적 백그라운드 동기화 추가

이 변경사항 집합이 기존 PWA에 주기적인 백그라운드 동기화 이 예에는 웹 앱의 주기적 백그라운드 동기화 상태입니다.

디버깅

주기적 백그라운드 동기화를 얻고 처음부터 끝까지 확인하는 일은 어려울 수 있습니다. 테스트할 수 있습니다 활성 등록, 대략적인 동기화 정보 이전 동기화 이벤트의 로그는 디버깅 중에 유용한 컨텍스트를 제공 웹 앱의 동작을 확인할 수 있습니다 다행히 이 모든 정보는 Chrome DevTools의 실험적 기능을 통해 이를 구현할 수 있습니다.

로컬 활동 기록 중

DevTools의 Periodic Background Sync 섹션은 주요 이벤트를 중심으로 구성되어 있습니다. 주기적 백그라운드 동기화 수명 주기 동안 동기화: 동기화 등록, 백그라운드 동기화, 등록 취소 등이 있습니다. 이러한 이벤트에 대한 정보를 얻으려면 녹화 시작을 클릭합니다.

<ph type="x-smartling-placeholder">
</ph> DevTools의 Record 버튼 <ph type="x-smartling-placeholder">
</ph> DevTools의 Record 버튼

기록하는 동안 이벤트에 해당하는 항목이 DevTools에 표시되며 메타데이터와 컨텍스트가 모두 기록됩니다

<ph type="x-smartling-placeholder">
</ph> 기록된 주기적 백그라운드 동기화 데이터의 예 <ph type="x-smartling-placeholder">
</ph> 기록된 주기적 백그라운드 동기화 데이터의 예

녹화를 한 번 사용 설정하면 최대 3일 동안 사용 설정된 상태로 유지되며 DevTools가 백그라운드 동기화에 관한 로컬 디버깅 정보를 캡처하도록 허용 향후 몇 시간 동안 발생할 수 있습니다.

이벤트 시뮬레이션

백그라운드 활동을 녹화하는 것도 도움이 될 수 있지만 periodicsync 핸들러를 즉시 테스트하려는 경우 이벤트를 발생시킵니다.

이 작업은 App Engine의 Application 패널에서 Service Workers 섹션을 통해 수행할 수 있습니다. Chrome DevTools를 사용할 수 있습니다. Periodic Sync 필드를 사용하면 이벤트를 만들고, 원하는 횟수만큼 트리거할 수 있습니다.

&#39;서비스 워커&#39; &#39;Periodic Sync(주기적 동기화)&#39;가 표시된 Application(애플리케이션) 패널의 섹션 텍스트 필드와 버튼입니다.

DevTools 인터페이스 사용

Chrome 81부터 주기적 백그라운드 동기화 섹션이 DevTools Application 패널

Periodic Background Sync 섹션이 표시된 Application 패널