이제 오프라인에서 작동할 수 있는 서비스 워커가 포함된 프로그레시브 웹 앱이 완성되었습니다. 좋습니다. 또한 웹 앱에 기존 Google 애널리틱스를 설정했으며 오프라인 상태에서 발생하는 사용량에서 얻을 수 있는 분석 정보를 놓치고 싶지 않습니다. 하지만 오프라인 상태에서 Google 애널리틱스로 데이터를 전송하려고 하면 요청이 실패하고 데이터가 손실됩니다.
솔루션은 서비스 워커입니다. 특히 서비스 워커에 코드를 추가하여 Google 애널리틱스 요청을 저장하고 (IndexedDB 사용) 나중에 네트워크를 사용할 수 있게 되면 다시 시도합니다. 이 로직을 처리하는 코드를 공유하여 오픈소스 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는 서비스 워커에 새 fetch 이벤트 핸들러를 설정하여 Google 애널리틱스 도메인에 대한 요청에 응답합니다. 라이브러리는 Google 애널리틱스 이외의 요청을 무시하므로 서비스 워커의 다른 fetch 이벤트 핸들러가 이러한 리소스에 적절한 전략을 구현할 수 있습니다. 먼저 네트워크에 대한 요청을 처리하려고 시도합니다. 사용자가 온라인 상태이면 정상적으로 진행됩니다.
네트워크 요청이 실패하면 라이브러리는 요청에 관한 정보를 요청이 처음 이루어진 시점을 나타내는 타임스탬프와 함께 IndexedDB에 자동으로 저장합니다. 서비스 워커가 시작될 때마다 라이브러리는 대기열에 있는 요청을 확인하고 추가 Google 애널리틱스 매개변수와 함께 다시 전송하려고 시도합니다.
- 원래 시간이 올바르게 반영되도록 요청이 처음 시도된 후 경과된 시간으로 설정된
qt매개변수입니다. - 구성 객체의
parameterOverrides속성에 제공된 추가 매개변수 및 값은goog.offlineGoogleAnalytics.initialize()에 전달됩니다. 예를 들어 맞춤 측정기준을 포함하여 서비스 워커에서 다시 전송된 요청을 즉시 전송된 요청과 구분할 수 있습니다.
요청을 다시 전송하여 성공하면 좋습니다. 요청이 IndexedDB에서 삭제됩니다. 재시도가 실패하고 초기 요청이 24시간 이내에 이루어진 경우 다음에 서비스 워커가 시작될 때 다시 시도할 수 있도록 IndexedDB에 유지됩니다. Google 애널리틱스에서 4시간이 지난 조회수는 처리되지 않을 수도 있지만 '혹시나' 해서 약간 오래된 조회수를 다시 전송해도 괜찮습니다.
sw-offline-google-analytics는 또한 Google 애널리틱스를 부트스트랩하는 데 필요한 실제 analytics.js JavaScript 코드에 '네트워크 우선, 캐시로 대체' 전략을 구현합니다.
앞으로 더 많은 기능이 추가될 예정입니다.
sw-offline-google-analytics는 기존 서비스 워커 구현에 드롭인 개선사항을 제공하기 위한 라이브러리 모음인 더 큰 sw-helpers 프로젝트의 일부입니다.
또한 이 프로젝트의 일부는 서비스 워커 내에서 기존 AppCache 매니페스트에 정의된 캐싱 전략을 구현하는 라이브러리인 sw-appcache-behavior입니다. 이 API는 적어도 초기에는 일관된 캐싱 전략을 유지하면서 AppCache에서 서비스 워커로 이전하는 데 도움이 되도록 설계되었습니다.
보관함에 관한 다른 아이디어가 있으면 알려주세요. Issue Tracker에서 요청을 제출해 주세요.