오프라인으로 작업할 수 있게 해주는 서비스 워커가 포함된 프로그레시브 웹 앱이 완성되었습니다. 수고하셨습니다. 또한 웹 앱에 기존 Google 애널리틱스를 설정했으므로 오프라인에서 발생하는 사용에서 얻을 수 있는 유용한 분석 정보를 놓칠 일이 없습니다. 하지만 오프라인 상태에서 Google 애널리틱스로 데이터를 전송하려고 하면 요청이 실패하고 데이터가 손실됩니다.
당연히 서비스 워커에 대해 배우는 것이 당연합니다. 구체적으로 설명하자면, IndexedDB
를 사용하여 Google 애널리틱스 요청을 저장하고 나중에 네트워크를 사용할 수 있을 때 다시 시도하는 코드를 서비스 워커에 추가하는 것입니다. Google은 이 로직을 오픈소스 Google I/O 웹 앱의 일부로 처리하기 위해 코드를 공유했지만 이 방식이 유용한 패턴임을 알게 되었으며 코드를 복사하여 붙여넣기가 취약할 수 있습니다.
서비스 워커 내에서 오프라인 Google 애널리틱스 요청을 처리하는 데 필요한 모든 기능이 npm 패키지로 통합되었습니다. npm install --save-dev sw-offline-google-analytics
sw-offline-google-analytics 사용
기존 서비스 워커 코드 내에서 다음을 추가합니다.
// This code should live inside your service worker JavaScript, ideally
// before any other 'fetch' event handlers are defined:
// First, import the library into the service worker global scope:
importScripts('path/to/offline-google-analytics-import.js');
// Then, call goog.offlineGoogleAnalytics.initialize():
// See https://github.com/GoogleChrome/workbox/tree/main/packages/workbox-google-analytics
goog.offlineGoogleAnalytics.initialize();
// At this point, implement any other service worker caching strategies
// appropriate for your web app.
다음은
내부는 어떤 상황인가요?
sw-offline-google-analytics
는 서비스 워커에 Google 애널리틱스 도메인으로 전송되는 요청에 응답하는 새 fetch
이벤트 핸들러를 설정합니다. 라이브러리는 Google 애널리틱스 이외의 요청을 무시하므로 서비스 워커의 다른 fetch
이벤트 핸들러가 이러한 리소스에 적절한 전략을 구현할 수 있습니다. 먼저 네트워크에 대한 요청 처리를 시도합니다. 사용자가 온라인 상태이면 정상적으로 진행됩니다.
네트워크 요청이 실패하는 경우 라이브러리는 IndexedDB
에 대한 요청에 대한 정보와 함께 요청이 처음 이루어진 시간을 나타내는 타임스탬프를 자동으로 저장합니다. 서비스 워커가 시작될 때마다 라이브러리가 몇 가지 추가 Google 애널리틱스 매개변수와 함께 대기 중인 요청을 확인하고 요청 재전송을 시도합니다.
- 원래 시간에 올바르게 귀속되도록 요청을 처음 시도한 후 경과한 시간으로 설정된
qt
매개변수 goog.offlineGoogleAnalytics.initialize()
에 전달된 구성 객체의parameterOverrides
속성에 제공된 모든 추가 매개변수 및 값 예를 들어 맞춤 측정기준을 포함하여 서비스 워커에서 재전송된 요청과 즉시 전송된 요청을 구분할 수 있습니다.
요청이 다시 전송되었다면 다행입니다. IndexedDB에서 요청이 삭제됩니다. 재시도가 실패하고 최초 요청이 24시간 이내에 이루어진 경우, 다음에 서비스 워커가 시작될 때 다시 시도되도록 IndexedDB
에 보관됩니다. 4시간 이상 경과한 Google 애널리틱스 조회는 처리되지 않을 수 있지만 '만일의 경우'에 약간 오래된 조회를 다시 전송해도 문제가 되지 않습니다.
sw-offline-google-analytics
는 Google 애널리틱스를 부트스트랩하는 데 필요한 실제 analytics.js
JavaScript 코드에 대해 '네트워크를 우선으로 하여 캐시로 대체' 전략도 implements합니다.
앞으로 더 많은 기능이 추가될 예정입니다.
sw-offline-google-analytics
는 기존 서비스 워커 구현에 드롭인 개선사항을 제공하기 위한 라이브러리 컬렉션인 더 큰 sw-helpers
프로젝트의 일부입니다.
이 프로젝트의 일부인 sw-appcache-behavior
도 서비스 워커 내 기존 AppCache 매니페스트에 정의된 캐싱 전략을 구현하는 라이브러리입니다. 이는 적어도 초기에 일관된 캐싱 전략을 유지하면서 AppCache에서 서비스 워커로 마이그레이션하는 데 도움을 주기 위한 것입니다.
라이브러리에 관한 다른 아이디어가 있다면 언제든지 알려 주세요. Issue Tracker에서 요청을 제출해 주세요.