需要至少2次刷新才能加載頁面

Question

網站托管在Firebase上。

但問題是，每當我們訪問網站時，讓我們說www.website.com我們需要刷新它至少兩次才能加載網站。

---

更新：

不確定可能是什么問題

1. 使用Firebase Hosting托管我們的網站，我們有一個自定義URL，用於重新路由到該網站。 （ *1 ）

2. npm run build來創建生產版本

3. 通過firebase deploy

---

問題：

用戶嘗試在第一次嘗試打開頁面時嘗試加載任何內容，但可以看到以下錯誤：

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

在第二次嘗試頁面加載正確。

正如弗蘭克在評論中列出的那樣，Firebase不是問題，那么它是來自React（Create-React-App）的東西嗎？

---

參考文獻：

*1 - 嘗試過Firebase托管提供的兩條路線，自定義路線和路線，兩者都有問題。

Answer 1

可能你的問題是某些資源被緩存了。 如果您重新加載一次瀏覽器將只重新加載主URL。 如果重新加載兩次，其他資源將被刷新。 所以它可能是由此產生的一些奇怪的行為。

有一些技巧，例如，如果您可以更改js文件的URL，請將其從http：//yoursite/folder/file.js更改為http：//yoursite/folder/file.js？_ = TIMESTAMP其中TIMESTAMP是一個時間戳，例如來自j上的新Date（）。getTime（）或php上的time（）（每種語言都有獲取時間戳的方法）。 該_參數將使緩存無效。 如果這樣有效，可以通過更優雅的方式告訴瀏覽器根據您的需要處理緩存。

Answer 2

服務人員

如果您正在使用create-react-app ，問題在於有一個服務工作者可能會緩存該頁面以供離線使用。 默認情況下，服務工作者已啟用，直到CRA v2.0（與react-scripts版本不同）。 可能需要一些重新加載才能獲得新鮮內容，因為服務工作者在重新加載之間持續存在於瀏覽器中，實際上正在使您的托管服務尋找新內容。 默認情況下，它總是從緩存中立即加載，直到它有機會命中服務器來檢查新內容。 默認情況下，一旦您使用New content available! Please reload. ，瀏覽器的控制台將在過時的網頁上輸出幾秒鍾New content available! Please reload. New content available! Please reload. 。 下一次刷新會將新內容拉入瀏覽器的緩存中。

在特定瀏覽器上禁用（本地）

如果您只想將其關閉以便在Chrome中進行開發，那么在加載網站后，您可以進入dev tools>Application>Service Workers 。 一旦你在那里，該網站的服務工作者有幾個復選框。 您可以檢查Update on reload和Bypass for network 。

全局禁用

但是，如果要永久禁用服務工作者，則必須首先從所有現有注冊用戶中注銷它們。 如果您只刪除名為service-worker.js的文件，則不會為已訪問過您網站的用戶取消注冊該文件，這是有問題的。 要從已訪問過您網站的客戶中刪除服務工作者，您必須取消注冊。 在src文件夾根目錄下的index.js文件中，您需要更改它

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

至

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

您正在做的是阻止它進一步注冊服務工作者（通過刪除registerServiceWorker函數）並通過調用unregister函數取消注冊任何現有的服務工作者。 服務工作者可能在任意數量的瀏覽器上，因此最好取消注冊，而不是僅刪除registerServiceWorker函數。

您可以在create-react-app docs站點上閱讀有關服務工作者的更多信息。 這是github問題的鏈接 ，CRA的作者解釋了如何禁用服務工作者。