v149 · Service Workers · Analytics
Analytics Tracker
Analytics tools need to distinguish genuine new page views from reloads, back-navigations, and routine link clicks — all of which fire a navigation event but mean very different things for engagement metrics. Request.isReloadNavigation gives service workers a reliable signal to classify each load type, which this page simulates and visualises.
0fresh page loads
0reloads (F5/Ctrl+R)
link navigations
0back/fwd navigations
| # | t (ms) | isReloadNavigation | navigationType | Analytics event | URL |
|---|---|---|---|---|---|
| Simulate loads above… | |||||
// In service-worker.js — classify each navigation for analytics
self.addEventListener('fetch', event => {
const req = event.request;
if (req.mode !== 'navigate') return;
// Classify the load type
let loadType;
if (req.isReloadNavigation) {
loadType = 'reload'; // F5, Ctrl+R, reload button
} else if (performance.navigation?.type === 2) {
loadType = 'back_forward'; // browser back/forward
} else if (document.referrer) {
loadType = 'navigation'; // link click from same site
} else {
loadType = 'fresh'; // direct URL or new tab
}
// Only count genuine new views and navigations — not reloads
if (loadType !== 'reload') {
analytics.track('page_view', { loadType, url: req.url });
}
});
see also
- Reload Detection Demo — basic detection
- History State Manager — preserve state on back/fwd
- Cache-Bypass Dashboard — caching strategies
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗