Блог

У меня проблема с API кэша JavaScript. Я разрабатываю PWA, поэтому serviceWorker.js в моем приложении есть a. В этом serviceWorker.js файле я хочу добавить файлы в свой статический кэш. Поэтому я настроил это для кэширования статических файлов:

 var CACHE_STATIC_NAME = 'static-v544';
var CACHE_DYNAMIC_NAME = 'dynamic-v544';
var STATIC_FILES = [
    '/css/app.css',
    '/js/app.js',
    '/js/vendor.js',
    '/js/manifest.js',
    '/js/utility.js',
    '/offline'
];

self.addEventListener('install', function(event) {
    console.log('[Service Worker] Installing service worker...', event);
    event.waitUntil(
        caches.open(CACHE_STATIC_NAME)
        .then(function(cache) {
            //console.log('[Service Worker] Precaching App Shell');
            cache.addAll(STATIC_FILES)
            .then((result) => {
                console.log(result);
            })
            .catch((error) => {
                console.log(error);
            });
        })
    );
});
 

На самом деле это работает нормально, если только не возникнет проблем с app.js файлом.
Поэтому, когда cache.addAll(STATIC_FILES) меня вызывают, я получаю сообщение об ошибке

Не пойманный (в обещании) Исключение DOMException: Cache.put() обнаружила сетевую ошибку

Все остальные файлы кэшируются в статическом кэше. Я должен сказать, app.js что файл находится в разработке очень большого размера (~12 МБ). Он будет сокращен на производстве. Мои вопросы таковы:

Как я могу более тщательно изучить ошибку? Сообщение об ошибке просто выдает мне это сообщение. Есть ли способ получить более подробное сообщение об ошибке? Что может быть причиной этой «сетевой ошибки»? Может быть, файл слишком большой? Или может быть так, что файл вообще не загружается, когда работник службы пытается поместить его в кэш и, следовательно, возникает ошибка?

Большое спасибо за любую подсказку заранее!

Вероятно, вы разрабатываете с помощью Chrome, Firefox или другого браузера на базе Chromium. В этом случае вкладка «Сеть» инструмента разработчика может пролить некоторый свет на то, как именно происходит сбой сетевого запроса. Есть довольно много руководств, которые вы можете найти (в том числе это руководство команды Chromium), которые объясняют немного больше о том, как это сделать.

Хотя нам не хватает много информации, мое первое предположение состоит в том, что ваш сотрудник службы устанавливается во время компиляции и что во время загрузки js/app.js файла Webpack (или что бы вы ни использовали) изменяет файл и прерывает загрузку.