ブラウザの戻るボタンで表示内容が変わらない
WebサイトでHTMLページでリンクをクリックして、ブラウザの戻るボタンを押して戻った際に表示内容が変わっていないことがあります。
これはブラウザでは戻るボタンを押して戻って表示されるWebページはキャッシュが表示されるからです。
以下のサンプルページにアクセスしてみてください。
戻った際に日時が更新されないことが確認できます。
HTML
<p>現在の日時は<span id="date"></span></p>
<p>
<a href="https://iwb.jp/">iwb.jp</a>にアクセスして戻るボタンを押して、
<strong>このページに戻っても日時が更新されない！</strong>
</p>
<div class="message" id="message"></div>
<script>
const date = document.getElementById('date')
date.textContent = new Date().toLocaleString()
</script>ブラウザの戻るを押した際のキャッシュ表示例 (onpageshowなし)
onpageshowでキャッシュを検知する
ブラウザの戻るボタンでキャッシュが表示されたかどうかはonpageshowを使用してevent.persistedのboolean値で判定できます。
event.persistedがtrueであればキャッシュ表示となっているので、このときにJavaScriptを実行すれば特定の部分を更新可能です。
JavaScript
const date = document.getElementById('date')
date.textContent = new Date().toLocaleString()
window.onpageshow = function(event) {
const messageDiv = document.getElementById('message')
if (event.persisted) {
// ページがキャッシュから復元された場合
messageDiv.textContent = 'このページはキャッシュから復元されました。'
date.textContent = new Date().toLocaleString()
} else {
// ページが通常の方法で読み込まれた場合
messageDiv.textContent = 'このページが新しく読み込まれました。'
}
}ブラウザの戻るを押した際のキャッシュ表示例 (onpageshowあり)
ReactやVueでは発生しない
ReactやVueではコードが適切に書かれていれば再レンダリングされて日時の表示などは更新されるので、onpageshowを使用するケースはほとんどないです。
最近はReactやVueで制作されるケースが多いため、戻ったときのキャッシュを考慮する機会は減少しています。
しかし、再レンダリングが発生しないWebサイトを制作する際は注意が必要です。
※ Next.jsやNuxt.jsではコードによってはonpageshowによるキャッシュの検知が必要です。
