How to Inspect and Debug Service Workers in Safari Web Inspector on Mac

Service Workers provide the architectural backbone for Progressive Web Apps (PWAs), offline caching, background synchronization, and Web Push notifications in modern browsers. In WebKit and Apple Safari on macOS, Service Workers operate within isolated worker execution contexts separate from the main DOM window. Debugging these background scripts requires using Safari Web Inspector to inspect worker lifecycle states, review origin cache storage, and trace push notifications.

Enabling the Safari Develop Menu

By default, Safari hides developer tools. Before inspecting Service Workers, enable the Develop menu:

1. Open Safari on macOS.
2. In the menu bar, select Safari > Settings (or press Cmd + ,).
3. Navigate to the Advanced tab.
4. Check the box labelled Show features for web developers (in macOS Sonoma and Sequoia, this enables the Develop menu and developer shortcuts).

Locating Registered Service Workers

Safari organizes worker targets under the Develop menu and within the Storage panel of Web Inspector.

To inspect active Service Workers across all domains:

1. Click Develop in the top menu bar.
2. Hover over Service Workers.
3. Safari displays all registered worker origins and their associated active scripts.
4. Click on any service worker target to open an independent Web Inspector window attached directly to that worker global scope.

Alternatively, navigate to your target web application in a standard Safari tab, press Option + Cmd + I to open Web Inspector, and switch to the Storage tab. In the left sidebar, expand the Service Workers section to inspect the worker bound to the active page origin.

Auditing Worker Registration and Lifecycle States

The Service Workers panel in Web Inspector details registration metadata essential for diagnosing update loops and registration failures:

• Scope: The URL path boundary governed by the service worker. Requests outside this directory path bypass the worker fetch handlers.
• Script URL: The physical URL of the registered JavaScript worker file.
• Status: Reflects the current lifecycle phase (Registering, Installing, Activated, or Redundant).
• Worker Thread: Indicates whether the worker execution thread is currently running or terminated due to inactivity.

To verify if the worker updates correctly when code changes occur on the server, click the Update button next to the registration entry. This forces Safari to bypass HTTP caches, download the newest worker script, and trigger the install event.

Inspecting Cache Storage and IndexedDB

Service Workers store offline assets (HTML shells, CSS stylesheets, scripts, images) in the Cache Storage API and structured data inside IndexedDB.

To inspect cached assets:

1. Open Web Inspector on the page (Option + Cmd + I).
2. Navigate to the Storage tab.
3. Expand Cache Storage in the left sidebar.
4. Click on a named cache partition (for example, v1-static-assets).
5. Web Inspector displays all cached requests, response headers, status codes, content lengths, and mime types.

Selecting any cached URL displays the full cached response body in the preview pane. To test cache invalidation, right-click any cached item and select Delete, or right-click the cache name and choose Clear Cache.

Simulating Offline Conditions and Cache-First Fallbacks

To verify that your Progressive Web App serves cached content seamlessly during network outages:

1. Open Web Inspector and click the Network tab.
2. Locate the network throttling dropdown in the top toolbar (indicated by a signal icon or network preset menu).
3. Select Offline.
4. Reload the webpage (Cmd + R).

If your Service Worker fetch event handler is implemented properly, Web Inspector shows requests fulfilled directly from (Service Worker) or Cache Storage with HTTP 200 responses, rather than failing with network connection errors.

Debugging Web Push and Background Events

Safari on macOS supports the Web Push API for sending notifications to users even when Safari is closed or running in the background. To debug push events:

1. Open the dedicated Service Worker Web Inspector window via Develop > Service Workers > [Target Origin].
2. Switch to the Sources tab.
3. Locate your self.addEventListener('push', ...) listener.
4. Click the line number to set a breakpoint inside the push handler.
5. Trigger a push payload from your backend notification server or test harness.
6. Safari pauses execution on the breakpoint, allowing you to inspect the incoming event.data.json() payload, decrypt authentication keys, and step through notification display logic.

Using Safari Web Inspector to inspect lifecycle states and cache stores ensures PWAs maintain reliable performance and compliant offline behavior across macOS.