Service workers in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a Svelte app registers a service worker with this code?

Consider this Svelte code snippet that registers a service worker:

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

What is the expected behavior when this code runs in a supported browser?

Svelte

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

A The service worker script is downloaded but never registered or activated.

B The service worker is immediately activated and controls all pages without waiting.

C The service worker registration fails silently without any console messages.

D The browser tries to register the service worker script at '/sw.js' and logs success or failure accordingly.

💡 Hint

Think about what navigator.serviceWorker.register does and how promises work.

The code checks if service workers are supported, then attempts to register the script at '/sw.js'. It logs success or failure messages based on the promise outcome. Activation and control happen later, not immediately.

❓ state_output

intermediate

What is the value of navigator.serviceWorker.controller after page load if no service worker was previously controlling the page?

After registering a service worker for the first time and reloading the page, what will navigator.serviceWorker.controller be on the first load?

Svelte

console.log(navigator.serviceWorker.controller);

A undefined

B null

C Throws a ReferenceError

D An object representing the active service worker

💡 Hint

Think about when a service worker starts controlling a page.

On the first load after registration, the service worker is installed but not yet controlling the page, so navigator.serviceWorker.controller is null. It controls pages only after reload.

🔧 Debug

advanced

Why does this service worker fail to cache files correctly?

Examine this service worker code snippet:

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

Why might the caching fail silently?

Svelte

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/index.html',
        '/styles.css',
        '/script.js'
      ]);
    })
  );
});

A Because the service worker script is missing the 'activate' event listener.

B Because the cache name 'v1' is invalid and causes an error.

C Because cache.addAll returns a promise that is not returned inside waitUntil, so install may finish before caching completes.

D Because the files listed are not valid URLs and cause network errors.

💡 Hint

Check how promises are handled inside event.waitUntil.

The cache.addAll method returns a promise, but it is not returned from the then callback. This means event.waitUntil does not wait for caching to finish, so the install event may complete early, causing caching to fail silently.

🧠 Conceptual

advanced

What is the main purpose of the 'activate' event in a service worker?

In service worker lifecycle, what is the primary role of the 'activate' event?

A To clean up old caches and take control of uncontrolled pages.

B To register the service worker script with the browser.

C To intercept network requests and serve cached responses.

D To install new files into the cache during the first load.

💡 Hint

Think about what happens after installation but before the service worker controls pages.

The 'activate' event is used to remove old caches and claim control over pages so the new service worker can start handling fetch events.

📝 Syntax

expert

Which option correctly uses SvelteKit's service worker registration in a +layout.svelte file?

In SvelteKit, you want to register a service worker only on the client side inside a +layout.svelte component. Which code snippet correctly does this?

A

<script>
  import { onMount } from 'svelte';
  onMount(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js');
    }
  });
</script>

B

<script>
  if (typeof window !== 'undefined') {
    navigator.serviceWorker.register('/sw.js');
  }
</script>

C

<script>
  import { onMount } from 'svelte';
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
  }
</script>

D

<script>
  import { onMount } from 'svelte';
  onMount(() => {
    navigator.serviceWorker.register('/sw.js');
  });
</script>

💡 Hint

Remember that navigator is only available in the browser and onMount runs only on client side.

Option A correctly uses onMount to run code only on the client, and checks for service worker support before registering. Option A runs code immediately, which may cause errors during server-side rendering. Option A accesses navigator outside onMount, causing errors. Option A does not check for service worker support.