Service Worker и ограничение хостинга по одновременным соединениям или как справиться с ошибкой 509?

Question

[Pavstyuk]

Дано:
Хостинг имеет ограничение на количество единовременных соединений в 50 шт.
Service Worker работает исправно и показывает в Audite 100 очков до тех пор пока количество кэшируемых файлов не превышает 50 шт. Но мне необходимо добавить еще примерно 140 файлов, чтобы закэшировать все страницы.
При добавлении необходимого количества файлов, функция fetch (выполняется асинхронно) возвращает запрос с ошибкой 509, т.к. не может подключиться к файлам на хостинге из-за лимита ширины канала. В итоге SW не работает, как должно и кэширует только часть файлов с первого раза со второго или третьего добивает все остальные. Но Audits показывает 38 баллов sw не зарегистрирован.

Я вижу несколько решений вопросов:
1. VDS хостинг без лимитов на количество подключений - дорого
2. Увеличить ширину канала на виртуальном хостинге - дорого.

Вопрос:
Есть ли какие-то возможности адаптировать sw.js так, чтобы суметь втиснуться в 50 соединений и закэшировать около 200 файлов сайта? Не критично, если для этого нужно увеличить временной интервал работы sw.js. Можно добавить очередь и кэшировать порциями с первого подключения к сайту?

Мой sw.js

// Set a name for the current cache  
const cacheName = 'cachename-v_001';

// Default files to always cache
const cacheFiles = [
// очень, очень, очень много файлов, а можно только 50 
];

self.addEventListener('install', e => {
    console.log('[Service Worker] Installed');

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

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

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

});

self.addEventListener('activate', e => {
    console.log('[Service Worker] Activated');

    e.waitUntil(

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

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

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

addEventListener('fetch', event => {
    // Prevent the default, and handle the request ourselves.
    event.respondWith((async () => {
        // Try to get the response from a cache.
        const cachedResponse = await caches.match(event.request);
        // Return it if we found one.
        if (cachedResponse) {
            console.log('[Service Worker] Found Cache ', event.request.url);
            return cachedResponse;
        } else {
            // If we didn't find a match in the cache, use the network.
            console.log('[Service Worker] Download From Net: ', event.request.url);
            return fetch(event.request);
        }
    })());
});

Answer 1

[grinat]

Promise.all( заменить async/await будет качать будет качать по очереди, а не дергаь все сразу убивая канал.

Comments

[Pavstyuk]

Извиняюсь за дилетантство. Как будет выглядеть код в таком случае?

addEventListener('fetch', event => {
// как вместо async/await написать этот код через Promis.all
});

Помогите, пожалуйста.

[grinat]

Pavstyuk, это не тут, а в

caches.open(cacheName).then(cache => {

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

Так:

async () => {
   const cache = await caches.open(cacheName)
   for (бла-бла) {
     await cache.add(cacheFiles[индекс])
   }
}

[Pavstyuk]

grinat, отличная идея. Спасибо.