Skip to content

SSE Service Worker

Change a price in Magento, every browser updates instantly. No manual purge, no deploy.

A Service Worker is JavaScript code that runs in the browser's background, intercepting network requests and serving responses from a local cache. Accelerate Guru registers a Service Worker on the visitor's browser during their first visit and uses it to:

  1. Cache static assets locally — CSS, JavaScript, fonts, and images are stored in the browser's cache. On every subsequent visit (or navigation), these assets load from disk without a network request.
  2. Optionally cache full HTML pages — for repeat visitors, even the page HTML is served instantly from the browser cache.
  3. Receive real-time invalidation events — via Server-Sent Events (SSE), the Service Worker is told exactly which cache entries are stale and evicts only those, without touching anything else.

#Why this matters for Magento

A typical Magento page loads 15–30 static assets (CSS files, JS bundles, images, fonts). On a first visit, these are downloaded from the server. On repeat visits — if there is no Service Worker — the browser still makes conditional requests to verify each asset hasn't changed (If-None-Match, If-Modified-Since). Each of these requests takes a network round-trip.

With the Service Worker:

  • On repeat visits, all static assets are served from the browser's disk cache with zero network requests.
  • For a store where 80% of visitors are returning customers, this alone can cut page load time in half.

#Modes

The mode setting controls what the Service Worker caches:

#off

No Service Worker is registered. This is equivalent to not having this feature at all. Use when you have compatibility issues with a specific theme or extension.

#static

The Service Worker caches only static assets: JavaScript, CSS, fonts, and images. HTML pages are never cached in the browser — every page navigation goes to the server (which usually serves from DragonflyDB in < 2 ms). This is the safest mode — no risk of users seeing stale prices or outdated content.

Tip

static mode is a good starting point for stores that haven't tested the Service Worker yet. The performance benefit for static assets is immediate and risk-free.

#html

The Service Worker also caches full HTML pages. Repeat visitors see pages rendered entirely from the browser cache — zero network requests for the entire page. This is the fastest possible experience.

The risk: a visitor might see a stale version of the page (old price, out-of-stock product shown as in-stock) if the cache is not invalidated promptly. This is mitigated by realtime_invalidation (see below) and html_max_age.

#adaptive (default)

adaptive starts in html mode but monitors the response for session-indicating cookies. If a response sets cookies that suggest the visitor is logged in or has items in their cart, the mode automatically downgrades to static for that session. This gives returning anonymous browsers the fastest experience while protecting logged-in users from stale content.


#Real-time invalidation via SSE

This is the feature that makes the Service Worker safe to use in production:

Magento admin saves a product (new price: $29.99)
         │
         ▼
  MySQL: UPDATE catalog_product_entity SET price = 29.99 WHERE ...
         │
         ▼
  Accelerate Guru MySQL proxy detects the write
         │
         ▼
  Edge sends SSE message to all connected browsers:
  "invalidate: /catalog/product/view/id/123"
         │
         ▼
  Service Worker in each browser receives the event
         │
         ▼
  Service Worker deletes cache entry for that URL
         │
         ▼
  Next time the visitor navigates to that product page,
  it is fetched fresh from the server (which serves the
  new price from DragonflyDB, updated within milliseconds)

Result: a price change in Magento admin appears in every open browser tab in seconds, with no manual purge, no deploy, and no page reload.

This is powered by the browser's EventSource API — the Service Worker maintains a persistent connection to the edge's SSE endpoint and processes invalidation events as they arrive.


#Configuration

[service_worker]
; Enable the service worker (off by default — test before enabling in production)
enabled = false

; off | static | html | adaptive
mode = adaptive

; Push SSE invalidations to the browser when data changes
realtime_invalidation = true

; URL prefixes the SW must NEVER intercept
bypass_paths = /checkout,/customer,/admin,/rest/,/graphql,/paypal,/onepage,/sales

; Maximum browser-side age of cached HTML (seconds)
; After this, the SW serves stale and fetches fresh in the background
html_max_age = 600

; auto | luma | hyva | skip
theme = auto

#bypass_paths

The Service Worker never intercepts requests to paths listed here. This is critical — checkout and account pages must always go to the server to get live, session-specific data.

Warning

Always include /checkout and /customer in bypass_paths. Removing them can cause users to see a cached (stale) cart total or a cached order confirmation from a previous order.

#html_max_age

After html_max_age seconds, the Service Worker considers its cached HTML stale and:

  1. Immediately serves the stale version (no loading spinner).
  2. Fetches a fresh version from the server in the background.
  3. Updates the cache for the next visit.

The default of 600 seconds (10 minutes) is conservative. For a store with frequent price changes, set to 300 or use realtime_invalidation to ensure changes propagate instantly.

#theme

Accelerate Guru applies theme-specific Service Worker patches to ensure compatibility:

  • auto — auto-detects whether theme patches are needed from the response HTML. This is the correct default for almost all stores.
  • skip — disables all theme-specific patches entirely (use for fully custom themes that don't need them).
  • force — always applies theme compatibility patches, even if detection would normally skip them.

#Verifying the Service Worker is active

#In Chrome / Edge DevTools

  1. Open DevTools → Application tab.
  2. In the left panel, click Service Workers.
  3. You should see accelerate-guru-sw.js listed with status activated and running.
  4. Click Cache Storage to see the list of cached assets and pages.

#In the browser Network panel

On a repeat visit with mode = static, static assets should show (Service Worker) or (disk cache) in the "Size" column of the Network panel, with 0 ms transfer time.

#Via response headers

The Service Worker injection is confirmed by the presence of the SW registration script in the HTML. Look for a <script> tag near </body> that registers /accelerate-guru-sw.js.


#Disabling the Service Worker for a specific visitor

For debugging, add ?ag_nosw=1 to any URL to bypass the Service Worker for that request. The ag_nosw parameter is stripped before caching.


#Security considerations

The Service Worker script (/accelerate-guru-sw.js) is served over HTTPS and includes a Cache-Control: no-cache header. This means it is re-fetched on every page load to pick up updates immediately — unlike application-level service workers that may be stuck on an old version for days.

The SSE invalidation connection is authenticated by the session cookie and scoped to the current origin. Cross-origin attacks cannot manipulate the cache.