Service workers in Svelte - Step-by-Step Execution

Concept Flow - Service workers

Browser loads page

↓

Register service worker

↓

Service worker installs

↓

Service worker activates

↓

Intercept fetch requests

↓

Serve cached or fetch from network

↓

Update cache if needed

↓

Page uses cached assets or network response

The browser loads the page and registers a service worker. The service worker installs and activates, then intercepts network requests to serve cached files or fetch new ones, updating the cache as needed.

Execution Sample

Svelte

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log('SW registered'))
    .catch(err => console.error('SW failed', err));
}

This code registers a service worker script if the browser supports it.

Execution Table

Step	Action	Evaluation	Result
1	Check if 'serviceWorker' in navigator	true	Proceed to register
2	Call navigator.serviceWorker.register('/sw.js')	Promise starts	Service worker registration begins
3	Service worker script downloads and installs	Install event fires	Service worker installed
4	Service worker activates	Activate event fires	Service worker ready to control pages
5	Page makes fetch request	Fetch event intercepted by service worker	Service worker serves cached or network response
6	Cache updated if new resources found	Cache storage updated	Future requests served from cache
7	Registration promise resolves	Then callback runs	Console logs 'SW registered'

💡 Service worker registered and active, ready to intercept fetch requests.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 7
navigator.serviceWorker	undefined	object exists	registration Promise pending	registration Promise resolved

Key Moments - 3 Insights

Why do we check if 'serviceWorker' is in navigator before registering?

Because not all browsers support service workers. The check (Step 1 in execution_table) prevents errors by only running registration if supported.

What happens between registering and activation of the service worker?

After registration starts (Step 2), the service worker script downloads and installs (Step 3), then activates (Step 4) before controlling pages.

How does the service worker serve content after activation?

It intercepts fetch requests (Step 5) and serves cached files or fetches from the network, updating cache as needed (Step 6).

Visual Quiz - 3 Questions

Look at the execution_table, what is the result of Step 1?

A Service worker registration begins

B Proceed to register

C Service worker installed

D Console logs 'SW registered'

💡 Hint

Check the 'Result' column for Step 1 in the execution_table.

At which step does the service worker start intercepting fetch requests?

A Step 3

B Step 4

C Step 5

D Step 7

💡 Hint

Look for 'Fetch event intercepted' in the 'Evaluation' column.

If the browser does not support service workers, what happens in Step 1?

A Check fails and registration does not run

B Service worker installs anyway

C Registration promise resolves

D Console logs 'SW registered'

💡 Hint

Step 1 checks if 'serviceWorker' in navigator is true before registering.

Concept Snapshot

Service workers run in the background to cache and serve files.
Check browser support with 'serviceWorker' in navigator.
Register with navigator.serviceWorker.register('/sw.js').
Service worker installs, activates, then intercepts fetch requests.
Use cache to serve offline or faster responses.
Update cache during fetch events for fresh content.

Full Transcript

Service workers are scripts that run in the background of your browser to help cache files and serve them quickly or offline. First, the browser loads your page and checks if it supports service workers by looking for 'serviceWorker' in the navigator object. If supported, it registers the service worker script using navigator.serviceWorker.register. The service worker then downloads and installs itself, followed by activation. Once active, it listens for fetch requests from your page. When a fetch happens, the service worker can respond with cached files or fetch new ones from the network, updating the cache as needed. This process helps your app work faster and even offline. The registration promise resolves when the service worker is ready, and you can see a console message confirming registration.

Practice

1. What is the main purpose of a service worker in a Svelte app?

easy

A. To enable offline support and faster loading by caching files

B. To handle user authentication and sessions

C. To manage component state and props

D. To style components dynamically

Solution

1. Step 1: Understand service worker role

   Service workers run in the background and cache files to allow offline use and faster loading.

2. Step 2: Differentiate from other app features

   User authentication, state management, and styling are handled by other parts of the app, not service workers.

3. Final Answer:

   To enable offline support and faster loading by caching files -> Option A

4. Quick Check:

   Service workers = offline support and caching [OK]

Hint: Service workers cache files for offline use [OK]

Common Mistakes:

• Confusing service workers with authentication
• Thinking service workers manage UI state
• Assuming service workers handle styling

2. Which is the correct way to register a service worker in a Svelte app?

easy

A. navigator.serviceWorker.register('/service-worker.js')

B. serviceWorker.register('/service-worker.js')

C. navigator.registerServiceWorker('/service-worker.js')

D. register.serviceWorker('/service-worker.js')

Solution

1. Step 1: Recall the correct API

   The standard API to register a service worker is navigator.serviceWorker.register().

2. Step 2: Check method and object names

   Only navigator.serviceWorker.register('/service-worker.js') uses the correct object (navigator.serviceWorker) and method (register).

3. Final Answer:

   navigator.serviceWorker.register('/service-worker.js') -> Option A

4. Quick Check:

   Use navigator.serviceWorker.register() [OK]

Hint: Use navigator.serviceWorker.register() to register [OK]

Common Mistakes:

• Using wrong method names like registerServiceWorker
• Calling register on wrong objects
• Missing navigator or serviceWorker in the call

3. What will happen if you try to register a service worker in a browser that does not support it, using this code?

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log('Registered'))
    .catch(err => console.error('Failed', err));
} else {
  console.log('No support');
}

medium

A. Registers the service worker anyway

B. Throws an error because serviceWorker is undefined

C. Logs 'No support' and does not attempt registration

D. Logs 'Registered' even if unsupported

Solution

1. Step 1: Check the feature detection condition

   The code checks if 'serviceWorker' exists in navigator before registering.

2. Step 2: Understand behavior if unsupported

   If unsupported, the else block runs, logging 'No support' and skipping registration.

3. Final Answer:

   Logs 'No support' and does not attempt registration -> Option C

4. Quick Check:

   Feature check prevents errors = logs 'No support' [OK]

Hint: Check 'serviceWorker' in navigator before registering [OK]

Common Mistakes:

• Assuming registration runs without support
• Expecting errors instead of safe fallback
• Confusing logs from then/catch with else block

4. Identify the error in this service worker registration code snippet:

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log('Registered'))
    .catch(err => console.error('Failed', err));
}

medium

A. The catch block is incorrectly placed

B. register() method is missing parentheses

C. The path '/sw.js' must be absolute URL

D. Should check 'serviceWorker' in navigator, not just navigator.serviceWorker

Solution

1. Step 1: Analyze the feature detection condition

   The code checks if navigator.serviceWorker exists directly, which can cause errors if undefined.

2. Step 2: Correct way to check support

   The proper check is 'serviceWorker' in navigator to safely detect support.

3. Final Answer:

   Should check 'serviceWorker' in navigator, not just navigator.serviceWorker -> Option D

4. Quick Check:

   Use 'serviceWorker' in navigator for support check [OK]

Hint: Use 'serviceWorker' in navigator, not navigator.serviceWorker alone [OK]

Common Mistakes:

• Checking navigator.serviceWorker directly without 'in'
• Misplacing catch block
• Thinking path must be full URL

5. You want your Svelte app to update the cached files when a new service worker version is available. Which approach correctly handles this scenario?

hard

A. Reload the page immediately after registering the service worker

B. Listen for 'updatefound' event on registration and call skipWaiting() in the new worker

C. Unregister the old service worker manually before registering a new one

D. Do nothing; service workers update automatically without extra code

Solution

1. Step 1: Understand service worker update process

   When a new service worker is found, the 'updatefound' event fires on the registration.

2. Step 2: Use skipWaiting() to activate new worker immediately

   Calling skipWaiting() on the new worker lets it take control without waiting for old pages to close.

3. Step 3: Evaluate other options

   Reloading immediately or unregistering manually is not recommended; automatic updates require event handling.

4. Final Answer:

   Listen for 'updatefound' event on registration and call skipWaiting() in the new worker -> Option B

5. Quick Check:

   Use 'updatefound' + skipWaiting() to update cache [OK]

Hint: Use 'updatefound' event and skipWaiting() to update cache [OK]

Common Mistakes:

• Ignoring updatefound event
• Reloading page too early
• Unregistering service workers unnecessarily
• Assuming automatic update without code