Laravelブラウザバックでキャッシュされたページが表示されないようにする

問い合わせフォームで完了画面からブラウザバックで確認画面に戻らせないようにしたかった。
バックエンド側の作りは出来たのだが、ブラウザが戻った時にキャッシュされたページを表示してしまう。
色々試してみたので、その記録。

1. ヘッダーでキャッシュを無効化する

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

@php
    header("Cache-Control: no-cache, no-store, must-revalidate");
    header("Pragma: no-cache");
    header("Expires: 0");
@endphp

結果：❌効かない

2. JSでブラウザバックしたか判定する

window.addEventListener('pageshow', () => {
    let navigationType = window.performance.getEntriesByType("navigation")[0].type;
 
    switch(navigationType) {
        case "navigate":
            console.log(navigationType + " : ページ遷移");
            break;
        case "reload":
            console.log(navigationType + " : ページ更新");
            break;
        case "back_forward":
            console.log(navigationType + " : 戻る・進む");
            window.location.reload();
            break;
        case "prerender":
            console.log(navigationType + " : prerender");
            break;
    }
});

結果：❌ブラウザバックしても最初に開いた時（navigate）の判定になる

3. cache.headersミドルウェアでレスポンスヘッダ追加

Route::middleware([
    'cache.headers:no_store;private;max_age=0',
])->group(function (): void {
    Route::resource('request', RequestController::class);
    // ...省略...
});

結果：🔺ブラウザによって解釈がバラバラ

4. キャッシュが残っているかをJSで判定しリロード

window.addEventListener('pageshow', (event) => {
    if (event.persisted) {
        // ここにキャッシュ有効時の処理を書く
        window.location.reload();
    }
});

結果：✅動いた

参考

• Laravel ブラウザバック対策 ブラウザキャッシュさせないミドルウェアを実装 #PHP – Qiita
• 【Safari】no-store がついていてもbfcacheが有効になる – UGA Boxxx
• ブラウザの「戻る」ボタンでキャッシュが表示されてしまう際の対策 #JavaScript – Qiita