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'.