I have learned that the Service Worker functions by creating a local cache in the index file of my project. I then created a service worker file that stores a variable cache_name and cache_urls to store the title of the cache and the urls that I want the service worker to cache. I then bind an event listener to a function which will wait until the cache is opened and then add the urls from the cache_urls to the actual cache.

I know I am still missing some steps, but this has at least intialized a service worker in my file.

The question is pretty broad and thus hard to answer. You were looking for a good resource, so here is one.

In general I think your understanding of service workers is more or less correct, but you're probably not registering the correct callbacks and maybe using the wrong APIs.

A service worker can be responsible for caching (among other things), but it in general just gives you the ability to intercept http calls in a callback: self.addEventListener('fetch', (event) => {}); (this line needs to go into the service worker file and self refers to the service worker's instance). You can then do whatever you want in that callback. One very common action is to use the Cache API to use an explicitly handled cache for data:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    //this returns the response from any cache and populates the cache with name 'v1' with the request's response from the server on a cache miss
    caches.match(event.request).then((resp) => {
      return resp || fetch(event.request).then((response) => {
        let responseClone = response.clone();
        caches.open('v1').then((cache) => {
          cache.put(event.request, responseClone);
        });

        return response;
      }).catch(() => {
        return caches.match('./sw-test/gallery/myLittleVader.jpg');
      })
    })
  );
});

For all of this, the service worker needs to be registered first, though:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./path-to-service-worker.js')
  .then((reg) => {
    console.log('Registration succeeded.);
  }).catch((error) => {
    console.log('Registration failed with ' + error);
  });
}