คุณจึงมี Progressive Web App ที่มีโปรแกรมทำงานของบริการซึ่งจะช่วยให้แอปทำงานแบบออฟไลน์ได้ เยี่ยมเลย คุณได้ตั้งค่า Google Analytics สำหรับเว็บแอปไว้แล้ว และไม่อยากพลาดข้อมูลเชิงลึกด้านการวิเคราะห์ใดๆ ที่มาจากการใช้งานที่เกิดขึ้นขณะออฟไลน์ แต่หากคุณพยายามส่งข้อมูลไปยัง Google Analytics ขณะออฟไลน์ คำขอเหล่านั้นจะล้มเหลวและข้อมูลจะสูญหายไป
โซลูชันนี้ไม่น่าแปลกใจเลยที่จะได้เรียนรู้ว่าอะไรคือโปรแกรมทำงานของบริการ กล่าวอย่างเจาะจงคือ ก็คือการเพิ่มโค้ดให้กับ Service Worker เพื่อจัดเก็บคำขอ Google Analytics (โดยใช้ IndexedDB) และลองใหม่ในภายหลังเมื่อคาดว่าจะมีเครือข่ายพร้อมใช้งาน เราได้แชร์โค้ดเพื่อจัดการกับตรรกะนี้โดยเป็นส่วนหนึ่งของเว็บแอป Google I/O โอเพนซอร์ส แต่ตระหนักดีว่ารูปแบบนี้เป็นรูปแบบที่เป็นประโยชน์ และการคัดลอกและวางโค้ดก็อาจไม่รัดกุม
วันนี้เรายินดีที่จะแจ้งให้ทราบว่าเราได้รวมทุกอย่างที่จำเป็นในการจัดการคำขอ Google Analytics แบบออฟไลน์ภายใน Service Worker ของคุณแล้วในแพ็กเกจ npm: npm install --save-dev sw-offline-google-analytics
การใช้ sw-offline-google-analytics
เพิ่มรายการต่อไปนี้จากภายในโค้ด Service Worker ที่มีอยู่
// 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 ใหม่ใน Service Worker ของคุณซึ่งจะตอบกลับคำขอที่ส่งไปยังโดเมน Google Analytics (ไลบรารีจะไม่สนใจคำขอที่ไม่ใช่ของ Google Analytics ซึ่งทำให้ตัวแฮนเดิลเหตุการณ์ fetch อื่นๆ ของโปรแกรมทำงานของบริการได้นำกลยุทธ์ที่เหมาะสมสำหรับทรัพยากรเหล่านั้นไปใช้) โดยก่อนอื่นจะพยายามดำเนินการตามคำขอกับเครือข่าย หากผู้ใช้ออนไลน์อยู่ ก็จะดำเนินการตามปกติ
หากส่งคำขอเครือข่ายไม่สำเร็จ ไลบรารีจะจัดเก็บข้อมูลเกี่ยวกับคำขอที่ส่งไปยัง IndexedDB โดยอัตโนมัติ พร้อมการประทับเวลาซึ่งระบุเวลาที่ส่งคำขอครั้งแรก ทุกครั้งที่ Service Worker เริ่มทำงาน ไลบรารีจะตรวจสอบคำขอที่อยู่ในคิวและพยายามส่งซ้ำ รวมถึงพารามิเตอร์ Google Analytics เพิ่มเติมบางอย่าง ดังนี้
- พารามิเตอร์
qtซึ่งกำหนดระยะเวลาที่ผ่านไปนับตั้งแต่ที่มีการส่งคำขอในตอนแรก เพื่อให้แน่ใจว่าจะมีการระบุแหล่งที่มาของเวลาเดิมอย่างถูกต้อง - พารามิเตอร์เพิ่มเติมและค่าที่ระบุไว้ในพร็อพเพอร์ตี้
parameterOverridesของออบเจ็กต์การกำหนดค่าที่ส่งไปยังgoog.offlineGoogleAnalytics.initialize()ตัวอย่างเช่น คุณรวมมิติข้อมูลที่กำหนดเองเพื่อแยกคำขอที่ส่งใหม่จาก Service Worker กับคำขอที่ส่งทันทีได้
หากส่งคำขออีกครั้งได้สำเร็จ ก็เยี่ยมเลย คำขอถูกนำออกจาก IndexedDB หากลองอีกครั้งไม่สำเร็จและส่งคำขอแรกไม่ถึง 24 ชั่วโมง ระบบจะเก็บคำขอนั้นไว้ใน IndexedDB เพื่อลองใหม่ในครั้งถัดไปที่ Service Worker เริ่มทำงาน โปรดทราบว่า Hit ของ Google Analytics ที่เก่ากว่า 4 ชั่วโมงจะไม่ได้รับการประมวลผล แต่การส่ง Hit ที่เก่ากว่า "เผื่อไว้" อีกครั้งจะไม่ควรส่งผลเสีย
นอกจากนี้ sw-offline-google-analytics ยังimplementsกลยุทธ์ "เครือข่ายมาก่อน กลับไปใช้แคช" สำหรับanalytics.jsโค้ด JavaScript จริงที่จำเป็นในการเปิดระบบ Google Analytics
ยังมีอีกมากมายที่จะตามมา
sw-offline-google-analytics เป็นส่วนหนึ่งของโปรเจ็กต์ sw-helpers ขนาดใหญ่ ซึ่งเป็นคอลเล็กชันของไลบรารีที่มีวัตถุประสงค์เพื่อเพิ่มการเพิ่มประสิทธิภาพให้กับการติดตั้งใช้งาน Service Worker ที่มีอยู่
นอกจากนี้ ส่วนหนึ่งของโปรเจ็กต์ดังกล่าวคือ sw-appcache-behavior ซึ่งเป็นไลบรารีที่ใช้กลยุทธ์การแคชที่กำหนดไว้ใน ไฟล์ Manifest ของ AppCache ที่มีอยู่ภายใน Service Worker โดยมีไว้เพื่อช่วยให้คุณย้ายข้อมูลจาก AppCache ไปยัง Service Worker ขณะเดียวกันก็รักษากลยุทธ์การแคชให้สอดคล้องกันได้อย่างน้อยในช่วงแรก
หากคุณมีไอเดียเกี่ยวกับห้องสมุดอื่นๆ เรายินดีรับฟังความคิดเห็นจากคุณ ดังนั้นโปรดยื่นคำขอในเครื่องมือติดตามปัญหา