간편해진 오프라인 Google 애널리틱스

오프라인으로 작업할 수 있게 해주는 서비스 워커가 포함된 프로그레시브 웹 앱이 완성되었습니다. 수고하셨습니다. 또한 웹 앱에 기존 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 애널리틱스 매개변수와 함께 대기 중인 요청을 확인하고 요청 재전송을 시도합니다.

요청이 다시 전송되었다면 다행입니다. 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에서 요청을 제출해 주세요.