Cache-only Strategy for Static Assets

A simple example on how to implement a cache-only strategy for certain static assets that don't need to be updated frequently, such as CSS, JavaScript, or images.
// Register the service worker
if ('serviceWorker' in navigator) {
    .then(function(registration) {
      console.log('Service Worker Registered with scope:', registration.scope);
    .catch(function(error) {
      console.log('Service Worker registration failed:', error);
This code checks if the current browser supports service workers and then registers a service worker from a file named 'service-worker.js'. The registration process is logged to the console, both on success and on failure.
// Cache name
var CACHE_NAME = 'static-cache-v1';

// Files to cache
  // Add more static assets here
This piece of code initializes the name of the cache and an array containing the URLs of the static assets that will be stored in the cache.
// Service worker installation
self.addEventListener('install', function(event) {
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(STATIC_FILES);
This code handles the 'install' event for the service worker and calls `` to create a new cache with the name provided. After opening the cache, it adds all the static files to the cache by using the `addAll` method.
// Cache-only strategy for fetching static assets
self.addEventListener('fetch', function(event) {
  if (STATIC_FILES.includes(new URL(event.request.url).pathname)) {
      caches.match(event.request).then(function(response) {
        if (response) {
          return response;
        // If the file is not cached, respond with a fetch from the network
        return fetch(event.request);
This section of code listens for the 'fetch' event and applies a cache-only strategy to the static files listed in the `STATIC_FILES` array. For each fetch event, it checks if the requested file is one of our static assets, and if so, it tries to match it in the cache. If a cached version is found, it's returned immediately, otherwise, a network request is made as a fallback.