Vậy là bạn đã có một ứng dụng web tiến bộ, hoàn chỉnh 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 cho ứng dụng web của mình và 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ó 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ì các yêu cầu đó sẽ không thành công và dữ liệu sẽ bị mất.
Giải pháp này không có gì đáng ngạc nhiên, đó là trình chạy dịch vụ! Cụ thể, phương thức này sẽ thêm mã vào worker dịch vụ để lưu trữ các yêu cầu Google Analytics (sử dụng IndexedDB) và thử lại các yêu cầu đó sau khi 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 thấy đây là một mẫu hữu ích và việc sao chép và dán mã có thể không ổn định.
Hôm nay, chúng tôi rất vui được thông báo rằng mọi thứ bạn cần để xử lý các yêu cầu Google Analytics ngoại tuyến trong worker dịch vụ của mình đã được đóng gói thành một gói npm: npm install --save-dev sw-offline-google-analytics
Sử dụng sw-offline-google-analytics
Trong mã worker dịch vụ hiện có, hãy thêm 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.
Chỉ vậy thôi!
Đ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 worker dịch vụ, trình xử lý này sẽ phản hồi các yêu cầu được gửi đến miền Google Analytics. (Thư viện này bỏ qua các yêu cầu không phải của Google Analytics, cho phé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 các tài nguyên đó.) Trước tiên, ứng dụng sẽ cố gắng thực hiện yêu cầu 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 đó vào IndexedDB, cùng với dấu thời gian cho biết thời điểm yêu cầu được thực hiện ban đầu. Mỗi khi worker dịch vụ khởi động, thư viện sẽ kiểm tra các yêu cầu đã xếp hàng và cố 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 tiên yêu cầu được thực hiện, để đảm bảo rằng thời gian ban đầu được phân bổ đúng cách. - Mọi tham số bổ sung và giá trị được cung cấp trong thuộc tính
parameterOverridescủa đối tượng cấu hình được truyền đếngoog.offlineGoogleAnalytics.initialize(). Ví dụ: bạn có thể thê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 bạn 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 không thử lại được và yêu cầu ban đầu được thực hiện chưa đầy 24 giờ trước, thì yêu cầu đó sẽ được lưu giữ trong IndexedDB để thử lại vào lần tiếp theo khi worker dịch vụ khởi động. Xin lưu ý rằng Google Analytics không đảm bảo sẽ xử lý các lượt truy cập cũ hơn 4 giờ, nhưng việc gửi lại các lượt truy cập cũ hơn một chút "để phòng trường hợp" sẽ không gây hại gì.
sw-offline-google-analytics cũng implements chiến lược"ưu tiên mạng, sau đó quay lại bộ nhớ đệm" cho mã JavaScript analytics.js thực tế cần thiết để khởi động Google Analytics.
Chúng tôi sẽ tiếp tục cải tiến!
sw-offline-google-analytics là một phần của dự án sw-helpers lớn hơn. Đây 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 cho việc triển khai worker dịch vụ hiện có.
Ngoài ra, dự án đó còn có 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 worker dịch vụ. Mục đích của tính năng này là giúp bạn di chuyển từ AppCache sang worker dịch vụ trong khi vẫn duy trì một chiến lược lưu vào bộ nhớ đệm nhất quán, ít nhất là ban đầu.
Nếu bạn có ý tưởng khác về thư viện, hãy chia sẻ với chúng tôi. Vì vậy, vui lòng gửi yêu cầu trong công cụ theo dõi lỗi!