What is service worker? Plain-English meaning

Short definition: A service worker is a script that your browser runs in the background, separate from a web page, to enable features like offline access, background sync, and push notifications.

Plain-English explanation

A service worker is a file of JavaScript code that your browser installs and runs in the background, even when the website is not open. It acts as a middleman between the web page and the network, intercepting requests and deciding whether to fetch fresh content from the server or serve a cached version. This allows a website to load faster, work offline, and update content in the background. Service workers are a key part of progressive web apps, which combine web technology with features that make a site feel like an installed app. They use the CacheStorage API to store files like HTML, CSS, and images, so the site can be shown without an internet connection.

Why it matters

You will care about service workers when you use a website that works offline or loads quickly on a slow connection. For example, news sites, maps, and shopping apps use service workers to cache content so you can browse even when you lose signal. Understanding service workers helps you see why some websites behave like native apps and why they can work without internet. It also explains why clearing your browser cache can sometimes make a site update faster, because the service worker's cache is separate from the browser's normal cache.

Concrete example

Imagine you are reading an article on a news website using your phone, and you lose internet connection while on a train. If the site has a service worker, it can still show the article you already loaded because the service worker saved the page's HTML, CSS, and images in its cache. When you tap a link to another article that you haven't visited, the service worker might show a friendly 'offline' message instead of a blank error page. Once you are back online, the service worker can check for updates and download the latest content in the background.

Common confusion

People often confuse a service worker with the browser's regular cache. The browser cache is a generic storage used by the browser for all websites, and it is managed by the browser itself. A service worker is a script that controls the cache for a specific website, and it can decide exactly what to store and when to use it. Unlike the browser cache, a service worker can also handle background sync and push notifications, which are not possible with the normal cache.

Related terms

cache, progressive web app, offline-first, background sync, browser cache

Practical tips

Array

Common questions

Array

Key takeaways

Array

Step by step

Array

More context

Service workers were first introduced in 2014 as part of the W3C's efforts to enable offline web apps. They are also the foundation for push notifications and background sync. Unlike traditional web workers, service workers are designed to be persistent and can be terminated and restarted as needed.

Additional background

Service workers were introduced to bring native-app-like capabilities to the web, particularly for progressive web apps. They operate on an event-driven model, meaning they are idle until an event like `fetch`, `push`, or `sync` triggers them. Because they run persistently in the background, they can be terminated by the browser when not needed, so developers must write code that is not reliant on global state. The security requirement for HTTPS ensures that the service worker cannot be hijacked by man-in-the-middle attacks. Service workers also have a scope, which is determined by the location of the script file; for example, a worker at `/js/sw.js` only controls pages under `/js/`. Developers often use libraries like Workbox to simplify service worker generation, but it is possible to write them from scratch. Regular updates to the service worker script are essential to push new content to users, but the update process is controlled by the browser to avoid breaking sessions.