Кэширование файлов Amazon S3 в Service Worker для автономного использования - PullRequest
Новая
       21

Кэширование файлов Amazon S3 в Service Worker для автономного использования

2 голосов
/ 28 июня 2019

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

Рабочий процесс для пользователя заключается в том, что он нажимает кнопку, чтобы загрузить данные для автономного использования.Это включает в себя ряд файлов, которые могут храниться или не храниться в Amazon S3.

Например, можно представить, что код, когда пользователь нажимает кнопку: 

function cacheFilesForOfflineUse(files) {
    files.forEach(file => fetch(file));
}

Тогдав serviceWorker.js что-то вроде: 

workbox.routing.registerRoute(
    ({event}) => /* ... omitted ... */,
    new workbox.strategies.CacheFirst({cacheName: 'myFilesCache'})
);

отвечает за перехват выборки и сохранение ее в кеше.Это, конечно, упрощенно.

В основном это работает, но для одного конкретного случая: , если файл находится за 302 Redirect (что имеет место, когда файл хранится на S3),и я пытаюсь загрузить файл (установив document.location), я получаю эту ошибку в консоли:

... перенаправленный ответ был использован для запроса, чейрежим перенаправления не «следует»

и отображается страница с ошибкой.

В есть предложение только в Chrome (Service Worker): '... aперенаправленный ответ был использован для запроса, режим перенаправления которого не «следует» ', чтобы сохранить копию ответа, когда вы получаете перенаправленный ответ, поэтому я попытался использовать эту технику в качестве плагина для рабочей панели (cleanResponse такой же, как в связанном посте): 

{
    cacheWillUpdate: async ({request, response, event}) => {
        if (response.redirected && response.ok) {
            // Sanitize redirects
            for (const key of response.headers.keys()) {
                console.log(key, response.headers.get(key));
            }
            return cleanResponse(response);
        }
        return response;
    },
}

, который почти работает, но имеет одно большое предостережение: он не клонирует все заголовки ответа.Только зарегистрированные / скопированные заголовки:

image-image image / png последнее изменение вт, 18 июня 2019 12:57:10 GMT

, который критически пропускаетContent-Disposition: заголовок вложения, который необходим браузеру, чтобы рассматривать это как загрузку.

Есть ли способ обойти это, или я столкнулся с каким-то ограничением безопасности?

1 Ответ

0 голосов
/ 28 июня 2019

Я нашел обходной путь для моего случая.Возможно, это будет полезно кому-то еще в будущем.

Решение состоит в том, чтобы избегать использования навигации для загрузки файла.Поэтому я заменил: 

function downloadFile(fileUrl) {
    document.location.assign(fileUrl);
}

на 

function downloadFile(fileUrl, filename) {
    fetch(url).then(function (response) {
        response.blob().then(function (blob) {
            downloadFile(blob, filename, response.headers.get('content-type'));
        });
    });
}

Где downloadFile - это пакет: https://www.npmjs.com/package/downloadjs.

Кажется, все работает нормально.Но если есть более четкий ответ, я бы с радостью поставил галочку на это.

...