Ошибка "Uncaught (в обещании) DOMException" выдан в Service Worker - PullRequest
Новая
       4

Ошибка "Uncaught (в обещании) DOMException" выдан в Service Worker

0 голосов
/ 17 апреля 2019

Я запускаю одностраничную посадку в HTML5, и я использовал учебник bitofcode (https://bitsofco.de/setting-up-a-basic-service-worker/) для реализации моего первого работника сервиса.

Страница настроена на one.com и запускается через cloudflare.

Я добавил несколько файлов кэширования, но кроме того, что он не поврежден из источника.

Консоль Chrome выдает мне эту ошибку:

Uncaught (в обещании) DOMException service-worker.js: 1

Я знаю, что это срабатывает, потому что до ошибки я получаю:

[ServiceWorker] Установлен [ServiceWorker] Кэширование cacheFiles

Просматривая логи, я вижу следующие сообщения: 

Console: {
  "lineNumber":24,
  "message":"[ServiceWorker] Installed",
  "message_level":1,
  "sourceIdentifier":3,
  "sourceURL":"https://WWW.MYURL.COM/service-worker.js"
}

Console: {
  "lineNumber":33,
  "message":"[ServiceWorker] Caching cacheFiles",
  "message_level":1,
  "sourceIdentifier":3,
  "sourceURL":"https://WWW.MYURL.COM/service-worker.js"
}

Error: {
  "columnNumber":-1,
  "lineNumber":-1,
  "message":"ServiceWorker failed to install: ServiceWorker failed to handle event (event.waitUntil Promise rejected)",
  "sourceURL":""
}

Console: {
  "lineNumber":0,
  "message":"Uncaught (in promise) InvalidStateError: Cache.addAll(): duplicate requests (https://WWW.MYURL.COM/favicon-32x32.png)",
  "message_level":3,
  "sourceIdentifier":1,
  "sourceURL":"https://WWW.MYURL.COM/service-worker.js"
}

Service-worker.js 

var cacheName = 'v7'; 

// Default files to always cache
var cacheFiles = [
    './',
    './index.html',
    './favicon-96x96.png',
    './favicon-196x196.png',
    './favicon-128.png',
    './favicon-16x16.png',
    './favicon-32x32.png',
    './favicon-32x32.png',
    './manifest.json',
    './assets/css/images/bg2.jpg',
    './assets/css/images/bg2.webp',
    './assets/css/font-awesome.min.css',
    './assets/fonts/fontawesome-webfont.woff2?v=4.7.0',
    './assets/css/main.css',
    'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900'
]


self.addEventListener('install', function(e) {
    console.log('[ServiceWorker] Installed');

    // e.waitUntil Delays the event until the Promise is resolved
    e.waitUntil(

        // Open the cache
        caches.open(cacheName).then(function(cache) {

            // Add all the default files to the cache
            console.log('[ServiceWorker] Caching cacheFiles');
            return cache.addAll(cacheFiles);
        })
    ); // end e.waitUntil
});


self.addEventListener('activate', function(e) {
    console.log('[ServiceWorker] Activated');

    e.waitUntil(

        // Get all the cache keys (cacheName)
        caches.keys().then(function(cacheNames) {
            return Promise.all(cacheNames.map(function(thisCacheName) {

                // If a cached item is saved under a previous cacheName
                if (thisCacheName !== cacheName) {

                    // Delete that cached file
                    console.log('[ServiceWorker] Removing Cached Files from Cache - ', thisCacheName);
                    return caches.delete(thisCacheName);
                }
            }));
        })
    ); // end e.waitUntil

});


self.addEventListener('fetch', function(e) {
    console.log('[ServiceWorker] Fetch', e.request.url);

    // e.respondWidth Responds to the fetch event
    e.respondWith(

        // Check in cache for the request being made
        caches.match(e.request)


            .then(function(response) {

                // If the request is in the cache
                if ( response ) {
                    console.log("[ServiceWorker] Found in Cache", e.request.url, response);
                    // Return the cached version
                    return response;
                }

                // If the request is NOT in the cache, fetch and cache

                var requestClone = e.request.clone();
                fetch(requestClone)
                    .then(function(response) {

                        if ( !response ) {
                            console.log("[ServiceWorker] No response from fetch ")
                            return response;
                        }

                        var responseClone = response.clone();

                        //  Open the cache
                        caches.open(cacheName).then(function(cache) {

                            // Put the fetched response in the cache
                            cache.put(e.request, responseClone);
                            console.log('[ServiceWorker] New Data Cached', e.request.url);

                            // Return the response
                            return response;

                        }); // end caches.open

                    })
                    .catch(function(err) {
                        console.log('[ServiceWorker] Error Fetching & Caching New Data', err);
                    });


            }) // end caches.match(e.request)
    ); // end e.respondWith
});

И регистрация программного обеспечения (вставьте последнее в моем теле html) 

<script type="text/javascript">
        if ('serviceWorker' in navigator) {
          navigator.serviceWorker.register('service-worker.js');
        };      
</script>

1 Ответ

0 голосов
/ 18 апреля 2019

Вы не можете отдавать один и тот же ресурс Cache.addAll несколько раз.

У вас есть favicon-32x32.png дважды. Вы также можете увидеть это из последнего сообщения консоли:)

...