Как предварительно кэшировать активы с именами, которые меняются при каждом развертывании с использованием сервисных работников? - PullRequest
Новая
       31

Как предварительно кэшировать активы с именами, которые меняются при каждом развертывании с использованием сервисных работников?

0 голосов
/ 17 мая 2019

Мы работаем с Workbox, чтобы предварительно кэшировать некоторые ресурсы «следующей» страницы, но URL-адрес наших ресурсов содержит дату и хэш развертывания. Например. "/Css/2019-05-15/f00ba5/home.css".

Проблема, с которой мы сталкиваемся, заключается в том, как передать изменяющуюся часть URL («2019-05-15 / f00ba5») сервисному работнику и настроить Workbox для предварительного кэширования списка активов.

Мы используем Workbox и пробовали окно рабочего окна, чтобы отправить сообщение с веб-страницы на SW, и пока здесь ... это не сработало!

Но теперь, когда SW знает хеш, мы не знаем, как им воспользоваться, потому что если мы вызываем метод workbox.precaching.precacheAndRoute () из слушателя событий, происходит импорт workbox.precaching. модуль как-то выходит из строя.

На странице .html 

<script type="module">
    import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/4.0.0/workbox-window.prod.mjs';

    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
        const wb = new Workbox('/service-worker.js');
        wb.messageSW({type: 'hash', payload: "12345"});
        wb.register();
    })
}
</script>

В сервис-работник.js 

const file1 = "/css/{hash}/home.css";
const file2 = "/js/{hash}/home.js";
const file3 = "/img/{hash}/hero.jpg";

addEventListener('message', (event) => {
    if (event.data.type === 'hash') {
        // TODO: replace {hash} with event.data.payload in file1, 2, 3
        const precacheManifest = [ file1, file2, file3 ];
        workbox.precaching.precacheAndRoute(precacheManifest);
    }
});

Я получаю ошибку 

workbox-sw.js:1 Unable to import module 'workbox-precaching' from 'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js'.
loadModule @ workbox-sw.js:1
get @ workbox-sw.js:1
(anonymous) @ service-worker.js:39
workbox-sw.js:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js' failed to load.
at Object.loadModule (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js:1:954)
at Object.get (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js:1:727)
at https://brioni.f31.lcl/service-worker.js:39:13
loadModule @ workbox-sw.js:1
get @ workbox-sw.js:1
(anonymous) @ service-worker.js:39
framework.js:1441 STORE::LazyLoad.Init

Я ожидаю, что это сработает и предварительно кэширует файлы в массиве precacheManifest.

1 Ответ

1 голос
/ 17 мая 2019

Конкретная ошибка, с которой вы сталкиваетесь, связана с ограничением на callimg importScripts() после установки сервисного работника, что происходит под капотом через библиотеку workbox-sw.Более подробно это описано в документации Workbox , а также об альтернативных способах достижения того же самого.

При этом использование "1007 *" динамически "не является хорошим выбором.Как описано в документации workbox-precaching , вы должны использовать инструмент сборки, такой как workbox-cli или workbox-webpack-plugin, чтобы сгенерировать этот список и автоматически вставить манифест предварительного кэширования в файл рабочего сервиса.Изменения в вашем файле рабочего сервиса из-за обновленного манифеста предварительного кэширования вызовут события обновления жизненного цикла работника сервиса, и это, в свою очередь, обеспечит актуальность ваших ресурсов предварительного кэша.

Если вы этого не сделаетеЕсли вы хотите использовать инструмент сборки и заранее сгенерировать манифест предварительного кэширования, тогда настройка правил маршрутизации и использование стратегии кэширования во время выполнения более уместны, чем предварительное кэширование.Вы можете использовать от workbox-window до передать список URL , которые вы хотите кэшировать во время выполнения.

...