@mydarck

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

Пытаюсь использовать 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/...", а дальше побиты по папкам соответствующим страницам сайта. Можно ли передать в переменную, которая их кеширует, все изображения разом не передовая каждое изображение по отдельности?
  • Вопрос задан
  • 102 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Biganto Москва
от 130 000 до 130 000 руб.
от 2 500 до 4 000 usd.
HTML Academy Москва
от 85 000 до 100 000 руб.
16 авг. 2018, в 09:18
30000 руб./за проект
16 авг. 2018, в 08:17
600 руб./в час
15 авг. 2018, в 23:38
300 руб./за проект