Service workers in Svelte - Mini Project: Build & Apply

Registering a Service Worker in Svelte

📖 Scenario: You are building a simple Svelte app that needs to work offline. To do this, you will register a service worker that can cache files and serve them when the network is unavailable.

🎯 Goal: Create a Svelte component that registers a service worker located at /service-worker.js when the app loads.

📋 What You'll Learn

Create a Svelte component with a script block

Check if the browser supports service workers

Register the service worker from /service-worker.js

Handle successful registration and errors with console messages

💡 Why This Matters

🌍 Real World

Service workers help web apps work offline and load faster by caching resources. This is useful for apps that need to work without internet or improve performance.

💼 Career

Knowing how to register and use service workers is important for frontend developers building progressive web apps (PWAs) and improving user experience.

1

Create the Svelte component skeleton

Create a Svelte component with an empty <script> block and a simple <main> section containing the text Service Worker Demo.

Svelte

// Your code here



  Service Worker Demo

Hint

Start by writing the basic Svelte component structure with a <script> block and a <main> tag.

2

Add a variable to check service worker support

Inside the <script> block, create a constant called supportsSW that checks if 'serviceWorker' is a property of navigator.

Svelte

// Create a constant called supportsSW to check if 'serviceWorker' is in navigator
// Your code here



  Service Worker Demo

Hint

Use const supportsSW = 'serviceWorker' in navigator; to check support.

3

Register the service worker on component mount

Inside the <script> block, import onMount from 'svelte'. Use onMount to run a function that registers the service worker at /service-worker.js only if supportsSW is true. Log 'Service Worker registered' on success and 'Service Worker registration failed' on error.

Svelte

const supportsSW = 'serviceWorker' in navigator;

// Import onMount from 'svelte'
// Use onMount to register the service worker if supportsSW is true
// Your code here



  Service Worker Demo

Hint

Use onMount to run code after the component loads. Register the service worker only if supported.

4

Add a simple message in the UI about service worker status

Below the Service Worker Demo text inside the <main> tag, add a paragraph that says Service Worker is supported if supportsSW is true, otherwise Service Worker is not supported. Use Svelte's curly braces and ternary operator.

Svelte

import { onMount } from 'svelte';

const supportsSW = 'serviceWorker' in navigator;

onMount(() => {
  if (supportsSW) {
    navigator.serviceWorker.register('/service-worker.js')
      .then(() => {
        console.log('Service Worker registered');
      })
      .catch(() => {
        console.log('Service Worker registration failed');
      });
  }
});



  Service Worker Demo
  
  

Hint

Use Svelte's curly braces with a ternary operator inside the <p> tag to show the message.