Я новичок в PWA и сервисных работниках. Я начал тестировать рабочий ящик с приложением Pyramid, которое обслуживает приложение preact в комплекте с веб-пакетом 4. Это шаблон home.jinja2
:
<!DOCTYPE html>
<html lang="{{request.locale_name}}">
<head>
...
<link href="{{request.static_url('app:static/app.css')}}" rel="stylesheet">
<script type="text/javascript" src="{{request.static_url('app:static/runtime.js')}}"></script>
<script type="text/javascript" src="{{request.static_url('app:static/vendor.js')}}"></script>
</head>
<body>
<div id="app"/>
{% block scripts %}
{% endblock %}
<script type="text/javascript">
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
</body>
</html>
СПА звонит на /api/v1/
. Я хочу предоставить сети первый опыт. Это часть конфигурации веб-пакета:
optimization: {
runtimeChunk,
},
output: {
path: path.resolve(path.join(__dirname, '..', 'app', 'static')),
},
plugins: [
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: false,
}),
new ManifestPlugin({
publicPath: '',
}),
new WebpackCleanupPlugin({
exclude: [
'robots.txt',
],
}),
new GenerateSW({
clientsClaim: true,
skipWaiting: true,
runtimeCaching: [
{
urlPattern: /\//,
handler: 'networkFirst',
},
{
urlPattern: /https:\/\/fonts.(?:googleapis|gstatic).com\/(.*)/,
handler: 'staleWhileRevalidate',
},
],
navigateFallback: '/app-shell',
navigateFallbackBlacklist: [/^\/api/],
templatedUrls: {
'/app-shell': 'index.html',
},
}),
],
Сгенерированный index.html
в основном равен макету home.jinja2
(оба содержат URL-адреса хэшированных активов). Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я делаю изменения во внешнем интерфейсе и внедряю их, после завершения процесса обновления работника службы браузер запрашивает как новые, так и старые ресурсы (43f6a4e6 - это хэш нового активы).
Обновление не действует вообще, даже через 24 часа. Я удаляю старые ресурсы при каждом развертывании, поэтому все запросы к старым ресурсам выдают ошибку и отображается пустая страница. Мне временно пришлось перенаправить старые запросы активов на новые.
Я реализовал этот рецепт https://developers.google.com/web/tools/workbox/guides/advanced-recipes#warm_the_runtime_cache и сайт полностью сломан. Firefox отображает ошибку данных. Любые идеи будут высоко ценится.