Service workers in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to register a service worker in a Svelte app.

Svelte

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.[1]('/service-worker.js')
    .then(() => console.log('Service Worker registered'))
    .catch(err => console.error('Registration failed:', err));
}

Drag options to blanks, or click blank then click option'

Aactivate

Binstall

Cregister

Dstart

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'install' or 'activate' instead of 'register'.

Trying to call a method that doesn't exist on navigator.serviceWorker.

The register method is used to register a service worker script.

2fill in blank

medium

Complete the code to listen for the 'install' event inside a service worker file.

Svelte

self.addEventListener('[1]', event => {
  event.waitUntil(
    caches.open('v1').then(cache => cache.addAll(['/','/index.html']))
  );
});

Drag options to blanks, or click blank then click option'

Ainstall

Bactivate

Cfetch

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'activate' or 'fetch' instead of 'install'.

Not using event.waitUntil to wait for caching.

The 'install' event is fired when the service worker is installing and is used to cache files.

3fill in blank

hard

Fix the error in the fetch event handler to respond with cached files.

Svelte

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.[1]).then(response => {
      return response || fetch(event.request);
    })
  );
});

Drag options to blanks, or click blank then click option'

Arequest

Btarget

Curl

Dresource

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'url' or 'target' which are not properties of the fetch event.

Trying to use a property that doesn't exist on the event.

The fetch event has a request property representing the network request.

4fill in blank

hard

Fill both blanks to cache files during the install event and activate the new service worker.

Svelte

self.addEventListener('[1]', event => {
  event.waitUntil(
    caches.open('static-v1').then(cache => cache.addAll(['/index.html', '/app.js']))
  );
});

self.addEventListener('[2]', event => {
  event.waitUntil(self.clients.claim());
});

Drag options to blanks, or click blank then click option'

Ainstall

Bfetch

Cactivate

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'fetch' and 'activate' events.

Not using 'clients.claim()' in the activate event.

The 'install' event caches files, and the 'activate' event takes control of pages immediately.

5fill in blank

hard

Fill all three blanks to create a cache-first fetch handler that falls back to network.

Svelte

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.[1]).then(response => {
      if (response) {
        return response;
      }
      return fetch(event.[2]).then(networkResponse => {
        return caches.open('[3]').then(cache => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
      });
    })
  );
});

Drag options to blanks, or click blank then click option'

Arequest

Cdynamic-v1

Dstatic-v1

Attempts:

3 left

💡 Hint

Common Mistakes

Using different event properties instead of 'request'.

Caching in the wrong cache name.

Use event.request to match and fetch requests. Cache new responses in 'dynamic-v1'.

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