Как правильно подключить Service Worker сайта?

Question

[mydarck]

Пытаюсь использовать Service Worker на своем сайте.
Код регистрации Service Worker:

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:

"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);
                    }
                })
            );
        })
    );
});

При попытки подключения данного сервиса я столкнулся сразу с несколькими проблемами:

1. Все иконки на которые используются на сайте были сделаны в виде шрифтов. Я, в свою очередь, пытаюсь подключить их в переменной urlsToCache. Но по каким-то причинам после подключения Service Worker они перестали отображаться.
   
2. При попытке перейти по какой-либо ссылке браузер выдает пустую страницу с предупреждением "При соединении с сайтом произошло нарушение сетевого протокола, которое не может быть устранено. Страница, которую вы пытаетесь просмотреть, не может быть показана, так как была обнаружена ошибка при передаче данных."
   
3. Все изображения сайта находятся в директории "assets/img/...", а дальше побиты по папкам соответствующим страницам сайта. Можно ли передать в переменную, которая их кеширует, все изображения разом не передовая каждое изображение по отдельности?