Очистка кеша в первом автономном веб-приложении

В настоящее время мы используем Webpack с HtmlWebpackPlugin для создания наших сборок javascript для нашей веб-страницы.

new HtmlPlugin({
    template: 'www/index-template.html',                //source path - relative to project root
    filename: 'index.html',                             //output path - relative to outpath above
    hash: true,
    cache: true                                         //only emit new bundle if changed
}),

Это приводит к добавлению хэша в строку запроса связанного файла javascript.

<script type="text/javascript" src="/build/vendor.min.js?4aacccd01b71c61e598c"></script><script type="text/javascript" src="/build/client.min.js?4aacccd01b71c61e598c"></script>

При использовании любого стандартного десктопного или мобильного браузера новые сборки корректно очищаются от кеша, и новая версия сайта загружается без каких-либо усилий со стороны пользователя. Однако у нас также есть реализация веб-приложения Chrome, в которой мы вызываем:

chrome.exe --app=http://localhost:65000 --disable-extensions

В этом приложении по какой-то причине хэш в конце сборки javascript не разрушает кеш. Мы должны вручную щелкнуть правой кнопкой мыши где-нибудь на странице, затем нажать «Перезагрузить» (или нажать F5). По какой-то причине кеш не разбивается в веб-приложении.

Я думал, что, возможно, это кэширует файл index.html? Это может привести к тому, что приложение никогда не получит обновленный хэш сборки. Я не уверен, как решить эту проблему, хотя, если это так.

Я также заметил, что если наш локальный сервер не работает, страница по-прежнему загружается, как если бы сервер работал. Это указывает мне на какой-то автономный кеш. Я проверил параметры manifest.json и не могу найти ничего, что могло бы заставить перезагрузка.

Я также пробовал эти переключатели командной строки Chrome, которые тоже не помогли: --disk-cache-size=0, --aggressive-cache-discard, --disable-offline-auto-reload.

Еще одно предостережение заключается в том, что нам нужно сохранить данные localStorage и их файлы cookie. В стандартном окне браузера или в любом другом браузере он работает нормально, но не в веб-приложении Chrome.


person wayofthefuture    schedule 21.08.2017    source источник
comment
А как насчет изображений и статического содержимого в папке с ресурсами, как вам удалось снять с них отпечатки пальцев?   -  person Vikas    schedule 30.12.2018


Ответы (2)


Вы говорите о «прогрессивном веб-приложении» с сервисными работниками? Если это так, то html-файл может (и должен) кэшироваться при первой загрузке. Вам нужно иметь какой-то агрессивный процесс обновления на клиенте, чтобы обеспечить правильную загрузку новых файлов.

Возможно, вызов API, который проверяет какой-то грязный флаг на сервере, может сработать, и если он вернется, он должен перезагрузить файлы шаблонов. Или что-то более сложное, когда он получает массив грязных файлов с сервера, чтобы знать, какие из них перезагружать, а не загружать все подряд. Просто некоторые идеи.

person Chad H    schedule 30.08.2017
comment
Я не думаю, что это прогрессивное веб-приложение, я думаю, что это просто веб-страница, находящаяся внутри хромированного окна без полей. - person wayofthefuture; 31.08.2017
comment
Если он работает в автономном режиме, как вы предложили, я считаю, что для этого нужно использовать сервисного работника. По сути, сервисный работник действует как прокси на клиенте, который перехватывает запросы к вашему сайту, и если сайт не работает, он все еще работает. Может быть запущен какой-то javascript (возможно, сторонний), который настраивает сервисного работника, а вы не знаете? Кроме того, поскольку сервис-воркеры поддерживаются не во всех браузерах, вы можете заметить другое поведение в Edge или Safari. Вы сможете открыть его в Chrome и посмотреть, есть ли настройка сервисного работника через F12 в разделе «Приложение». - person Chad H; 31.08.2017
comment
@wayofthefuture, тогда что вы подразумеваете под веб-приложением Chrome? Я полагаю, вы имеете в виду ярлык, который создается, когда мы используем что-то вроде Добавить на главный экран (на Android) или что-то подобное? а также ваше использование manifest.json подсказывает мне, что вы действительно говорите о PWA! - person riyaz-ali; 02.09.2017

Поскольку ваша страница работает без сервера, работающего на localhost, я подозреваю, что ваше приложение сначала отключено. Это делается именно с помощью сервисных рабочих (как указал @Chad H), которые официально поддерживаются Chrome и являются экспериментальными в других браузерах. Итак, ожидайте другого поведения в других браузерах. Чтобы разбить кеш,

В производстве

Для постоянного решения вам нужно найти и изменить код сервисного работника (SW). Удаление старых кешей происходит только в activate событии ПО.

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

Для настройки разработчика

Вы можете использовать параметр Disable Cache на вкладке Network в Chrome DevTools (работает только при открытом DevTools) или использовать более надежное расширение Chrome под названием Cache Killer.

person shivangg    schedule 02.09.2017