Dễ dàng sử dụng Google Analytics ngoại tuyến

Vậy là bạn đã có một ứng dụng web tiến bộ, với một trình chạy dịch vụ cho phép ứng dụng hoạt động khi không có mạng. Tuyệt vời! Bạn cũng đã thiết lập Google Analytics hiện tại cho ứng dụng web của mình và bạn không muốn bỏ lỡ bất kỳ thông tin chi tiết phân tích nào từ hoạt động sử dụng xảy ra khi không có kết nối mạng. Tuy nhiên, nếu bạn cố gắng gửi dữ liệu đến Google Analytics khi không có kết nối mạng, thì những yêu cầu đó sẽ không thành công và dữ liệu sẽ bị mất.

Không nên làm bạn ngạc nhiên khi tìm hiểu, giải pháp là trình chạy dịch vụ! Cụ thể, đó là thêm mã vào trình chạy dịch vụ để lưu trữ các yêu cầu của Google Analytics (sử dụng IndexedDB) và thử lại sau khi hy vọng có mạng. Chúng tôi đã chia sẻ mã để xử lý logic này trong ứng dụng web Google I/O nguồn mở, nhưng nhận ra đây là một mô hình hữu ích và việc sao chép và dán mã có thể không dễ dàng.

Hôm nay, chúng tôi vui mừng thông báo rằng tất cả những gì bạn cần để xử lý các yêu cầu Google Analytics ngoại tuyến trong trình chạy dịch vụ đã được nhóm lại thành gói npm: npm install --save-dev sw-offline-google-analytics

Sử dụng sw-offline-google-analytics

Trong mã trình chạy dịch vụ hiện có, hãy thêm đoạn mã sau:

// 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.

Vậy là xong!

Điều gì đang diễn ra?

sw-offline-google-analytics thiết lập một trình xử lý sự kiện fetch mới trong trình chạy dịch vụ để phản hồi các yêu cầu được gửi đến miền Google Analytics. (Thư viện sẽ bỏ qua các yêu cầu không phải của Google Analytics, giúp các trình xử lý sự kiện fetch khác của worker dịch vụ có cơ hội triển khai các chiến lược phù hợp cho những tài nguyên đó.) Trước tiên, thiết bị này sẽ cố thực hiện yêu cầu dựa trên mạng. Nếu người dùng đang trực tuyến, quá trình này sẽ diễn ra như bình thường.

Nếu yêu cầu mạng không thành công, thư viện sẽ tự động lưu trữ thông tin về yêu cầu tới IndexedDB, cùng với một dấu thời gian cho biết thời điểm yêu cầu được thực hiện lần đầu. Mỗi khi trình chạy dịch vụ của bạn khởi động, thư viện sẽ kiểm tra các yêu cầu trong hàng đợicố gắng gửi lại các yêu cầu đó, cùng với một số thông số Google Analytics bổ sung:

  • Tham số qt, được đặt thành khoảng thời gian đã trôi qua kể từ lần đầu thực hiện yêu cầu, để đảm bảo rằng thời gian ban đầu được phân bổ đúng cách.
  • Mọi thông số và giá trị bổ sung được cung cấp trong thuộc tính parameterOverrides của đối tượng cấu hình đã được chuyển vào goog.offlineGoogleAnalytics.initialize(). Ví dụ: bạn có thể bao gồm một phương diện tuỳ chỉnh để phân biệt các yêu cầu được gửi lại từ trình chạy dịch vụ với các yêu cầu được gửi ngay lập tức.

Nếu gửi lại yêu cầu thành công thì thật tuyệt! Yêu cầu đó sẽ bị xoá khỏi IndexedDB. Nếu quá trình thử lại không thành công và yêu cầu ban đầu được thực hiện chưa đến 24 giờ trước, thì yêu cầu này sẽ được lưu giữ trong IndexedDB để được thử lại vào lần tiếp theo trình chạy dịch vụ bắt đầu. Bạn nên lưu ý rằng chúng tôi không đảm bảo xử lý những lượt truy cập Google Analytics cũ hơn 4 giờ, nhưng việc gửi lại một số lượt truy cập cũ hơn "chỉ trong trường hợp" sẽ không ảnh hưởng gì.

sw-offline-google-analytics cũng implements chiến lược "mạng trước, chuyển lại về bộ nhớ đệm" cho mã JavaScript analytics.js thực tế cần thiết để tự khởi động Google Analytics.

Vẫn còn nhiều cơ hội khác sắp ra mắt!

sw-offline-google-analytics nằm trong dự án sw-helpers rộng lớn hơn, là một bộ sưu tập thư viện nhằm cung cấp các tính năng nâng cao có thể sử dụng cho quá trình triển khai trình chạy dịch vụ hiện có.

Ngoài ra, một phần của dự án đó là sw-appcache-behavior, một thư viện triển khai các chiến lược lưu vào bộ nhớ đệm được xác định trong tệp kê khai AppCache hiện có bên trong một trình chạy dịch vụ. Bản phát hành này nhằm giúp bạn di chuyển từ AppCache sang trình chạy dịch vụ trong khi vẫn duy trì chiến lược lưu vào bộ nhớ đệm nhất quán, ít nhất là ở giai đoạn đầu.

Nếu bạn có ý tưởng khác về thư viện, chúng tôi muốn nghe ý kiến của bạn. Vì vậy, hãy gửi yêu cầu qua công cụ theo dõi lỗi!