Разрушение кеша браузера с использованием React и Node - PullRequest
Новая
       6

Разрушение кеша браузера с использованием React и Node

1 голос
/ 30 октября 2019

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

Я использовал реакции-create-app для первоначального создания приложения.

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

Refused to execute script from 'https://example.com/static/js/main.9b80cc8a.js?76de7bb1d01e56c5fcb0' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled

Эта ошибка покрывается здесь с помощью Node. Я использую express.static

Я изменил веб-пакет с этого: 

new HtmlWebpackPlugin({
  inject: true,
  template: paths.appHtml,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
    removeEmptyAttributes: true,
    removeStyleLinkTypeAttributes: true,
    keepClosingSlash: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  },
}),

на это: 

new HtmlWebpackPlugin({
  hash: true,
  inject: true,
  template: paths.appHtml,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
    removeEmptyAttributes: true,
    removeStyleLinkTypeAttributes: true,
    keepClosingSlash: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  },
}),

Мой код узла выглядит следующим образом, который ядумаю, что это правильно: 

app.use(express.static(path.join(__dirname, 'public')));

Публичный каталог содержит приложение, созданное в производственных условиях.

Как можно предотвратить эту ошибку и очистить кэш браузера при обновлении приложения?

Ответы [ 2 ]

1 голос
/ 31 октября 2019

Я бы скорее прокомментировал, но мне не хватает репутации: стр.

У нас есть похожая настройка для другого типа приложения. Каждый раз, когда мы запускаем сборку, хеш для нового пакета добавляется к источнику тега сценария в HTML. Вот наша HtmlWebpackPlugin конфигурация. 

new HtmlWebpackPlugin({
  inject: false,
  hash: true,
  template: '../runner.html',
  filename: 'index.html',
}),

Основное различие между нашими настройками: inject имеет значение false в моем. Мы не хотим вставлять целую js сборку в html.

А вот ../runner.html 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Spec Runner v3.1.0</title>
    <!-- include spec files here... -->

    <script src="<%= htmlWebpackPlugin.files.chunks.spec.entry %>"></script>
  </head>
  <body> 
  </body>
</html>

Замечание <%= htmlWebpackPlugin.files.chunks.ENTER-THE-CHUNK-NAME.entry %>. Это в основном говорит веб-пакету вводить хеш на страницу. Это позволяет нам напрямую включать наши обновления в html-страницу. Конечно, вам все равно придется беспокоиться о продолжительности кэширования html-страницы.

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

0 голосов
/ 31 октября 2019

Я закончил тем, что оставил конфиг webpack один и изменил работника сервиса.

Существует функция, которую я изменил, чтобы перезагрузить окно, если доступен новый контент. Вы могли бы предложить пользователю посмотреть, действительно ли он хочет перезагрузить (window.confirm), но в моем случае ему нужно обновить. 

function registerValidSW(swUrl) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the old content will have been purged and
              // the fresh content will have been added to the cache.
              // It's the perfect time to display a "New content is
              // available; please refresh." message in your web app.
              window.location.reload(true); //**** THIS IS WHAT I CHANGED
              console.log('New content is available; please refresh.');
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.');
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...