[JavaScript]AndroidだけHTMLがキャッシュしてしまう問題

android.2.X系でjsがキャッシュする問題
と
iOSでjs、htmlがキャッシュする問題
でも書いたように下記の方法でキャッシュが完全にクリアーできると思ってました。

window.onunload = function() { };
window.onpageshow = function(event) {
  if (event.persisted) {
    location.reload();
  }
};

がしかし、検証してみると、AndroidだけキャッシュされたHTMLが表示されてしまう。

ここでポイントは、JSの処理はキャッシュされていないのである。

どいうことかというと、ページで「進む」、「戻る」を押しても、

window.onpageshow = function(event) {
  if (event.persisted) {
    location.reload();
  }
};

のevent.persistedがfalseを返してしまうのである。

これはどういうことかというと、
bfcache について覚えて帰ってもらいます。（転載）
に書いてあるように、どうやら「bfcache」が働いているらしく、HTMLのmetaタグで回避できないようなのである。

で、同エントリーに記載されているようにheaderのCache-Controlに「no-cache, no-store」を設定したところ、HTMLも最新の状態で表示することができた。

bfcache自体は大分前からある仕様のようです。