Реагировать на приложение, показывающее пустой экран в новой рабочей версии, до жесткого обновления - PullRequest
0 голосов
/ 21 апреля 2020

У нас это приложение работает с середины лета 2018 года, когда мы впервые начали с создания приложения React, теперь мы находимся на React v16.12.0. Мы используем машинопись, Babel, Webpack все с нормальным CRA. У нас есть проблема, когда каждый раз, когда мы внедряем наше приложение в производство, пользователи, которые сначала go отправляются на сайт после обновления, получают только пустой экран, указывающий на сбой приложения. Консоль сообщает что-то вроде «неожиданного токена» <'. Мы много раз изучали эту проблему, в частности, в различных сообщениях SO и других сообщениях, касающихся сообщения об ошибке, но, похоже, не можем найти способ исправить это. Похоже, что он тесно связан с кэшированием, поскольку исправление sh - единственное, что его исправляет (сбрасывает кэш). Кажется, это связано с работником службы создания реакции на приложения в этом отношении. </p>

Мы попытались:

  • Отмена регистрации работника службы
  • Это привело к полной загрузке приложения после обновления, но в первый раз, когда пользователь пытался перемещаться по страницам (React Router), тогда приложение взломало бы sh. Обычный refre sh на этом этапе решит проблему.

Next

  • Мы попытались изменить файл рабочего сервиса, чтобы принудительно автоматически выполнить refre sh после обновления
  • Это также не работало, приложение загрузилось, но были ненормальные побочные эффекты.

Мы попытались добавить повторную проверку без кэширования в наш индекс. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

index.tsx

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root") as HTMLElement
);
registerServiceWorker();

Мы попытались разделить код, но это тоже не сработало.

Проблемы, связанные с данной:

Мы перепробовали все, что могли придумать. Если у кого-то есть идеи, пожалуйста, дайте мне знать. Я могу предоставить больше контекста, если это также будет полезно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...