More than 1 year has passed since last update.

[JavaScript]スーパーリロードってできるのか(但し、非推奨)

Posted at 2022-02-20

はじめに

WEBサイトの画像表示時にキャッシュを無効化してサーバーから取得するようにできないかなーと思って、色々調べてたら「こんなことできるんだー」と思ったのでメモ（但し、アンチパターンとして認識）

特定の画像をキャッシュから取得しないようにしたかった

<img src="/img/hoge.png">

王道でいくとCache-Controlでcontent="no-cache"を設定する、とか

<meta http-equiv="Cache-Control" content="no-cache">

imgタグなので、srcを動的にするとか

<?php
    $now = new Carbon();
    $now_unix = $now->format('U');
?>
<img src="/img/hoge.png?timestamps=<?php $now_unix; ?>">

ありましたが、JavaScriptでできないかな～って思ってたら見つけました。

↓参考

コチラの記事を拝見してpageshowイベント内にあるpersistedというプロパティを使えば、キャッシュによる読込みなのか、否かを判定してくれるらしいと知る

ということで、記事のコードほぼ引用で恐縮ですが、こんな感じで実装すればいいじゃんと思った

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    // キャッシュの時の処理(※)
  } else {
    // 何もしない
  }
});

※pageshowイベントのMDNでも同じようにpersistedを使うサンプルコードを用意してる

ここでようやく結論スーパーリロードをします。

JavaScript上でリロードするには

window.location.reload()

でできるけども、スーパーリロードするには

window.location.reload(true)

でいけるらしい。

ただ、上記**Location.reload()**のドキュメントにはその記述はないが探すと一個前のLocationインターフェースのreloadの説明欄に記述があった

これは気づかない。。。

なので、キャッシュで画像データ（厳密には画像を持つhtmlファイル）を取得した際はスーパーリロードをするようにした

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    window.location.reload(true) // 追加
  } else {
    // 何もしない
  }
});

調べると、reload()の引数にtrueをとるのは非推奨ではないかという記事もいくつか出てきた

ただ、MDNには（ちょろっと）書いてあるし、、、

ということでもう少し調べると以下TypeScriptのgithubのissueでのやり取りが出てきた

どうもTSとしてはreloadについては、HTMLの仕様として引数をとることが記述がないということで非推奨とされたらしい

JavaScriptとしての**Location.reload()**の扱いは最終的には不明だが、代表的なフレームワークが非推奨としているので個人的にも非推奨であるだろう、と結論付けました。

今回はreload(true)は使わずに上述のimgタグのsrcを動的にする形でdoneとした。

スーパーリロードができるのすっごく便利だな、と思った矢先、非推奨であり実用的ではないことがわかり残念感が大きかったのでせっかくなら、と記事にした。