What is a Service Worker
A Service Worker is a JavaScript thread running separately from the page, intercepting network requests. The foundation of Progressive Web Apps: offline cache, push notifications, background sync. Lifecycle: install → activate → fetch events. Requires HTTPS (or localhost). Default scope — the directory where the .js file lives.
Below: details, example, related terms, FAQ.
Details
- Registration:
navigator.serviceWorker.register('/sw.js') - Lifecycle: install → waiting → activate → idle
- Cache API:
caches.open(),caches.match() - Fetch event: intercepts every network request in scope
- Background Sync + Push API — separate extensions
Example
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(r => r || fetch(e.request))
);
});Related Terms
Why teams trust us
How it works
Enter page URL
Lighthouse analyzes
Get CWV scores & tips
Why Does Site Speed Matter?
Page load speed directly impacts conversion, SEO rankings, and user satisfaction. Google uses Core Web Vitals as a ranking factor. Every extra second of load time cancost up to 7% in conversions.
Lighthouse Analysis
Google Lighthouse-based analysis: Performance, Accessibility, Best Practices, SEO.
Core Web Vitals
LCP (rendering), FID (interactivity), CLS (visual stability) — key Google metrics.
Resource Analysis
Breakdown by type: HTML, CSS, JavaScript, images, fonts. Size, request count, blocking resources.
Actionable Advice
Specific recommendations with savings estimates: image compression, caching, minification, etc.
Mobile vs Desktop
- Tested on Moto G Power emulation (slow CPU)
- Network: 4G (1.6 Mbps, 150ms RTT)
- Stricter speed scoring
- Google indexes mobile-first
- Priority for SEO optimization
- High CPU performance
- Fast connection without throttling
- Scores typically 20-40 points higher
- Important for B2B and corporate sites
- Use for baseline comparisons
Who uses this
SEO
Core Web Vitals for rankings
Developers
performance optimization
Marketers
speed = conversions
DevOps
performance regression
Common Mistakes
async/defer block rendering. Move to end or add attribute.Cache-Control, the browser reloads CSS/JS on every visit.Best Practices
loading="lazy" for images below the fold.brotli on;Cache-Control: max-age=31536000, immutable. HTML: max-age=0, s-maxage=60.<link rel="preload"> for fonts and CSS. Reduces LCP by 200-500ms.Get more with a free account
Speed check history, competitor comparison and PageSpeed monitoring.
Sign up freeLearn more
Frequently Asked Questions
Do I need a Service Worker without PWA?
Useful even for regular sites: offline-first UX, faster repeat visits via cache.
Does it work in Safari?
Yes, since iOS 11.3 (2018). Some advanced features (Push) only iOS 16.4+.
How to debug?
DevTools → Application → Service Workers. Force update, inspect fetch events.