[BUG]ニックネームは変わらない!bfcache

問題の状況

少し前に、Mac/IMS Safariのみで発生した問題が登録されました.
「ニックネームは変更できません」
カモニックネームを変更する通常の流れは以下の通り.

Safariでは,ニックネームの修正が完了した後,[内政情報を修正]=>[マイページ]が移動(最後の矢印)した場合,修正前にニックネームを暴露することが問題の核心となる.

理由の検索

再現事例を分析し、正しい問題を見つけ、必要なソリューションを適用したいと考えています.
今回の事件を再現するためには、以下の前提条件を備えなければならない.

Safariブラウザ(Mac/IMS全て)

ページ間後退動作(上図の「設定完了」ボタン付きビューはモード)

さらに後退すると、JSは実行されず、既存のページが表示されます.
ページ全体がキャッシュされていると推測し、「Safari page cache」のキーワードからGoogle検索を開始しました.

本当の犯人は。bfcache

犯人の名前はBack/Forward Cache(bfcache).
後退/前進動作を行う場合、ページ全体(JS Hip Memoryまで)をキャッシュする役割を果たす.
問題が発生した場合,bfcacheによってキャッシュされたページを暴露した.
ニックネームを要求するスクリプトを再実行するのではなく、そのまま表示されます.

ソリューション

bfcacheはブラウザ側で実現される.
ユーザ端末をプリエンプトしてbfcacheを無効にしない場合は、面倒でも共存する方法を見つけなければなりません.
bfcacheのロード/アンロード時点を特定できれば、
必要な情報を再要求するだけで、キャッシュのパフォーマンスが向上します.

pageshow/pageshideイベントによるキャッシュの検出

最も一般的な解決策は利用pageshow/pagehideアクティビティです.
このイベントオブジェクトにはpersistedというブール型のプログラムがある.
これにより、キャッシュに格納されているか(pagehide)キャッシュから復元されているか(pageshow)を区別することができる.

window.addEventListener('pageshow', (e) => {
  if(e.persisted) {
    console.log("Nice to meet you. I'm from bfcache.");
  }
}

window.addEventListener('pagehide', (e) => {
  if(e.persisted) {
    console.log("Bye.. I have to enter bfcache");
  }
}

でも。どうしてパリでしか放送されないのですか?

ここで「新しい知識を得たへへへ」と、終わる頃に不快な場所があり、
つまり、Safariでのみ対応するキャッシュが発生します.
Safariでしかbfcacheをサポートしていないからでしょうか?
web.devファイルによると、Safari/Firfoxは以前からサポートされている.
「もちろん!」同時にFirefoxでテストを行った結果、同じキャッシュが発生しました.
問題は次の行です
86版からChromeは少数のユーザーにbfcacheを有効にし、Androidでサイト間をナビゲートします.次のバージョンでは、他のサポートが徐々に展開されています.96版から、bfcacheはデスクトップおよびモバイルデバイス上のすべてのChromeユーザーに使用できます.
96版から、bfcacheはデスクトップおよびモバイルデバイス上のすべてのChromeユーザーに使用できます.
...
.
bfcacheは、デスクトップおよびモバイルデバイス上のすべてのChromeユーザーに使用できます.
...
.
bfcacheはすべてのChromeユーザーに使用できます.
??!

Chromeもbfcacheをサポートしていますが、なぜ私たちのサービスは成功しなかったのでしょうか.
混乱も一時的で、幸いにもすぐに結論が出た.

クロムはいつbfcacheを適用しますか?

結論から、Chromeはbfcacheで最適化されたサイトをキャッシュするように努力しているようです.
web.devファイルにはbfcacheの最適化についての説明もありますので、参考にしてください.
最も重要なサイトの最適化の度合いを理解する方法は、次のとおりです.
フロントエンド開発者の光,塩,クロム開発者ツールを利用する.개발자 도구 > Application > Back/forward cache現在のbfcacheが適用ページであるかどうかをここでテストできます.
ダメなら、なぜ当てはまらないのか親切に説明してくれます.
Pending Support、Not Actionableなどを最適化するためのヒントを提供しています.

の最後の部分

これからは私のブログで個人種目と会社種目の問題シュートとフロントエンドTILを中心にします.いつでも成長に役立つアドバイスを歓迎します.

参考資料

https://web.dev/bfcache/
https://ui.toast.com/weekly-pick/ko_20201201
https://goddaehee.tistory.com/266