Требуется как минимум 2 обновления для загрузки страницы

Question

Сайт размещен на Firebase.

Но проблема в том, что всякий раз, когда мы заходим на сайт, скажем, www.website.com, нам нужно обновить его как минимум дважды, чтобы загрузить сайт.

---

Обновление:

Не уверен, что, возможно, может быть проблема

1. Использование хостинга Firebase для размещения нашего веб-сайта, у нас есть собственный URL, на котором он находитсяперенаправлен в.(*1)

2. npm run build для создания производственной сборки

3. развертывание с помощью firebase deploy

---

Проблема:

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

Uncaught SyntaxError: Unexpected token < firebase-app.js:1

Во второй попытке страница загружается корректно.

Как указано Фрэнком в комментариях, это не проблема Firebase, тогда что-то из React (Create-React-App)?

---

Ссылки:

*1 - пробовали оба маршрута, собственный маршрут и маршрут, предоставляемые хостингом Firebase, и проблема возникает в обоих случаях.

Answer 1

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

Есть несколько хитростей, например, если вы можете изменить URL-адрес файла js, измените его с http://yoursite/folder/file.js на http://yoursite/folder/file.js?_=TIMESTAMP где TIMESTAMP - это временная метка, полученная, например, из новой функции Date (). getTime () для js или time () для php (у каждого языка есть способ получить временную метку).Этот параметр _ сделает недействительным кеш.Если это работает, есть более элегантные способы заставить браузер обрабатывать кэши в соответствии с вашими потребностями.

Answer 2

Сервисные работники

Если вы используете create-react-app, проблема в том, что существует сервисный работник, который, вероятно, кэширует страницу для автономного использования. Сервисные работники были включены по умолчанию до CRA v2.0 (версия отличается от react-scripts). Может потребоваться несколько перезагрузок, чтобы получить свежий контент, потому что сервисный работник, который сохраняется в браузере между перезагрузками, - это то, что фактически поражает вашу хостинговую службу, чтобы искать новый контент. По умолчанию он всегда мгновенно загружается из кэша, пока у него не появится возможность попасть на сервер, чтобы проверить наличие нового контента. По умолчанию консоль браузера будет выводиться, как только вы в течение нескольких секунд окажетесь на устаревшей веб-странице с New content available! Please reload.. Следующее обновление вытягивает новый контент в кеш браузера.

Отключить в определенном браузере (локально)

Если вы просто хотите отключить его для разработки в Chrome, после загрузки веб-сайта вы можете перейти в dev tools>Application>Service Workers. Когда вы окажетесь там, для сервисного работника на этом сайте есть несколько флажков. Вы можете проверить Update on reload и Bypass for network.

Отключить глобально

Однако, если вы хотите навсегда отключить сервисных работников, вы должны сначала отменить их регистрацию у всех существующих зарегистрированных пользователей. Если вы просто удалите файл с именем service-worker.js, он не будет отменен для пользователей, которые уже заходили на ваш сайт, что проблематично. Чтобы удалить работника сервиса из клиентов, которые уже зашли на ваш сайт, вам придется отменить его регистрацию. В вашем файле index.js в корне папки src вы должны изменить это

import registerServiceWorker from './registerServiceWorker';
registerServiceWorker();

до

import { unregister } from './registerServiceWorker';
unregister();

То, что вы делаете, - это предотвращает дальнейшую регистрацию сервисных работников (путем удаления функции registerServiceWorker) и отмену регистрации любых существующих сервисных работников путем вызова функции unregister. Работник сервиса может работать с любым количеством браузеров, поэтому лучше отменить регистрацию, а не только удалять функцию registerServiceWorker.

Подробнее о работниках сферы обслуживания можно прочитать на сайте create-react-app docs . Вот ссылка на проблему github, в которой авторы CRA объясняют, как отключить работника сервиса.