Chrome 正在進行變更，以便在安全無虞的情況下，允許使用 Cache-Control: no-store 的網頁使用前進/後退快取 (bfcache)。瞭解這對開發人員的意義。
背景
將 Cache-Control: no-store 設為 HTTP 標頭，表示網頁不應儲存在 HTTP 快取中。這項指令應用於含有機密資料的網頁，例如使用者登入時的網頁。不過，no-store 指令通常用於不含機密資料的網頁。
使用 bfcache 時，我們會延後銷毀作業並暫停 JS 執行作業，而不是在使用者離開時銷毀網頁。如果使用者很快就返回，我們會再次顯示網頁，並取消暫停 JS 執行作業。這樣一來，使用者就能幾乎立即瀏覽網頁。
雖然 HTML 規格並未規定這項做法，但瀏覽器通常會將 Cache-Control: no-store 視為信號，避免將網頁放入 bfcache。這也是不使用 bfcache 的主要原因，約有 17% 的行動裝置瀏覽記錄導覽和 7% 的電腦瀏覽記錄導覽。這表示這些網頁無法享有快速還原功能的優勢，必須完全重新載入網頁，包括任何網路呼叫、JavaScript 執行作業和轉譯作業。
通常會設定 Cache-Control: no-store，以便在網站變更時避免快取問題，但在使用 bfcache 時，這項原因就沒那麼重要，因為系統會還原整個網頁，就像一直保持開啟狀態一樣。
Chrome 如何變更這項行為
Chrome 已宣布將變更這項行為，但會謹慎處理這項變更。自 Chrome 116 起，我們就一直在進行實驗，直到最近才在 5% 的網頁載入作業中執行這些實驗。
我們已將這項功能的使用率提高至 10%，並打算在 11 月進一步提高至 20%，在明年初提高至 50%，之後不久就會全面推出這項功能，並在後續討論特定的選擇退出方式。
敏感資料
雖然我們的分析結果顯示，大多數的返回或前進導覽都不會包含機密資料，因此應該符合 bfcache 的使用資格，但有些情況下，網頁不應放入 bfcache。舉例來說，在登出時，使用者不應透過前後瀏覽來擷取已登入的頁面。
為避免這種情況，Chrome 會在 Cookie 或其他授權方法發生變更時，從 bfcache 中移除網頁。
此外，如果網頁使用 Cache-Control: no-store，且使用下列 API，這些網頁將繼續無法使用 bfcache：
請注意，這不是完整的 API 清單，這些 API 可防止使用 bfcache，但在 Cache-Control: no-store 頁面上封鎖 bfcache，即使在離開該頁面時未使用這些 API 也一樣。
Cache-Control: no-store 網頁的 bfcache 逾時時間也縮短為 3 分鐘 (不使用 Cache-Control: no-store 的網頁為 10 分鐘)，進一步降低風險。
企業選擇不採用
企業通常會使用難以更新的軟體和共用裝置。您可以停用 AllowBackForwardCacheForCacheControlNoStorePageEnabled 政策，繼續禁止 Cache-Control: no-store 網頁使用 bfcache。
測試變更
開發人員可以使用下列旗標測試這項變更：
--enable-features=CacheControlNoStoreEnterBackForwardCache:level/restore-unless-cookie-change
如果上述任何例外狀況適用 (例如 Cookie 變更)，就會導致網頁無法使用 bfcache，並在 Chrome 開發人員工具 bfcache 測試工具中顯示「Pages whose main resource has Cache-Control: no-store cannot enter back/forward cache.」(主資源含有 Cache-Control: no-store 的網頁無法進入往返快取)。
您可以使用這個 bfcache 測試頁面，測試是否啟用這個標記。
開發人員應知
雖然開發人員不需要為使用者進行任何變更，即可享有更高效的 bfcache 使用率，但他們可能需要考慮一些事宜。其他網站在 2021 年 12 月推出 bfcache 時，可能也考量了類似的因素。
對效能造成的影響
我們做出這項異動的原因，是為了改善使用者在網路上的網頁體驗。我們發現，當初推出 bfcache 時，Core Web Vitals 有明顯改善，現在我們希望將這些改善項目推廣至更多網站。
網站擁有者可能會在這項功能推出後，看到 Core Web Vitals 的改善情形，並評估 CrUX 中的 bfcache 用量，包括 CrUX 資訊主頁。
影響分析
從 bfcache 還原的網頁會「還原」舊網頁 (包括 JavaScript 堆積)，而不是重新載入網頁。許多熱門的數據分析供應商不會將 bfcache 還原作業視為新的網頁瀏覽，因為這類作業只會在初次載入時觸發網頁瀏覽。
因此，網站首次使用 bfcache 時，網頁載入次數可能會在數據分析中減少。建議您將這些事件視為網頁瀏覽，方法是設定 pageshow 事件的監聽器，並檢查 persisted 屬性：
// Send a pageview when the page is first loaded.
gtag('event', 'page_view');
// Send another pageview if the page is restored from bfcache.
window.addEventListener('pageshow', (event) => {
if (event.persisted) {
// Page was restored from bfcache, sent another page view.
gtag('event', 'page_view');
}
});
處理網頁還原作業的更新
由於網站現在可能會在先前未看到 bfcache 使用情形的情況下，以新資料重新載入網頁，因此開發人員可能需要考慮在 bfcache 還原時重新整理資料。
您可以使用 pageshow 事件和檢查 persisted 屬性，以類似的方式觸發更新，為 Analytics 記錄其他網頁瀏覽次數。
請注意，並非所有內容都需要更新，而且使用者可能會選擇「返回」先前瀏覽的內容。舉例來說，重新整理文章清單可能會導致使用者無法再查看想看的文章。
對廣告的影響
與數據分析影響類似，如果廣告只在網頁載入時載入，網站的廣告曝光次數可能會減少。您可以透過程式設計在 bfcache 還原時重新整理廣告，以確保與整個網頁載入的一致性，再次使用 pageshow 事件並檢查 persisted 屬性，但這不一定是正確的做法。請參閱廣告供應商的說明文件，瞭解如何觸發廣告重新載入。
進一步瞭解 bfcache
如要進一步瞭解 bfcache，請參閱完整的 bfcache 技術指南。
意見回饋
我們很期待聽到您對這項異動的意見回饋，歡迎透過 Chrome 問題追蹤器使用 bfcache 元件提供意見。
結論
我們很高興能將 bfcache 的優點運用在更多網頁上，為使用者提供更優質的網頁體驗。我們已仔細考量這項異動，並盡可能以安全的方式推出。我們希望這篇文章的資訊能協助開發人員瞭解這項異動，並在發生異動時採取必要的調整，以免發生問題。