Service Worker Debugger - Online View States & Update

A Service Worker is a script that runs in the background, separate from your web page, enabling features like offline support, push notifications, and background sync. Debugging is essential because SW lifecycle issues can cause stale content, failed updates, or broken offline functionality. This tool helps you inspect SW states, force updates, and test communication.

Installing: The SW is being installed for the first time or updated.
Waiting: A new version is ready but waiting for existing clients to close.
Active: The SW is currently controlling pages and handling events.
Redundant: The SW has been replaced or failed to install, and is no longer needed.

Use the Update All SW button to call registration.update(), which checks for a new version. If a new SW is found, it enters the "waiting" state. To immediately activate it, click Skip Waiting (requires the SW to handle SKIP_WAITING messages internally via self.skipWaiting()). Alternatively, closing all tabs using the old SW will activate the new one.

A SW waits when a new version is installed but older versions still have active clients (open tabs). The browser waits for all clients to be closed before activating the new SW. You can bypass this by implementing self.skipWaiting() inside the SW's install event, or by sending a SKIP_WAITING message from the client using this debugger tool.

Cache Storage is where Service Workers store network responses for offline use. Use the Cache Explorer section to view all cache stores, their entry counts, and individual cached URLs. You can expand each cache to see cached resources and clear caches individually or all at once.

Yes, this debugger only uses standard browser APIs (navigator.serviceWorker, caches) and does not modify your SW code. However, actions like "Unregister All" or "Clear All Caches" will permanently remove SW registrations and cached data for the current origin. Use these features with caution in production environments.