【WebAPI】ページがリロードされたのかを判定する

Yahoo!ニュースの取り組み事例でブラウザバックの最適化の話が記事になっていた

t.co

この中で、キャッシュした記事リストをリロード時に破棄するため、performance.getEntriesByType()を使ってリロード判定する方法が紹介されていたが、performance.getEntriesByType()を知らなかったので調べた

developer.mozilla.org

こういう風に使うみたい

entries = window.performance.getEntriesByType(type);

typeにはPerformanceEntry.entryTypeが入る

developer.mozilla.org

サイトのパフォーマンス計測などに使われるものだが、このうちページのロードまたはアンロードのタイミングを計測するときに使うnavigationを値としてセットする

entries = window.performance.getEntriesByType("navigation");

戻り値のentriesは指定されたtypeを持つPerformanceEntryオブジェクトのリストで、項目はエントリ 'startTime に基づいて時系列に並んでいる

指定されたtypeを持つオブジェクトがない場合、または引数が指定されていない場合は、空のリストが返される

entries = window.performance.getEntriesByType("navigation");
if (entries[0].type === 'reload') {
  // 何か処理
}

navigationをセットした場合は、PerformanceNavigationTimingのリストになり、そのオブジェクトが持つtypeプロパティの値がreloadであれば、リロードされたと判別できる

PerformanceNavigationTimingのtypeプロパティにセットされる値は以下に記載がある
developer.mozilla.org

• "navigate"
  リンクをクリックするか、ブラウザのアドレスバーにURLを入力するか、フォームを送信するか、以下のreloadとback_forward以外のスクリプト操作で初期化した場合
• "reload"
  ブラウザのリロード操作またはlocation.reload()が行われた場合
• "back_forward"
  ブラウザのヒストリーバックまたはヒストリーフォワード操作をした場合
• "prerender"
  事前レンダリングによって初期化された場合

これでどうページが表示されたかの判別ができるので色々使えそう