このサービスワーカーコードを正確にトリガするにはどうすればよいですか？

Question

Create-react-appには、サービスワーカーを登録するコードを含むregisterServiceWorker.jsファイルが付属しています。私はちょうどそれがどのように動作するかについて少し混乱しています。問題のコードは次のとおりです。

function registerValidSW(swUrl) { 
    navigator.serviceWorker 
    .register(swUrl) 
     .then(registration => { 
     registration.onupdatefound =() => { 
     const installingWorker = registration.installing; 
     installingWorker.onstatechange =() => { 
      if (installingWorker.state === 'installed') { 
      if (navigator.serviceWorker.controller) { 
       // At this point, the old content will have been purged and 
       // the fresh content will have been added to the cache. 
       // It's the perfect time to display a "New content is 
       // available; please refresh." message in your web app. 
       console.log('New content is available; please refresh.'); 
      } else { 
       // At this point, everything has been precached. 
       // It's the perfect time to display a 
       // "Content is cached for offline use." message. 
       console.log('Content is cached for offline use.'); 
      }  
      } 
     }; 
     }; 
    }) 
    .catch(error => { 
     console.error('Error during service worker registration:',  error); 
    }); 
} 

その最初のコンソールログ、表示する1のために発生する必要がどのような「新しいコンテンツが利用可能であり、更新してください、」表示しますか？

具体的には、index.htmlが変更されたとき（スクリプトファイル名が変更された場合）にこのコードを実行する方法を具体的に示します。

Answer 1

ステップバイステップで解説しましょう。サービス労働者のためのHTTPリクエストが以前よりも他のいくつかのファイルに解決されたときに有効なサービス労働者の存在が

registration.onupdatefoundを確立されたときの約束が解決され

1. navigator.serviceWorker.registerが発射されたイベントのリスナを登録する（またはSWは初めて発見されたとき）
2. registration.installing.onstatechangeはインストールからなどの活性化へのインストールにインストールから新しいサービス労働者のライフサイクルの変更（、）
3. if (installingWorker.state === 'installed')フィルターうち012以外のすべての状態のリスナを登録します- 新しいSWがインストールされるたびにその肯定的な分岐が実行されます。
4. if (navigator.serviceWorker.controller)は、ページが現在（以前の）サービスワーカーによって制御されているかどうかを確認します。 trueの場合、ここで前述の更新シナリオを処理しています。

したがって、このconsole.logは、サービスワーカーが正しくインストールされている（最初のサービスワーカーではない）後に実行されます。

index.htmlの変更後にトリガーされません。チェックされるサービスワーカーコード（serviceWorker.registerメソッドが指している）のみです。通常のブラウザ（または少なくともChrome）では、現在のバージョンがダウンロードされてから24時間は新しいSWバージョンがチェックされません。サービスワーカーファイル用に設定された単純な古いHTTPキャッシュは、あまりにも激しいキャッシュヘッダーで送信された場合、ここで混乱する可能性があることにも注意してください。