How to connect the site's Service Worker correctly?

Question

JavaScript

I'm trying to use Service Worker on my site.
Service Worker registration code:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('serviceWorker.js').then(function(registration){
            console.log('ServiceWorker registratin successful with scope: ', registration.scope);
        }).catch(function(err) {
            console.log('ServiceWorker registration failed: ', err);
        }); 
    });
}

serviceWorker.js file code:

"use strict";

var CACHE_NAME = 'mb-cache-v1';
var urlsToCache = [
        '/',
        'assets/fonts/FontIcons.woff',
        'assets/fonts/FontIcons.svg',
        'assets/fonts/FontIcons.eot',
        'assets/fonts/FontIcons.ttf',
        'assets/js/main.js',
        'assets/svg/orange-style.svg',
        'assets/svg/sprite-165.svg',
        'assets/css/main.css'
    ];

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function(cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {
                // ресурс есть в кеше
                if (response) {
                    return response;
                }
                
                var fetchRequest = event.request.clone();
                
                return fetch(fetchRequest).then(
                    function(response) {
                        if(!response || response.status !== 200 || response.type !== 'basic') {
                            return response;
                        }
                        var responseToCache = respnse.clone();
                        
                        caches.opne(CACHE_NAME)
                            .then(function(cache) {
                               cache.put(event.request, responseToCache);
                            });
                        
                        return response;
                    }
                ) // then end
            })
    );
});

self.addEventListener('activate', function(event) {
    var cacheWhitelist = 'mb-cache-v1';
    event.waitUntil(
        caches.keys().then(function(cacheName) {
            return Promise.all(
                cacheNames.map(function(cacheName) {
                    if (cacheWhiteList.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

When trying to connect this service, I ran into several problems at once:

1. All icons that are used on the site were made in the form of fonts. I, in turn, try to connect them in the urlsToCache variable. But for some reason, after connecting the Service Worker, they are no longer displayed.
   
2. When you try to follow any link, the browser displays a blank page with a warning "There was a network protocol violation while connecting to the site that cannot be repaired. The page you are trying to view cannot be displayed because a data transmission error was detected ."
   
3. All images of the site are located in the directory "assets/img/...", and then divided into folders corresponding to the pages of the site. Is it possible to pass all the images to a variable that caches them at once without forwarding each image individually?