フロントエンド監視 4 - ページとルートの監視

ウィンドウイベント

DOMContentLoaded は
、依存リソースがロードされるのを待たずに、ページ DOM がロードされるときにトリガーされます。
ロードイベントは、ページが入力されたときにデータを報告します。
このイベントは、ページ全体と、スタイルシートや画像などのすべての依存リソースが読み込まれたときにトリガーされます。
beforeunloadページが終了したときにデータをレポートします。
ブラウザウィンドウが閉じられるか更新されると、beforeunload イベントがトリガーされます。現在のページは直接閉じられません。[OK] ボタンをクリックして閉じるか更新するか、閉じるか更新をキャンセルすることができます。
unloadunload
イベントは、ドキュメントまたはサブリソースがアンロードされるときにトリガーされます。
これは、次の 2 つのイベントの後にトリガーされます
。
pagehide
ユーザーがブラウザの「戻る」ボタンをクリックすると、現在のページは前のページを表示する前に pagehide (ページ非表示) イベントを受け取ります。pagehide は常に beforeunload 後にトリガーされます
Pageshow
セッション履歴レコードが実行されると、ページ表示 (pageshow) イベントがトリガーされます。(これには、戻る/進むボタン操作が含まれ、onload イベントがトリガーされた後にページが初期化されるときにもトリガーされます。)
進むおよび戻るは、load イベントをトリガーしませんが、unload イベントと pagehide イベントをトリガーします。
ポップステート
履歴はポップステートリスニングイベントを提供しますが、このイベントをトリガーするのは次の 2 つの状況のみです。
- ブラウザの「進む」ボタンと「戻る」ボタンをクリックします
- イベントをトリガーできない履歴の back、go、および forward メソッドを呼び出すメソッドを表示します。
- PushStateとreplaceState
- 非アンカーモードではページに直接ジャンプするため、a タグをトリガーできません。

ルーティングの変更は基本的に、history.pushState または replaceState を呼び出します。
履歴インターフェイスが直接呼び出された場合、トリガーされず、pushState および replaceState のプロトタイプメソッドを書き直す必要があります。

window.onpopstate = function(event) {
    
    
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({
    
    page: 1}, "title 1", "?page=1");
history.pushState({
    
    page: 2}, "title 2", "?page=2");
history.replaceState({
    
    page: 3}, "title 3", "?page=3");
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

hashchange
シングルページハッシュルーティングの監視
- ブラウザを前後に進めて URL を変更します
- タグアンカーを使用して URL を変更します。
- window.location.hash を使用して URL を変更します
- 履歴の back、go、forward メソッドを呼び出しても、
  イベントをトリガーすることはできません。
- PushStateとreplaceState

ドキュメントイベント

可視性の変更

document.addEventListener("visibilitychange", function() {
    
    
  console.log( document.visibilityState );
  // Modify behavior...
});

Visibilitychange イベントは、タブのコンテンツが表示または非表示になったときにドキュメント上で発生します。

'visible' : 現時点では、ページのコンテンツは少なくとも部分的に表示されます。つまり、このページは最前面のタブにあり、ウィンドウは最小化されていません。
'hidden' : 現時点ではページはユーザーに表示されません。つまり、ドキュメントがバックグラウンドタブにあるか、ウィンドウが最小化されているか、オペレーティングシステムが「ロック画面状態」になっています。
'prerender' : この時点ではページがレンダリングされているため、ページは表示されません (document.hidden の目的で非表示と見なされます)。ドキュメントはこの状態からのみ開始でき、他の値からこの状態に変更することはできません。注: ブラウザのサポートはオプションです。

セッションの終了時に統計を送信する

Web サイトでは、ユーザーがページの閲覧を完了した後に、分析データまたは診断データをサーバーに送信することがよくあります。最も信頼できる方法は、visibilitychange イベントの発生時にデータを送信することです。

document.addEventListener('visibilitychange', function logData() {
    
    
  if (document.visibilityState === 'hidden') {
    
    
    navigator.sendBeacon('/log', analyticsData);
  }
});

アンロードおよびアンロード前は使用しないでください

以前は、多くの Web サイトは、セッション終了時に統計情報を送信するために unload または beforeunload イベントを使用していました。ただし、これは信頼性が低く、多くの場合 (特にモバイルデバイス) ブラウザーはアンロード、ビフォアアンロード、またはページ非表示イベントを生成しません。上記のイベントがトリガーされない状況を以下に示します。

ユーザーは Web ページをロードして操作します。
閲覧を終了した後、ユーザーはタブを閉じる代わりに別のアプリケーションに切り替えました。
その後、ユーザーは電話機のアプリケーションマネージャーを通じてブラウザアプリケーションを閉じました。

さらに、アンロードイベントは、最新のブラウザで実装されているラウンドトリップキャッシュ (bfcache) と互換性がありません。
一部のブラウザ (Firefox など) では、bfcache にアンロードイベントハンドラを含むページを除外することで、非互換性の問題が解決されます。
ただし、パフォーマンスにはペナルティがあります。Android 上の Safari や Chrome などの他のブラウザでは、ユーザーが同じタブ内の他のページに移動するときにアンロードイベントをトリガーしないことで、非互換性の問題を解決しています。
Firefox はまた、beforeunload イベントハンドラーを含むページを bfcache から除外します。
説明: bfcache
最近のブラウザでは、履歴に基づいて前方/後方操作を実行するときに「bfcache」(バックフォワードキャッシュ、ラウンドトリップキャッシュ) と呼ばれるキャッシュメカニズムが有効になり、ページナビゲーションが非常に高速になります。このキャッシュされた状態は、ユーザーがブラウザを閉じるまで削除されません。

ページ非表示をフォールバックとして使用する

pagehide イベントは、一部のブラウザーで実装されていない Visibilitychange イベントを置き換えるために使用できます。beforeunload および unload イベントと同様に、このイベントは (特にモバイルデバイスで) 確実に起動されませんが、bfcache と互換性があります。

https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon
https://www.cnblogs.com/SyMind/p/8485332.html

練習する

ページの出入りを監視する

ページの出入りを監視するにはどうすればよいですか?
通常のページの最初の読み込み、ページの終了、更新などの操作は、window.onload および window.onbeforeunload イベントを通じて監視できます。
ページの出入り、ブラウザの前後方向の操作は、pageshow と page Hide によって処理できます。

シングルページアプリケーションルーティング監視

現在主流のシングルページアプリケーションの多くはルーティング処理にbrowserHistory(history API)やhashHistoryを利用しており、ルーティングの変化を監視することでページ切り替えが可能かどうかを判断します。単純なポイントトリガーは新しい URL ではないため、切り替えることが可能であることに注意してください。

hashchange イベントと Popstate イベントの特徴的な違い

https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

Hashchange はブラウザのサポートが高い古い API です。元々はハッシュの変更を監視するために使用され、クライアントを前後に移動するために使用できましたが、それがこの API の主な目的であってはなりません。
Popstate と関連 API、pushState などは、新しい HTML5 標準に属しています。その作成の目的は、クライアントが前後に移動できるようにすることです。ハッシュだけでなく、非ハッシュの相同 URL もサポートしています。したがって、一般的な使用法は、ブラウザがサポートしている場合は、popstate を使用することですが、hashchange を使用するためのダウングレードはサポートされていません。
描画ポイントのトリガーでは、popstate イベントは発行されませんが、hashchange イベントが発行されます。
PushState も replaceState も、hashchang および Popstate イベントをトリガーできません。
そのため、ハッシュモードでもヒストリーモードでも、popstate イベントを使用すると、ハッシュの変更を監視できるだけでなく (トレースポイントはトリガーされません)、ブラウザーの前後の動きも監視できます。
問題の半分は、popstate イベントによって解決できます。popstate は、ブラウザーが前後に移動するときにのみトリガーされ、history.pushState() またはhistory.replaceState() が呼び出されたときにはトリガーされないためです。2 つの API window.history.pushState と window.history.replaceState を書き換えて、書き換えたメソッドでルートのコレクションをトリガーする必要があります。
注: hashchange が発生した場合、IE は Popstate をトリガーしないため、IE ブラウザーでダウングレード処理を実行する必要があります。

 var e = null
 "on" + (e = window.ActiveXObject || "ActiveXObject" in window ? "hashchange" : "popstate") in window && window.addEventListener(e, function(){
    
    console.log(location.href)})

一般にieを考慮することはほとんどありません。

デモ

const pageTracking = () => {
    
    
       const sendToAnalytics = () => {
    
    
           const data = {
    
    
               url: location.href,
               title: document.title,
               referrer: document.referrer
           }
           fetch('https://example.com', {
    
    
               method: 'POST',
               headers: {
    
    
                   'Content-Type': 'application/json',
               },
               body: JSON.stringify(data),
           })
       }
       const pushState = window.history.pushState
       const replaceState = window.history.replaceState;
       window.history.pushState = function () {
    
    
           pushState.apply(window.history, arguments)
           sendToAnalytics.apply()
       }
       window.history.replaceState = function () {
    
    
           replaceState.apply(window.history, arguments)
           sendToAnalytics.apply()
       };
       window.addEventListener('popstate', function (event) {
    
    
           sendToAnalytics.apply()
       });
       window.addEventListener('load', function (event) {
    
    
           sendToAnalytics.apply()
       })
       window.addEventListener('beforeunload', function (event) {
    
    
           sendToAnalytics.apply()
       });
   }

Vueルーティングのグローバルフック

Vue プロジェクトではルーティングフックを使用するのが最も便利です

グローバルポストフックグローバルポスト
フックを登録することもできますが、ガードとは異なり、これらのフックは次の関数を受け入れず、ナビゲーション自体を変更しません。

router.afterEach((to, from) => {
    
    
  sendToAnalytics(to.fullPath)
})

これらは、プロファイリング、ページタイトルの変更、ページなどのアクセシビリティ機能の宣言、その他多くのことに役立ちます
https://router.vuejs.org/en/guide/advanced/navigation-guards.html